@font-face {
    font-family: "fonty";
    src: url("./assets/Lobster_Two/LobsterTwo-Regular.ttf");
}
@font-face {
    font-family: "robo";
    src: url("./assets/fonts/Roboto-Regular.ttf");
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.body{
    height: 100vh;
    width: 100%;
    background: linear-gradient(rgba(0,0,0,0.6)),url(./assets/glossy-abstract-2560x1080-9602.jpg);
    /* background-position: center;
    background-size: cover;  */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: animate 30s ease infinite;

}

@keyframes animate {
    0%{
        background-position: 0%;
    }
    50%{
        background-position: 50%;
    } 
    100%{
        background-position: 0%;

    }   
}













.card{
    /* height: 300px; */
    /* width: 30%; */
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    color: transparent;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    padding: 40px;
}
.card > h1{
    color: rgb(247, 248, 250);
    font-family: "robo";
    font-weight: 900;
    font-size: 50px;
    text-transform: uppercase;
}
/* .logo{
     display: flex;
    justify-content: center;
    align-items: center; 
    height: 100px;
    width: 50%;
    background: url(./assets/birds-eye-logo-vector-design-illustrati-Graphics-14672608-1-1-312x208.jpg);
    background-size: 300px;
    background-position: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 45px;
    border-bottom-right-radius: 45px;

} */





.card > input{
    height: 40px;
    width: 100%;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    outline: none;
    padding: 10px;
    color: rgb(255, 255, 255);
}
.checky {
    color: rgb(156, 156, 156);
    font-family: "fonty";
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.checky > a{
    color: rgb(197, 188, 188);
}
.card > button{
    height: 50px;
    width: 100%;
    color: white;
    background-color: rgb(3, 3, 68);
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    outline: none;
    /* border: none; */
    font-family: "fonty";
    font-size: 20px;
}

.card > button:hover{
    background-color: navy;
    box-shadow: rgb(137, 137, 196) 1px 1px 10px 5px;
}
.card > button:active{
    transform: scale(0.9);
}
.Createacc{
    color: rgb(216, 207, 207);

}
.Createacc > a{
    color: rgb(226, 216, 216);
}
.error{
    color: red;
}

.another{
    height: 100vh;
    width: 100%;
    background: linear-gradient(rgb(0,0,0,0.7), rgb(0,0,0,0.7)), url(./assets/Pictures-abstract-color-waves.jpg);
    background-size: cover;
    /* display: none; */

}
.nay{
    background-color: black;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
}
.nay > ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
/* .nay > ul >li{
    display: inline;
} */
.nay > ul > li > a{
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    /* display: block; */
}
.nay > ul > li > a:hover{
background-color: seagreen;
transition: 1s;

}
.content{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
    border: groove;
    text-transform: uppercase;
    color: white;
    font-size: 50px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    display: none;
}
.hidden{
    display: none;
}






























@media  screen and (max-width: 240px) {
    .body{
        padding: 15px;
        width: 100%;
        height: auto;
    }
    .card{
        padding: 30px;
        gap: 15px;
    }
    .card > h1{
        padding-top: 30px;
    }
    .checky{
        display: flex;
        flex-direction: column;
        gap: 3px;
    
    }
}










@media  screen and (max-width: 320px) {
    .card{
        width: 295px;
    }
    
}
@media  screen and (max-width: 320px) {
    .Createacc{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
}
@media  screen and (max-width: 623px) {
    .card{
        height: 385px;
    }
 
}
@media  screen and (max-width: 768px) {
    .card{
        height: 400px;
    }
    
}
@media  screen and (max-width: 1024px) {
    .card{
        height: 400px;
    }
    
}
@media  screen and (max-width: 1440px) {
    .card{
        height: 395px;
    }
    
}




@media screen and (max-width: 320px) {
    .nay{
        padding: 0;
    }
    
}
@media screen and (max-width: 240px) {
    .another{
        /* padding: 0; */
        width: 240px;
        height: 400px;
    }
    .nay{
        padding: 1px;
        display: flex;
    }
    .nay > ul {
        width: 50px;
        gap: 16px;
        padding: 5px;
    }
    .nay >  ul > li{
        width: 52px;
    
    }
    .nay >  ul > li > a{
        padding: 0;
        display: flex;
    
    }
}