html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/* Remove the default browser margin */
figure,
p,
body {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

html {
    background: radial-gradient(circle, white, #83d1de);
    color: black;
    /* color always refers to text/words */
    font-family: "pacaembu-light";
    font-size: calc(max(1vw, 10pt));
    /* Top, left/right, bottom */
    padding: 10px 48px 35px;
}

h1 {
    font-weight: normal;
    text-align: center;
    font-size: calc(max(3vw, 20pt));
    margin: 0;
    padding: 0 110px;
}

#languages {
    position: absolute;
    top: 20px;
    right: 20px;

    .flag {
        height: 1vw;
    }

    button {
        font-weight: 300;
        background: none;
        color: black;
        border: none;
        padding: 0;
        font-size: inherit;
    }
}

button>span {
    text-decoration: underline;
}

h2 {
    font-size: calc(max(1.8vw, 16pt));

    .collection {
        font-weight: 150;
    }

    .collection-name {
        font-weight: 300;
    }
}

main {
    /* container */
    display: grid;
    /* fr is "fraction of free space", so `1fr 1fr` will take the free space,
    split it in two (1+1) and give 1 piece to each column.
    2fr 3fr would split it in 5 pieces, give 2 to the first and 3 to the second.
    */
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 48px 0;
}

video {
    width: 100%;
    height: auto;
}

figure.left p {
    text-align: justify;
    font-weight: 250;
}

figure.right p {
    text-align: justify;
    font-weight: 250;
}

figure.right h2 {
    text-align: right;
}

.thumbnails {
    display: flex;
    flex-direction: row;
    gap: 8px;

    img {
        /* Allow the thumbnails to resize down */
        min-width: 0;
        cursor: pointer;
        border: 1px solid transparent;
    }

    img.selected {
        border: 1px solid black;
    }
}

/* .img {
    max-width: 20%;
} */

/* (left css, right html)
context <- <context> tag
.context <- <something class="context"> class
#context <- <something id="context"> id
*/
#context {
    text-align: justify;
    font-weight: 250;
    grid-column: 1 / span 2;
    max-width: 750px;
    justify-self: center;
}

footer {
    text-align: center;
    font-weight: 250;
}

a {
    font-weight: 450;
    color: black;
}

@media (max-width:650px) {
    main {
        grid-template-columns: 1fr;
        grid-template-rows: [videos-start] auto [videos-middle] auto [videos-end first-carousel-top] auto [first-carousel-middle] auto [first-carousel-bottom second-carousel-top] auto [second-carousel-middle] auto [second-carousel-bottom context-start] auto [context-end];
    }

    .carousel-top:nth-of-type(1) {
        grid-row-start: first-carousel-top;
    }

    .carousel-top:nth-of-type(2) {
        grid-row-start: second-carousel-top;
    }

    .thumbnails:nth-of-type(1) {
        grid-row-start: first-carousel-middle;
    }

    .thumbnails:nth-of-type(2) {
        grid-row-start: second-carousel-middle;
    }

    #languages {
        max-width: 70px;
        top: 12px;
        right: 12px;
        text-align: right;

        .slash {
            display: none;
        }
    }

    figure.right h2 {
        text-align: left;
    }

    #context {
        grid-column: 1 / span 1;
    }
}