:root {
    --light-red: #ae4b6c;
    --red: #723147;
    --dark-red: #31152B;
    --white: #FFFFFF;
    --dark-gray: #1E2329;
    --darker-gray: #22272E;
    --gray: #2D333B;
    --light-gray: #444c56;
    --black: #000000;
    --brown: #E0CD9B;
    --alabaster: #E8EEEA;
    --blue: #012A36;
    --light-blue: #007EA7;

    --tudelft: #00A6D6;

    --accent-1: rgb(204, 68, 82);
    --accent-2: rgb(36, 97, 128);
    --accent-3: rgb(128, 29, 39);
    --accent-4: rgb(47, 152, 204);
    --accent-5: rgb(17, 128, 42);
    --accent-6: rgb(67, 204, 98);
    --accent-7: rgb(57, 204, 174);
    --accent-8: rgb(102, 82, 74);
    --accent-9: rgb(128, 124, 23);
    --accent-10: rgb(204, 111, 78);
}


body, html {
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-height: 100%;

    margin: 0;
    padding: 0;

    background-color: var(--dark-gray);

    font-family: "Source Code Pro", monospace;

    overflow-x: hidden;
}

#content {
    display: grid;
    grid-template-columns:  33vw 33vw 33vw;
    color: var(--white);
}

.content-item {
    display: flex;
    flex-direction: column;
    align-content: space-around;

}

#content h1 {
    text-align: center;
}

#content h2 {
    text-align: center;
}

#header h1 {
    font-size: 1.6vw;
}

#header {
    height: fit-content;
    display: grid;
    grid-template-columns:  12.5vw 12.5vw  50vw 25vw;
    grid-auto-flow: column;

    font-size: 1vw;

    background-color: var(--gray);
    color: var(--white);
}

.block {
    background-color: var(--darker-gray);
    border-radius: 20px;
    border: 1px solid var(--light-gray);

    margin-top: 15px;
    margin-left: 7.5px;
    margin-right: 7.5px;

    flex: 1;
}

#names {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
}

#names * {
    align-self: flex-start;
    text-align: center;
    font-size: 0.9vw;
}

.nameitem {
    border-radius: 0.2vw;
    padding: 0.2vw;
    cursor: pointer;
}

#author-parent {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.author {
    border-radius: 0.2vw;
    padding: 0.2vw;
    margin-bottom: 0.2vw;
    cursor: pointer;
}


.nameitem:hover, .author:hover {
    background-color: var(--dark-gray);
}

#title {
    text-align: center;
    color: var(--white);
}

.tudelft {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.tudelft h1 {
    color: var(--tudelft);
}

.gif {
    text-align: center;
    position: relative;
}

.gif:hover .static {
    display: none;
}

.gif:not(:hover) .dynamic {
    display: none;
}

.mapf-image {
    width: 60%;
}


figure {
    padding: 0;
    margin: 0;
}

figcaption {
    text-align: center;
    font-size: smaller;
}

p, ul {
    text-align: left;
    padding-left: 1.5em;
    padding-right: 1.5em;
}

ul {
    margin-left: 2em;
}

.rounded img {
    border-radius: 20px;
}

.download_button {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--light-gray);
    margin: 1vw;
    border-radius: 0.5vw;
    cursor: pointer;
}

.download_button:hover {
    background-color: var(--dark-gray);
}