:root{
    --var-colortheme: rgb(64,199,242);
    --var-colortheme-dark: rgb(49, 173, 210);
    --var-colortheme-hover: rgb(53, 187, 228);
    --var-colortheme-dark-hover: rgb(39, 162, 199);
}

.filter{
    position:absolute;
    top:0px;
    left:0px;
    background:rgba(0, 0, 0, 20%);
    width:100%;
    height:100%;
}

.filter2{
    z-index:100;
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background:black;
    transition:all 1s !important;
  }

.filter2.hidden {
    opacity:0%;
    z-index:-2;
}ent {
    width: 100%;
}

.alerts{
    position: relative;
    width: 300px;
    height: 30px;

    & .alert {
        position:absolute;
        left:50%;
        transform: translate(-50%);
        display:inline-block;
        width:100%;
        color:rgba(0, 0, 0, 0.7);
        font-size:18px;
        text-align: center;
        transition: opacity 0.2s;
        pointer-events: none;
        color: var(--var-colortheme)
    }
}

.hidden {
    opacity:0%;
    transition: opacity 0.2s;
}

.transition {
    position:fixed;
    display:inline-block;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    background: white;
    z-index:100;
    transition:opacity 0.7s;
}

.transitionH {
    opacity:0%;
    z-index:-1;
    transition:opacity 0.7s;
}

.developer-original-submit-button{
    background: linear-gradient(90deg, var(--var-colortheme), var(--var-colortheme-dark));

    &:hover{
        background: linear-gradient(90deg, var(--var-colortheme-hover), var(--var-colortheme-dark-hover));
    }
}