@media (prefers-color-scheme: light) {
    :root {
        --bg-color: #eeeeff;
        --fg-color: initial;
        --bg-accent-color: #c20101;
        --fg-accent-color: #ffffff;
        --bg-inactive-color: #0f0e0e;
        --fg-inactive-color: #424242;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #0a0a0a;
        --fg-color: #eeeeff;
        --bg-accent-color: #c20101;
        --fg-accent-color: #ffffff;
        --bg-inactive-color: #0f0e0e;
        --fg-inactive-color: #424242;
    }

    .invertable {
        filter: invert(1);
    }
}

@keyframes squigglevision {
    0% {
        filter: url("#turbulence-1");
    }

    25% {
        filter: url("#turbulence-2");
    }

    50% {
        filter: url("#turbulence-3");
    }

    75% {
        filter: url("#turbulence-4");
    }

    100% {
        filter: url("#turbulence-5");
    }
}

@keyframes supersquigglevision {
    0% {
        filter: url("#squiggly-0");
    }

    25% {
        filter: url("#squiggly-1");
    }

    50% {
        filter: url("#squiggly-2");
    }

    75% {
        filter: url("#squiggly-3");
    }

    100% {
        filter: url("#squiggly-4");
    }
}

body {
    background: var(--bg-color);
    color: var(--fg-color);

    padding: 1% 0;
}

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

.shrinkwrap {
    display: inline-block;
}

.me-container {
    display: flex;
    flex: auto;
    flex-direction: column;
    padding: 0 47vw;
}

.nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    width: 60vw;
}

.nav-list > li {
    padding-bottom: 10px;
}

.small-cloud {
    width: 40%
}

.medium-cloud {
    width: 75%
}

.title {
    text-align: center;
}

.bold {
    font-weight: bold;
}