@font-face {
    font-family: Public Sans;
    src: url("/assets/fonts/Public Sans/PublicSans-VariableFont_wght.ttf");
}

@font-face {
    font-family: Rubik Glitch;
    src: url('/assets/fonts/Rubik Glitch/RubikGlitch-Regular.ttf');
}

:root {
    --background: #224461;
    --accent-red: #bf2c51;
    --accent-purple: #AF39E6;
    --accent-mint: #0DFCA1;
    --accent-yellow: #DBB960;
    --text: #04101C;
}

body {
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-family: 'Public Sans', sans-serif;
    background-color: var(--background);
    color: var(--text);
}

h1.gonk {
    font-family: 'Rubik Glitch';
    font-size: 20vw;
    text-align: center;
    margin-block: 0;
    font-weight: 400;
}

h2.gonk {
    font-size: 7.5vw;
    text-align: center;
}

div.horizontal {
    min-height: 100vh;
    /* height */
}

div.box {
    padding-top: 2%;
    padding-bottom: 1%;
    background-color: var(--accent-red);
    margin: auto;
    width: 98vw;
    min-height: 98vh;
    /* height: -content; */
}

div.box p {
    padding-left: 10%;
    font-size: 3.75vw
}

div.box ul {
    padding-left: 10%;
    font-size: 3.75vw
}

div.box a:hover {
    color: var(--accent-mint);
}

div.box a:visited {
    color: var(--accent-purple);
}

div.box a {
    color: var(--background)
}