@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --main: #1A2746;
    --negative: #FFF8F7;
    --accent: #BC8500;
    --black: #1A1A1A;
    --white: #FFF8F7;

    --main-translucent: rgba(26, 38, 70, 0.6);
}

body {
    background: url('../Images/Default.jpg') no-repeat center center / cover fixed var(--main);
    
    margin: 0;
    padding: 0;

    min-height: 100vh;

    display: flex;

    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--white);
}

div.container {
    background: var(--main-translucent);
    backdrop-filter: blur(0.24em);

    margin: 0 0 0 2em;
    padding: 0;

    
    display: flex;

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


div.container div.cover {
    max-width: 48vw;
}

div.container div.cover h1 {
    font: 700 2.4em "Plus Jakarta Sans";

    margin: 0 0 0.2em 0;
}

div.container div.cover h2 {
    font: 700 2em "Plus Jakarta Sans";

    margin: 0 0 0.2em 0;
}

div.container div.cover p {
    font: italic 400 1.2em "Merriweather";
    line-height: 1.6;
    margin: 0;
}

div.container div.cover a {
    color: var(--accent);
    text-decoration: underline var(--accent) dotted 0.08em;
}

div.container div.cover a:hover {
    text-decoration: underline var(--accent) solid 0.08em;
}

div.container div.cover button {
    background: none;
    color: var(--white);

    margin: 12pt 0 0 0;
    padding: 4pt 20pt;

    display: none;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 12pt;

    border: 2px solid var(--white);
    border-radius: 500px;

    cursor: pointer;

    transition: background 0.2s, color 0.2s;

    display: none;
}

div.container div.cover button:hover {
    background: var(--white);
    color: var(--main);
}


div.container div.first, div.container div.clock, div.container div.final {
    display: none;
}


div.container div.content {
    padding: 1em;
}

div.container div.content div.headingText h1 {
    font: 700 4em "Plus Jakarta Sans";

    margin: 0 0 0.2em 0;
}

div.container div.content div.headingText p {
    font: italic 400 2em "Merriweather";

    margin: 0;
}


div.container div.content div.spacer {
    margin: 0;
    padding: 0;

    height: 16vh;
}


div.container div.content div.anagram h2 {
    font: 400 2em "Plus Jakarta Sans";

    margin: 0 0 0.2em 0;
}

div.container div.content div.anagram ol {
    list-style-type: none;

    margin: 0;
    padding: 0;

    display: flex;
}

div.container div.content div.anagram ol li {
    background: var(--accent);

    aspect-ratio: 1 / 1;

    height: 2em;

    margin: 0.2em;
    padding: 0.08em;

    font: 600 2.4em "Merriweather";
    color: var(--black);

    display: flex;

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

div.container div.content video {
    width: 32em;
    border-radius: 100em;
}


div.smallText {
    margin: 0;
    padding: 0;

    position: fixed;

    bottom: 0.2em;
    right: 0.2em;

    z-index: 100;
    
    font-size: 0.4em;
    color: var(--grey);
    text-align: right;

    user-select: none;
    pointer-events: none;
}


@media only screen and (max-width: 720px) {
    div.container {
        margin: 0 0 0 0;

        min-width: 100vw;
        flex-wrap: wrap;

        justify-content: center;
        text-align: center;

        flex: 1;
    }

    div.container div.cover {
        max-width: 100vw;
    }


    div.container div.content div.anagram ol {
        background: var(--accent);

        list-style-type: none;

        margin: 0;
        padding: 0;

        display: flex;

        justify-content: center;
    }

    div.container div.content div.anagram ol li {
        background: none;

        aspect-ratio: auto;

        height: auto;

        margin: 0.08em;
        padding: 0;

        font: 600 2.4em "Merriweather";

        display: flex;

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