@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    font-family:'Poppins';
}

body{
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* nav bar design */
.top-nav{
    background-color: #0c477f;
    position: fixed;
    width: 100%;
    z-index: 800;
}

nav{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
	flex-wrap:wrap;
    margin-top: 20px;
}



.title{
    font-size:2.0Vmax;
    font-weight: 500;
    color: white;
    flex:1;
    width: 80%;
    text-align: center;
    padding: 10px;
}

.logout{
    flex:.2;
    align-items: center;
    margin-top: 16px;
}
.fixed-bottom{
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    background-color: #0c477f;
}


.card-head{
    background-color: #0c477f;
}

.card-head h5{
    font-size: 3Vmin;
}

.signup{
    width: 70%;
    position: relative;
    top:180px;
    height: 100%;
}

.form-input{
    width: 100%;
    padding: 8px 16px;
    display: flex;
    flex-direction: row;
}

.input-areas{
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    margin-top: 20px;
}

#label-name{
    font-size: 1.1em;
    flex: 1;
    font-weight: 600;
}
.show-message{
    width:100%;
    background-color: rgba(62, 226, 62, 0.45);
    text-align: center;
    padding: 8px;
    letter-spacing: .75px;
}

.input-content{
    flex: 2;
}

.btns{
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    justify-content: center;
    column-gap: 40px;
}


.my-btn{
    width:30%;
    text-align: center;
    border: none;
    background-color: #0c477f;
    color: white;
    padding: 8px;
    border-radius: 4px;
    font-size: 2.2Vmin;
    font-weight: 600;
    transition: .3s;
    letter-spacing: .7px;
    margin-top: 10px;
}

.my-btn:hover{
    transform: scale(1.1);
    cursor: pointer;
}


/* HTML: <div class="loader"></div> */
.loader {
    width: 80px;
    aspect-ratio: 1;
    display: grid;
    border-radius: 50%;
    background:linear-gradient(0deg ,rgb(0 0 0/50%) 30%,#0000 0 70%,rgb(0 0 0/100%) 0) 50%/8% 100%,
      linear-gradient(90deg,rgb(0 0 0/25%) 30%,#0000 0 70%,rgb(0 0 0/75% ) 0) 50%/100% 8%;
    background-repeat: no-repeat;
    animation: l23 1s infinite steps(12);
    position: absolute;
    left: 50%;
    top: 35%;
    z-index: 1000;
}
.loader::before,
.loader::after {
    content: "";
    grid-area: 1/1;
    border-radius: 50%;
    background: inherit;
    opacity: 0.915;
    transform: rotate(30deg);
}
.loader::after {
     opacity: 0.83;
     transform: rotate(60deg);
}

@keyframes l23 {
    100% {transform: rotate(1turn)}
}


/* Media Query */
@media screen and (max-width:800px){
    /* .title{
        display: none;
    } */
    .new-img{
		width:40px;
    }
    nav{
        padding: 10px;
        column-gap: 10px;
		flex-wrap:wrap;
    }
    .signup{
        width: 90%;
        top:250px;
    }
    .input-areas{
        flex-direction: column;
    }
}

@media screen and (max-width:500px) {
    .logout{
        display: none;
    }
    .my-btn{
        font-size: 1.3Vmax;
    }
    .main-area{
        top:170px;
    }
 .new-img{
		width:40px;
    }
   nav{
    
		flex-wrap:wrap;
    }	
    .btns{
        flex-direction: column;
    }
    .my-btn{
        width: 100%;
    }
 
}

@media screen and (min-height:1100px) {
    .signup{
        top:280px;
    }
    
}