@font-face {
    font-family: "Bienvenue";
    font-weight: 400;
    font-style: normal;
    src: url("./Bienvenue-Light.woff2") format("woff2");
}

@font-face {
    font-family: "Bienvenue";
    font-weight: 400;
    font-style: italic;
    src: url("./Bienvenue-LightItalic.woff2") format("woff2");
}

@font-face {
    font-family: "Bienvenue";
    font-weight: 500;
    font-style: normal;
    src: url("./Bienvenue-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Bienvenue";
    font-weight: 500;
    font-style: italic;
    src: url("./Bienvenue-Italic.woff2") format("woff2");
}

@font-face {
    font-family: "Bienvenue";
    font-weight: 600;
    font-style: normal;
    src: url("./Bienvenue-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Bienvenue";
    font-weight: 600;
    font-style: italic;
    src: url("./Bienvenue-MediumItalic.woff2") format("woff2");
}

@font-face {
    font-family: "Bienvenue";
    font-weight: 700;
    font-style: normal;
    src: url("./Bienvenue-Semibold.woff2") format("woff2");
}

@font-face {
    font-family: "Bienvenue";
    font-weight: 700;
    font-style: italic;
    src: url("./Bienvenue-SemiboldItalic.woff2") format("woff2");
}

@font-face {
    font-family: "Bienvenue";
    font-weight: 800;
    font-style: normal;
    src: url("./Bienvenue-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Bienvenue";
    font-weight: 800;
    font-style: italic;
    src: url("./Bienvenue-BoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: "Gamechanger";
    font-weight: 500;
    font-style: normal;
    src: url("./Gamechanger-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Gamechanger";
    font-weight: 600;
    font-style: normal;
    src: url("./Gamechanger-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Gamechanger";
    font-weight: 700;
    font-style: normal;
    src: url("./Gamechanger-Bold.woff2") format("woff2");
}

:root {
    --color-primary-1: #BE02F8;
    --color-primary-2: #3F32F1;
    --color-primary-3: #192D38;
    --color-primary-4: #B9FF00;
    --color-primary-4-t75: #B9FF00C0;
    --color-primary-5: #05E560;
    --color-primary-6: #BEDAE5;
    --color-primary-7: #FFFFFF;
    --color-primary-8: #000000;
    --color-primary-9: #74929E;
    --color-primary-10: #5A6D7A;
    --color-primary-11: #F2F8FA;
    --color-primary-12: #D9D9D9;
    --color-primary-13: #3236C0;
    --color-primary-14: #0C0F80;
}

body {
    font-family: "Bienvenue", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1rem;
    letter-spacing: normal;
    word-spacing: 2px;
    color: var(--color-primary-6);
    background-color: var(--color-primary-9);
    font-weight: normal;
    text-decoration: none;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Gamechanger", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
}

h1 {
    font-size: 2.986rem
}

h2 {
    font-size: 2.488rem
}

h3 {
    font-size: 2.074rem
}

h4 {
    font-size: 1.728rem
}

h5 {
    font-size: 1.44rem
}

h6 {
    font-size: 1.2rem
}

small {
    font-size: 0.833rem
}

a {
    color: var(--color-primary-4);
    transition: color 300ms ease-in-out;
}

    a:visited {
        color: var(--color-primary-4);
    }

    a:hover {
        color: var(--color-primary-4-t75);
    }

    a.button {
        display: inline-block;
        padding: 10px;
        color: var(--color-primary-4);
        text-decoration: none;
        border-width: 2px;
        border-style: solid;
        border-color: var(--color-primary-4);
        transition: background-color 300ms ease-in-out;
    }

        a.button:hover {
            color: var(--color-primary-3);
            background-color: var(--color-primary-4);
        }

@media (max-width: 800px) {
    a.button {
        display: block;
        margin: 10px;
        text-align: center;
    }
}

p {
    margin-bottom: 30px;
}

html {
    height: 100vh;
    padding: 0;
}

body {
    min-height: 100vh;
    padding: 0;
    margin: 0;
    border: 0;
}

.container {
    display: grid;
    min-height: 100vh;
    grid-template-columns: auto 800px auto;
    grid-template-rows: 1fr max-content 1.618fr;
}

    .container > .tile {
        height: fit-content;
        grid-column-start: 2;
        grid-row-start: 2;
        padding: 30px 60px 60px 60px;
        background-color: var(--color-primary-3);
    }

@media (max-width: 800px) {
    .container {
        grid-template-columns: 0 auto 0;
    }
}