:root {
    scrollbar-color: #777 #333;
}
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background: #212121;
    color: #e7e7e7;
}
header {
    position: fixed;
    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;
    > .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;
                    }
                }
            }
        }
    }
}
.button {
    padding: 5px 15px;
    font-size: 14px;
    border: none;
    background: #006bef;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    &:hover {
        background: #0056b3;
    }
}
.heading {
    min-height: 100svh;
    padding: 0 7svw;
    display: flex;
    position: relative;
    > .content {
        margin: auto 0;
        > .title {
            all: unset;
            font-size: 24px;
        }
        > .content {
            margin-top: 5px;
            font-size: 14px;
        }
    }
    &:before {
        content: '';
        position: absolute;
        right: 25px;
        bottom: 20px;
        font-size: 14px;
        width: 1px;
        height: 50px;
        background: #e7e7e7;
    }
    &:after {
        content: '';
        position: absolute;
        right: 25px;
        bottom: 20px;
        font-size: 14px;
        width: 1px;
        height: 10px;
        background: #e7e7e7;
        transform: rotate(-45deg);
        transform-origin: left bottom;
    }
}
.section {
    padding: 70px 7svw;
    > h2 {
        all: unset;
        font-size: 20px;
    }
    > .content {
        margin-top: 5px;
        font-size: 14px;
    }
    > .buttons {
        margin-top: 10px;
        display: flex;
        gap: 5px;
    }
}
a.link {
    color: #9cf;
}
.card {
    margin: 10px 0px;
    padding: 10px 17.5px;
    > .title {
        font-size: 18px;
    }
    > .title-mini {
        font-size: 16px;
    }
    > .content {
        font-size: 14px;
    }
    &.success {
        background: #213321;
        border: solid 1px #21aa21;
    }
    &.danger {
        background: #442121;
        border: solid 1px #bb2121;
    }
    &.warning {
        background: #333321;
        border: solid 1px #c0c021;
    }
    &.info {
        background: #213344;
        border: solid 1px #2177aa;
    }
}
footer {
    margin-top: auto;
    background: #1a1a1a;
    color: #aaa;
    > .text {
        padding: 12.5px 20px;
        box-sizing: border-box;
        font-size: 14px;
        > a {
            color: #aaa !important;
            text-decoration: unset;
        }
    }
}