:root {
    --rosewater: 245, 224, 220;
    --flamingo: 242, 205, 205;
    --pink: 245, 194, 231;
    --mauve: 203, 166, 247;
    --red: 243, 139, 168;
    --maroon: 235, 160, 172;
    --peach: 250, 179, 135;
    --yellow: 249, 226, 175;
    --green: 166, 227, 161;
    --teal: 148, 226, 213;
    --sky: 137, 220, 235;
    --sapphire: 116, 199, 236;
    --blue: 137, 180, 250;
    --lavender: 180, 190, 254;
    --text: 205, 214, 244;
    --subtext1: 186, 194, 222;
    --subtext0: 166, 173, 200;
    --overlay2: 147, 153, 178;
    --overlay1: 127, 132, 156;
    --overlay0: 108, 112, 134;
    --surface2: 88, 91, 112;
    --surface1: 69, 71, 90;
    --surface0: 49, 50, 68;
    --base: 30, 30, 46;
    --mantle: 24, 24, 37;
    --crust: 17, 17, 27;
}

@view-transition {
    navigation: auto;
}

html,
body
{
    height: 100vh;
    width: 100vw;
    background: rgb(var(--base));
    margin: 0;
    padding: 0;
}

main {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;    
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body {
    font-family: 'Fira Code';
    font-size: 18px;
    color: rgb(var(--text))
}

header {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
}

.copyright {
    position: fixed;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    font-size: 12px;
}

.navbar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.navbar > div > a {
    text-decoration: none;
    color: rgb(var(--teal));
    margin-left: 0.25rem;

    &:hover {
        text-decoration: underline;
    }
}

.navbar > div:hover {
    background-color: rgb(var(--sky));
    
    & a,span {
        color: rgb(var(--base))
    }

    & a {
        font-weight: 700;
    }
}  

.warning {
    font-size: 14px;
}