:root, body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    color: #000;
    font-size: 16pt;
}

.color-page:not(.active) {
    display: none;
}

.color-page {
    border-radius: 15px;
    position: absolute;
    padding: 1rem;
    width: 75vw;
    height: 75vh;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
}

.color-page > h1 {
    font-size: 40pt;
}

#color-green {
    background-color: #7f7;
}

#color-green::selection {
    background-color: #070;
    color: #cfc;
}

#color-blue {
    background-color: #25f;
}

#color-blue::selection {
    background-color: #12c;
    color: #bcf;
}

#color-yellow {
    background-color: #ff6;
}

#color-yellow::selection {
    background-color: #770;
    color: #ffc
}

body:has(#color-green.active) {
    background-color: #030;
}

body:has(#color-blue.active) {
    background-color: #004;
}

body:has(#color-yellow.active) {
    background-color: #330;
}

#nav-left {
    background-image: linear-gradient(to right, #000f, #fff0);
    position: fixed;
    top: 0;
    left: 0;
    width: 8%;
    height: 100vh;
}

#nav-left > img {
    user-select: none;
    display: block;
    content: url(/static/img/arrow.webp);
    filter: invert(100%);
    rotate: -90deg;
    width: 20px;
    margin-left: 10px;
    margin-top: 50vh;
}

#nav-right {
    background-image: linear-gradient(to left, #000f, #fff0);
    position: fixed;
    top: 0;
    right: 0;
    width: 8%;
    height: 100vh;
}

#nav-right > img {
    user-select: none;
    display: block;
    content: url(/static/img/arrow.webp);
    filter: invert(100%);
    rotate: 90deg;
    width: 20px;
    margin-left: auto;
    margin-right: 10px;
    margin-top: 50vh;
}