body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background: #212121;
    color: #e7e7e7;
}
.slide {
    display: flex;
    position: relative;
    width: 100%;
    height: 100svh;
    overflow: hidden;
    > .page {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0px 7svw;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        &.show {
            animation: slide 0s forwards;
        }
        &:not(.show) {
            animation: slide-gone 0s forwards;
            transform: translateX(-100%);
            pointer-events: none;
            * {
                pointer-events: none;
            }
        }
        &.back {
            animation: slide-back 0s forwards;
            transform: translateX(-100%);
        }
        &.back:not(.show) {
            animation: slide-back-gone 0s forwards;
            transform: translateX(100%);
        }
        &.animate {
            animation-duration: .5s !important;
        }
        > .title {
            margin-top: auto;
            font-size: 24px;
            display: flex;
            flex-direction: column;
        }
        > .content {
            margin-top: 5px;
            font-size: 14px;
        }
        > .buttons {
            margin-top: 10px;
            margin-bottom: auto;
            display: flex;
            gap: 5px;
            > .button {
                padding: 5px 15px;
                font-size: 14px;
                border: none;
                background: #006bef;
                color: #fff;
                cursor: pointer;
                text-decoration: none;
                &:hover {
                    background: #0056b3;
                }
            }
        }
    }
    > .navigate {
        position: absolute;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 2;
        top: 50%;
        display: flex;
        transform: translateY(-50%);
        &.prev {
            left: 0px;
            padding: 30px 7.5px 30px 20px;
            > .icon {
                transform: rotate(45deg);
            }
        }
        &.next {
            right: 0px;
            padding: 30px 20px 30px 7.5px;
            > .icon {
                transform: rotate(-135deg);
            }
        }
        &:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        > .icon {
            margin: auto;
            width: 20px;
            height: 20px;
            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
            pointer-events: none;
        }
    }
    > .pagination {
        position: absolute;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 5px;
        > .dot {
            width: 10px;
            height: 7.5px;
            transition: all .25s ease;
            background: #555;
            cursor: pointer;
            &:hover {
                background: #aaa;
            }
            &.active {
                background: #777;
                width: 15px;
                > .progress {
                    width: 0%;
                    height: 100%;
                    background: #ddd;
                    transition: width 100ms linear;
                }
            }
        }
    }
}
.rbadge {
    font-size: 12px;
    background: #d22;
    margin: 0 auto 0 0;
    padding: 2px 7.5px;
}
.banner {
    background: #d22;
    color: #fff;
    display: flex;
    text-decoration: none;
    &:hover {
        background-color: #c22;
    }
    > .banner-inner {
        display: flex;
        margin: auto;
        padding: 10px;
        gap: 7.5px;
        > .banner-title {
            background: #fff;
            color: #c22;
            font-size: 0.8em;
            margin: auto 0;
            padding: 0px 7.5px;
        }
        > .banner-text {
            font-size: 0.85em;
            margin: auto 0;
        }
    }
}
.card {
    background: #333;
    border: solid 1px #aaa;
    padding: 10px 20px;
    margin: 10px 20px;
    .title {
        font-size: 18px;
    }
    .content {
        font-size: 14px;
    }
    .buttons {
        margin-top: 10px;
        display: flex;
        gap: 5px;
        .button {
            padding: 5px 15px;
            font-size: 14px;
            border: none;
            background: #006bef;
            color: #fff;
            cursor: pointer;
            text-decoration: none;
            &:hover {
                background: #0056b3;
            }
        }
    }
}
@media (max-width: 768px) {
    .slide {
        > .page {
            padding: 0px 12.5svw;
            > .title {
                font-size: 20px;
            }
            &.animate {
                animation-duration: .35s !important;
            }
        }
    }
    .card {
        > .title {
            font-size: 16px;
        }
    }
}
@keyframes slide {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes slide-gone {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes slide-back {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes slide-back-gone {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}
header {
    position: sticky;
    height: calc(1.5em + 20px);
    margin-bottom: calc(-1.5em - 20px);
    top: 0;
    left: 0;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    background: rgba(33, 33, 33, 0.9);
    backdrop-filter: blur(3px);
    z-index: 100;
    #nav-container {
        display: none;
    }
    #open-menu {
        display: none;
    }
    > .sitename {
        display: flex;
        > .title {
            color: unset;
            text-decoration: unset;
            display: flex;
        }
        > .subtitle {
            font-size: smaller;
            display: flex;
            border-left: solid 1px #aaa;
            color: #bbb;
            padding-left: 5px;
            margin: auto 0 auto 7.5px;
            position: relative;
            &:after {
                content: '';
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='60 -900 860 860' fill='%23000'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");
                filter: brightness(0) saturate(100%) invert(86%) sepia(0%) saturate(0%) hue-rotate(166deg) brightness(92%) contrast(80%);
                width: 1em;
                height: 1em;
                margin: auto 0;
            }
            &:hover {
                color: #e7e7e7;
                &:after {
                    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(3420%) hue-rotate(261deg) brightness(119%) contrast(81%);
                }
            }
            &:not(:hover) > .switch {
                pointer-events: none;
                clip-path: polygon(0 0, 100% 0%, 100% 0%, 0% 0%);
            }
            > .switch {
                position: absolute;
                top: 100%;
                left: -1px;
                display: flex;
                border: solid 1px #aaa;
                flex-direction: column;
                width: max-content;
                background: rgba(33, 33, 33, 0.9);
                clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
                transition: clip-path .25s ease;
                z-index: 1;
                > a {
                    color: #b5b5b5;
                    text-decoration: unset;
                    padding: 7.5px 10px;
                    &.active {
                        color: #e7e7e7;
                    }
                    &:hover {
                        background: rgba(255, 255, 255, 0.1);
                        color: #e7e7e7;
                    }
                }
            }
        }
    }
    h1 {
        margin: 0;
        font-size: 18px;
    }
    nav {
        display: flex;
        margin: auto;
        margin-right: 0px;
        a {
            margin: auto 10px;
            display: flex;
        }
    }
}
footer {
    padding: 10px 20px;
    color: #aaa;
    .copyright {
        font-size: 14px;
    }
}