body {
    display: flex;
    flex-direction: column;
    background: #000;

    font-family: monospace;
    color: #fff;
    margin: 0 auto;
    max-width: 700px;
    font-size: 18px;
    overflow-x: hidden;
}


app {
    display: flex;
    flex-direction: column;
    margin: max(20px, 2vw) auto 0;
    margin: 25px;
    max-width: 650px;
    gap: 20px;

    >pre {
        background: linear-gradient(110deg,rgba(238, 174, 202, 1) 20%, rgba(148, 187, 233, 1), rgba(238, 174, 202, 1) 80%);
        background-size: 400% 400%;
        background-clip: text;
        color: transparent;
        animation: pre_animate linear 3s infinite;
        font-size: min(calc(100vw / 50), 14.5px);
        margin: 0;
        user-select: none;
    }
    >.tabs {
        display: flex;
        gap: 0px;
        font-size: 18px;
        span {
            padding: 5px 10px;
            border: solid 1px #333;
            user-select: none;
        }
        span:nth-child(n+2) {
            border-left: 0;
        }
        span:hover {
            cursor: pointer;
            background: #333;
        }
        span.active{
            background: #fff;
            color: #000;
        }
    }
} app.ern {
    margin-top: 75px;
}

main {
    display: flex;
    flex-direction: column;
    >* {
        transition: 
            transform .2s,
            opacity .2s
        ;
        opacity: 1;
        margin: 0;
        padding: 0;
    }
    >.hidden {
        opacity: 0;
    }
    >.created {
        opacity: 0;
        transform: translateY(15px);
    }
    a {
        color: #fff;
    }
    >h2 {
        margin-bottom: 10px;
        span {
            font-weight: normal;
            color: #bbb;
        }
    }
    .vtable {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        >div:not(.blur) {
            flex-grow: 1;
            padding: 10px;
            border: solid 1px #333;
            display: flex;
            flex-direction: column;
            gap: 10px;
            >p {
                margin: 0;
            }
            .subj {
                color: #ccc;
            }
            h3 {
                margin: 0;
                vertical-align: end;
                
                span {
                    margin-left: 9px;
                    font-weight: normal;
                    color: #888;
                    font-size: 16px;
                }

                svg {
                    height: 20px;
                    width:  20px;
                    fill: #fff;
                    animation: vtable_icon 2s infinite;
                    animation-timing-function: steps(1, end);
                    margin-right: 8px;
                }
            }
            .list {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;

                span {
                    border: solid 1px #444;
                    padding: 3px 6px;
                    animation: vtable_span 3s ease infinite;
                    animation-delay: calc(var(--v) * 0.2s);
                }
            }
            img {
                border: solid 1px #333;
                width: 100%;
            }
        }
        >div.custom_bg {
            cursor: pointer;
            aspect-ratio: 16 / 9;
            /* background-position: 50% 50%; */
            background-size: cover;
            background-image: var(--bg);
            gap: 0;
            padding: 10px;
            flex-direction: column-reverse;
            .blur {
                padding: 10px;
                background: rgba(0,0,0,.7);
                backdrop-filter: blur(7px);
                display: flex;
                flex-direction: column;
                gap: 10px;
                border: solid 1px #333;
                /* padding-bottom: 90px; */
                /* mask-image: linear-gradient(
                    to bottom,
                    #000 calc(100% - 100px),
                    transparent
                ); */
                >* {
                    margin: 0;
                }
            }

            .list > span {
                background: rgba(0,0,0,.3);
            }
        }
        div:hover.custom_bg {
            --d: #777;
            border-color: var(--d);
            >* {
                border-color: var(--d);
            }
        }
    }

    .simple_list {
        display: flex; 
        gap: 10px;
    }

    >.profile {

        display: flex;
        padding: 10px;
        border: solid 1px #333;
        gap: 15px;
        margin-top: 10px;

        img {
            width:  60px;
            height: 60px;
            border: solid 1px #333;
        }
        .info {
            display: flex;
            flex-direction: column;
            gap: 9px;
            code {
                margin: 0;
                font-size: 14px;
                color: #aaa;
                background: #222;
                padding: 2px 6px;
            }
            >.info {
                font-size: 22px;
                margin: 0;
            }
            .desc {
                display: flex;
                flex-direction: row !important;
                align-items: center;
                gap: 10px;
                margin: 0;
                color: #999;
            }
        }
    }

    .simple_list a, .profile a {
        width: fit-content;
        padding: 0 2px;
        margin: 0;
        text-decoration: none;
        border-bottom: solid 2px #fff;

        span {
            padding-left: 4px !important;
            color: #fff !important;
        }
    }
}

@keyframes vtable_icon {
    0% {transform: rotate(-10deg) translateY(2px);}
    20% {transform: rotate(15deg) translateY(2px);}
    40% {transform: rotate(-5deg) translateY(2px);}
    60% {transform: rotate(10deg) translateY(2px);}
    100%{transform: rotate(-5deg) translateY(2px);}
}
@keyframes vtable_span {
    0% {border-color:   #444;}
    50% {border-color:  #222;}
    100% {border-color: #444;}
}

@keyframes pre_animate {
    from {background-position: 0% 0%}
    to {background-position: 100% 100%}
}


warning {
    position: fixed;
    margin: 0;
    left: 0;
    top: 0;
    width: 100vw;
    /* background: #f665; */
    background: linear-gradient(
        110deg,
        #f665 20%,
        #f663,
        #f665 80%
    );
    background-size: 500% 500%;

    border: dashed 2px #f66;
    color: #f66;
    border-left: 0;
    border-right: 0;
    backdrop-filter: blur(10px);
    animation: pre_animate 4s linear infinite;

    p {
        text-align: center;
        margin: 5px 25px;
    }
}
@keyframes warning_bg_animate {
    0%   {background: #f665}
    50%  {background: #f664}
    100% {background: #f665}
}