.page-container {
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    max-width: 100vw;
}

.page {
    position: absolute;
    left: 100%;
    width: 100%;
    height: fit-content;
    margin-top: auto;
    margin-bottom: auto;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, left 0.5s ease-in-out;
}

.page.reverse {
    left: -100%;
}

.page.active {
    left: 0;
    opacity: 1;
}

#ascii-art {
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
    font-size: clamp(10px, 2.5vw, 2vh);
    transition: all 1s ease;
}

.page-switch {
    color: #ff00ff;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.page-switch:hover {
    color: #ffffff;
    border-color: #ffffff;
}

.page-switch.unavailable {
    color: #afafaf;
    transition: color 0.3s ease;
}

.page-switch.unavailable:hover {
    color: #afafaf;
    border-color: transparent;
}

.requires-discord-opened {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease-in, max-height 0.5s ease-in;
}

.requires-discord-opened.show {
    opacity: 1;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    max-height: 100%;
}

a.requires-discord-opened.show {
    opacity: 1;
    max-height: 100%;
    transition: opacity 0.5s ease-in, max-height 0.5s ease-in, border-color 0.3s ease, color 0.3s ease;;
}

a.requires-discord-opened.show:hover {
    color: #ffffff;
    border-color: #ffffff;
}

footer {
    text-align: center;
}