html{
    overflow:hidden;
}

html,body{
    margin:0;
    padding:0;
    backdrop-filter: blur(100px);
    width:100%;
    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%);
}

.background{
    background-color: rgba(255,255,255,0.8);
    width:100%;
    height:100%;
}

.middleframe{
    border:double 4px transparent;
    border-radius: 16px;
    background-image: linear-gradient(rgb(255,255,255),rgb(255,255,255)), radial-gradient(circle at top, #23049D,#AA2EE6,#F772CF,#FFDF6B);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    position: fixed;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-50%);
    padding:1rem;
    background-color: transparent;
}

.middleframe .title{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:0.5rem;
}

.middleframe .title img{
    width: 80px;
    height:80px;
    aspect-ratio:1/1;
}

.middleframe .title h1{
    font-family: 'League Spartan';
    background-image: linear-gradient(120deg, #E663D4, #F772CF);
  
    /* Set the background size and repeat properties. */
    background-size: 100%;
    background-repeat: repeat;
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    font-size: 40px;
    margin:0;
    cursor: default;
}

.middleframe p{
    font-family: 'League Spartan';
    text-align: center;
    font-size: 13px;
    cursor: default;
}

.middleframe .points{
    display: flex;
    justify-content: center;
}

.middleframe .points img{
    width:45px
}

.links{
    display: flex;
    justify-content: center;
    gap:0.5rem;
}

.links a{
    background-color: rgb(150,150,150);
    color:white;
    text-decoration: none;
    width:120px;
    padding:0.7rem 0;
    border-radius: 100vw;
    text-align: center;
    margin-top: 1rem;
    font-family: 'League Spartan';
}

a#loginbtn, a#appbtn{
    background:linear-gradient(96deg, #FF79CD 0%, #FFAA9E 100%)
}

a#signupbtn, button#logoutbtn{
    background:linear-gradient(96deg, #FFAA9E 0%, #FFDF6B 100%);
    cursor: pointer;
}

a#appbtn, button#logoutbtn{
    display: none;
}

#logoutbtn{
    all:unset;
    color:white;
    text-decoration: none;
    width:120px;
    padding:0.7rem 0;
    border-radius: 100vw;
    text-align: center;
    margin-top: 1rem;
    font-family: 'League Spartan';
}