:root {
    --color-eee: #ddd;
    --color-fff: #eee;
    --color-000: #111;
}

@media(prefers-color-scheme: dark) {
    :root {
        --color-eee: #333;
        --color-fff: #222;
        --color-000: #eee;
    }
}

* {
    margin     : 0;
    padding    : 0;
    box-sizing : border-box;
    font-family: Helvetica;
}

/* html{
    width     : 100vw;}
body{
    width     : 100%;} */

html,
body {
    width     : 100%;
    min-height: 100vh;
    background: var(--color-fff);
}

li{
    text-indent: 2em;
}

.nav {
    height                 : 35px;
    width                  : 100vw;
    top                    : 0;
    left                   : 0;
    backdrop-filter        : blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin                 : auto;
    z-index                : 100;
    overflow               : hidden;
}

.navBox {
    position                  : fixed;
    height                    : 35px;
    overflow                  : hidden;
    border-bottom-left-radius : 10px;
    border-bottom-right-radius: 10px;
    z-index                   : 100;
    --height                  : 35px;
    animation                 : enter 1s ease-in-out;
}

main {
    position                  : relative;
    left                      : 50%;
    transform                 : translateX(-50%);
    margin                    : 0;
    padding                   : 1vw;
    width                     : 75vw;
    min-height                : 100vh;
    border                    : 3px solid transparent;
    border-left-color         : var(--color-eee);
    border-right-color        : var(--color-eee);
    border-bottom-color       : var(--color-eee);
    border-bottom-left-radius : 50px;
    border-bottom-right-radius: 50px;
    overflow                  : hidden;
    color                     : var(--color-000);
}

main::before {
    content: '';
    display: block;
    width  : 75vw;
    height : 35px;
}

main::after {
    content: '';
    display: block;
    width  : 75vw;
    height : 50px;
}

p {
    text-indent: 2em;
}

@keyframes enter {
    0% {
        height: 0;
    }

    100% {
        height: var(--height);
    }
}