:root {
    font-family: RobotoFlex-Regular, sans-serif;
    --var-nav-footer-height: 7rem;
    --clr-txt: #adadad;
    --clr-txt-bright: #ffffff;
    --clr-primary: #7FA3FF;
    --clr-secondary: rgba(127, 163, 255, 0.3);
    --clr-info-primary: #055160;
    --clr-info-secondary: #a3d5e0;
    --clr-info-bg: #cff4fc;
    --clr-danger-primary: #842029;
    --clr-danger-secondary: #e0b2b7;
    --clr-danger-bg: #f8d7da;
    --clr-danger-contrast: #dd0000;
    --clr-warning-primary: #664d03;
    --clr-warning-secondary: #e6d6a3;
    --clr-warning-bg: #fff3cd;
    --clr-warning-contrast: #d7d75b;
    --clr-success-primary: #0f5132;
    --clr-success-secondary: #aeccbe;
    --clr-success-bg: #d1e7dd;
    --clr-success-contrast: #009900;
    --clr-dark: rgb(63, 63, 63);
    --clr-darkest: #121212;
    --clr-ticket-bg: #323232;
    --clr-cookie: #d9833e;
}

.changelog-blur {
    box-sizing: border-box;
    width: 100lvw;
    height: 100lvh;
    backdrop-filter: blur(8px);
    left: 0;
    top: 0;
    position: fixed;
    z-index: 6000;
}

.changelog-wrapper{
    position: absolute;
    width: 50%;
    z-index: 6001;
    outline: 0.13rem solid var(--clr-dark);
    border-radius: 0.7rem;
    padding: 0.7rem;
    background: linear-gradient(45deg, #130732, #000000);
}

.changelog-wrapper *{
    user-select: text;
}

.changelog-wrapper h2{
    text-align: center;
    color: var(--clr-primary);
}

.changelog-wrapper .changelog-code{
    font-family: monospace, monospace;
}

.changelog-wrapper p{
    padding: 0.7rem 0;
}

.changelog-wrapper ul, ol{
    padding: 0 1.3rem;
}

.changelog-wrapper section{
    padding: 0.7rem;
}

.changelog-wrapper article{
    outline: calc(0.5*0.13rem) solid var(--clr-dark);
    border-radius: 0.7rem;
    margin: 0.3rem;
    padding: 0 0.7rem;
}

.changelog-content{
    height: fit-content;
    max-height: 70lvh;
    overflow-y: scroll;
}

.changelog-title{
    background-color: var(--clr-primary);
    font-size: 1.25rem;
    text-align: center;
    color: var(--clr-darkest);
}

.changelog-element{
    padding: 0.7rem;
    margin: 0.3rem;
    border-radius: 0.4rem;
}

@media (max-width: 900px) {
    .changelog-box{
        width: 95%;
    }
}