@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: "Poppins", sans-serif;

}

body{
    height:100vh;
}
.myContainer{
    display:flex;
    background-color: transparent;
    height:100vh;
    width:100%;
    flex-direction: column;
    
    align-items: center;
}

.top{
    display:flex;
    flex-direction: column;
    background-color: #01092b;
    font-size:28px;
    font-weight: bold;
    color:blue;
    height:10vh;
    width:100%;
    border-radius:0px 0px 50% 50%;
     /* background:linear-gradient(to top, darkblue 0%, rgb(1, 1, 63) 100%);*/
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.top .img img{
    width:100px;
    border-radius: 0 20px 20px 0;
}
.top .img2 img{
    width:100px;
    border-radius: 20px 0 0  20px ;
}

.top .title .subtitle{
    font-size:14px;
    text-align: center;
    font-weight: normal;
    color:lightblue;
}
.middle{
    
    display:flex;
    height:60vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:2rem;
}

/*.bottom{
    background-color: #01092b;
    height:20vh;
    width:100%;
    border-radius:50% 50% 0px  0px ;
    background:linear-gradient(to top, darkblue 0%, rgb(1, 1, 63) 100%);
}*/


.loginAs{
    display:flex;
    margin:0;
    padding:0;
    list-style: none;
    gap:2rem;
}

.loginAs li{
    font-size: 20px;
    border-bottom:5px solid;

    border-radius: 50% 0px 50% 0px ;
    background-color: white;
    padding:15px;

}

.loginAs li:hover{
    border-bottom:5px solid;
    /*transition:1s;*/
    border-image:linear-gradient(to right, red, gold, lightgreen, gold, red) 5;

}

.register{
    display:flex;
    font-size: 24px;
    margin:0;
    padding:0;
    list-style: none;
}

.register:hover{
    border-bottom:5px solid;
    border-image:linear-gradient(to right, red, gold, lightgreen, gold, red) 5;

}

a{
    text-decoration: none;
}

.myLi{
margin-bottom:5px;
}

.myLi:hover{
    margin-bottom:0px;
    border-bottom:5px solid;
    border-image:linear-gradient(to right, red, gold, lightgreen, gold, red) 5;
}

/*Middle Portion Animation*/
.bg{
    animation:slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, darkblue 50%, #09f 50%);
    bottom:0;
    left:-50%;
    opacity: .5;
    position:fixed;
    right:-50%;
    top:0;
    z-index: -1;
}
.bg2{
    animation-direction: alternate-reverse;
    animation-duration: 8s;
}
.bg3{
    animation-duration: 1s;
}





@keyframes slide{
    0%{
        transform: translate(-25%);

    }

    100%{
        transform: translate(25%);
    }
}


/*Text Animation*/
.neon{
    position: relative;
    overflow: hidden;
    filter:brightness(200%);
    width:420px;
    height:73%;
    text-align: center;  
}

.text {
    background:linear-gradient(to top, darkblue 0%, rgb(1, 1, 63) 100%);
    background:black;
    color:white;
    font-size: 75px;
    font-weight: bold;
    font-family: sans-serif;
    position:relative;
    user-select: none;
}

.text::before {
    content:attr(data-text);
    position:absolute;
    color:white;
    filter:blur(0.02em);
    mix-blend-mode: difference;
}

.gradient{
    position:absolute;
    background: linear-gradient(45deg, red, gold, lightgreen, gold, red);
    top:0;
    left:0;
    right:0;
    bottom:0;
    mix-blend-mode: multiply;
}


.spotlight{
    position:absolute;
    top:-100%;
    left:-100%;
    right:0;
    bottom:0;
    background:
        radial-gradient(circle, white, transparent 25%) center / 25% 25%,
        radial-gradient(circle, white, black 25%) center / 12.5% 12.5%;
        animation: light 5s linear infinite;
        mix-blend-mode: color-dodge;
        
}
@keyframes light{
    to{
        transform:translate(50%, 50%);
        
    }
}

@media (max-width:924px){
    .top .img img{width:90px;}
    .top .img2 img{width:90px;}

}
@media (max-width:770px){
    .loginAs{
        flex-direction:column;}
    .top .img img{width:85px;}
    .top .img2 img{width:85px;}

        .neon{
            width:392px;
            height:67.5%;}
            .text{
                font-size: 70px;}
}




@media (max-width:760px){
    .top .img img{width:74px;}
    .top .img2 img{width:74px;}
    .neon{
        width:308px;
        height:55%;}
    .text{
        font-size: 55px;} 
}



@media (max-width:526px){
    .top .img img{width:68px;}
    .top .img2 img{width:68px;}
    .neon{
        width:268.5px;
        height:46%;}
    .text{
        font-size: 48px;} 
}



@media (max-width:480px){
    .top .img img{width:48px;}
    .top .img2 img{width:48px;}
    .neon{
        width:213px;
        height:36%; 
    }
    .text{
        font-size: 38px;
    }

    .top {font-size: 20px;}
 

   .middle .settings{
        font-size:13px;
        line-height: 18px;
    }

    .top .title .subtitle{
        font-size:10px;
    }

    
}

@media (max-width:310px){
    .top .img img{width:40px;}
    .top .img2 img{width:40px;}
    .neon{
        width:202px;
        height:36%; 
    }
    .text{
        font-size: 36px;
    }
    .top {font-size: 15px;}

}

@media (max-width:280px){
    .top .img img{width:30px;}
    .top .img2 img{width:30px;}
    .top {font-size: 10px;}

    .neon{
        width:131px;
        height:55%; 
    }
    .text{
        font-size: 25px;
        font-weight: normal;
    }
    
    .loginAs li, .register li{
        font-size: 18px;}
    .top, .bottom{
        height:10vh;     
    }
    .middle{
        height:80vh;
    }
    .top .title .subtitle{
        font-size:8px;
    }


}





a{
    text-decoration: none;
}

.hearder{
    position:fixed;
    height:80px;
    width:100%;
    z-index:100;
    padding:0 20px;
}

.nav{
    max-width: 1100px;
    width:100%;
    margin:0 auto;
}


.nav,
.navItem{
    display:flex;
    height:100%;
    align-items: center;
    justify-content: space-between;

}
.navLogo{
    font-size: 25px;
}
.navItem{
    column-gap:25px;
}


.navLink:hover{
    color:#d9d9d9;
}

.navLink:hover{
    color:rgb(255, 240, 201);
}


form .settings{
    display:flex;
    flex-direction: row;
    gap:2rem;
}




@media (max-width:480px){
    form{
        width:100%;
    }

    form .settings{
    overflow-y:scroll;
    flex-direction: column;
    gap:0rem;

}

}