html{
    overflow:hidden;
}

html,body{
    margin:0;
    padding:0;
    backdrop-filter: blur(100px);
    height:100%;
}

body{
    background:linear-gradient(117deg, #23049D 0%, #AA2EE6 25%, #FF79CD 50%, #FFDF6B 100%);
}

body[theme="dark"]{
    background:linear-gradient(117deg, rgb(37, 13, 131) 0%, rgb(127, 29, 174) 25%, rgb(136, 10, 89) 50%, rgb(111, 89, 10) 100%);
}

.accauth{
    background-color: rgb(255,255,255,0.8);
    border-radius: 10px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    padding:1rem;
    box-shadow: 1px 1px 15px rgb(0,0,0);
    transition: background-color 0.3s;
}

body[theme="dark"] .accauth{
    background-color: rgb(33, 35, 36,0.8);
    transition: background-color 0.3s;
}

body[theme="dark"] .accauth :where(h1, label, p, input, select, option, button){
    color:rgb(232, 230, 227);
    transition: color 0.3s;
}

.accauth h1{
    text-align: center;
    margin:0.8rem 0;
    font-family: 'League Spartan';
    -webkit-user-select: none;
    user-select: none;
}

.accauth label{
    -webkit-user-select: none;
    user-select: none;
}

.accauth .inputfield{
    display: flex;
    width: 100%;
    justify-content:space-between;
    align-items:center;
    font-family: 'League Spartan';
    gap:0.5rem;
}

.accauth .inputfield div{
    display: none;
}

.accauth .inputfield span{
    white-space: nowrap;
}

.accauth .inputfield :is(input,select){
    border:none;
    outline:none;
    background-color:rgb(150,150,150);
    padding:0.5rem;
    font-size:1.1rem;
    font-family: 'League Spartan';
    border-radius:8px;
    position: relative;
    transition: background-color 0.3s;
}

body[theme="dark"] .accauth .inputfield :is(input,select){
    background-color:rgb(90, 96, 100);
    transition: background-color 0.3s;
}

.accauth .inputfield option{
    max-height:20%;
    font-family: 'League Spartan';
}

.accauth.login,.accauth.signup{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:1rem;
}

.accauth button{
    all:unset;
    font-family:'League Spartan';
    background-color:rgb(150,150,150);
    padding:0.5rem 1rem;
    border-radius: 0.5rem;
    width:fit-content;
    cursor: pointer;
    transition: background-color 0.3s;
}

body[theme="dark"] .accauth button{
    background-color: rgb(90, 96, 100);
    transition: background-color 0.3s;
}

.accauth p{
    margin:0;
    font-family: 'League Spartan';
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
}

p.errormsg{
    color:red;
    width:fit-content;
    margin:0;
}

p.errormsg a{
    color:red;
}

.accauth a{
    color:#FF79CD;
}

.settingsmenu{
    position:absolute;
    bottom:2%;
    left:2%
}

.settingsmenu #darkmodetoggle{
    position: relative;
    overflow: clip;
    height:28px;
    width:28px;
    border:none;
    background:none;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.settingsmenu #darkmodetoggle:hover{
    background-color: rgba(50,50,50,0.5);
    border-radius: 8px;
    transition: background-color 0.3s;
}

.settingsmenu #darkmodetoggle span{
    position: absolute;
}

[theme="light"] #darkmodetoggle span#darkswitch{
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    transition: left 0.2s;
    color:black;
}

[theme="light"] #darkmodetoggle span#lightswitch{
    top: 50%;
    left: 150%;
    transform: translateX(-50%) translateY(-50%);
    transition: left 0.2s;
    color:black;
}

[theme="dark"] #darkmodetoggle span#darkswitch{
    top:50%;
    left:-150%;
    transform: translateX(-50%) translateY(-50%);
    transition: left 0.2s;
    color:rgb(232, 230, 227);
}

[theme="dark"] #darkmodetoggle span#lightswitch{
    top:50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: left 0.2s;
    color:rgb(232, 230, 227);
}

.criterias{
    position:absolute;
    background-color:rgb(255,255,255);
    font-family: 'League Spartan';
    padding:0.5rem;
    border-radius: 8px;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%) scale(0);
}

.criterias h1{
    margin:0;
    margin-top:0.3rem;
    text-align: center;
    cursor: default;
}

.criterias ul{
    padding-left:20px;
}

.criterias li{
    cursor:default;
    white-space:nowrap;
    font-size: 1.2rem;
    margin:0.5rem;
}

.criterias span{
    position: absolute;
    right:10px;
    top:10px;
    border-radius: 100%;
    transition: background-color 0.3s;
}

.criterias span:hover{
    background-color:rgb(150,150,150);
    cursor: pointer;
}

@keyframes opencriterias {
    0%{
        display: block;
        transform: translateX(-50%) translateY(-50%) scale(0);
    }
    100%{
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
}

@keyframes closecriterias {
    0%{
        transform: translateX(-50%) translateY(-50%) scale(1); 
    }
    100%{
        transform: translateX(-50%) translateY(-50%) scale(0); 
    }
}

@media screen and (max-width:780px){
    .signup .inputfield{
        flex-direction: column;
        align-items: flex-start;
    }

}

@media screen and (max-width:500px){
    .criterias li{
        white-space: normal;
    }
}