@import url('https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Hindi&display=swap');
:root{
    --bg-color:#ffd000;
    --txt-color:black;
    --aux-color:#ffff;
}
*{
    text-decoration: none;
    margin: 0;



}
#showPassword {
    cursor: pointer;
    font-size: 17px;
    padding: 5px;
    accent-color: black;
    position: absolute;
  }
  .formGroup {
    position: relative;
  }
a{
    cursor: pointer;
    color: black;
}
.errorStyle{
    border: 2px solid red;
    outline: none;
}
.noerrorStyle{
    border: 2px solid lime;
    outline: none;
}
.error {
    color: red;
    font-size: small;
}
.head{
    background: var(--txt-color);
    background-image: url("try1.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment:scroll;
    background-repeat: no-repeat;
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 17%;
    min-height: 250px;
    transition: all 2000ms ease-out;
}
.messages{
    background: #ffffffde;
    font-size: 33px;
    padding: 38px 0;
    mix-blend-mode: screen;
    color: black;
    border-radius: 15px;
}
.logo {
    margin-top: 10px;
    font-size: 40px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    font-weight: bold;
    padding: 50px 0;
    color: var(--aux-color);
    transition:  all 1000ms ease-in-out;

}
/*Animation for the car logo to move accross the screen*/
@keyframes movecar{
    0%{left: 5px;}
    10%{left: 20px;}
    30%{left: 30px;}
    40%{left: 40px;}
    50%{left: 50px;}
    60%{left: 70px;}
    70%{left: 90px;}
    79%{left: 110px;}
    85%{left: 130px;}
    95%{left: 140px;}
    100%{left: 45%;}
}
.logo i{
    animation-name: movecar;
    animation-delay: 5s;
    animation-iteration-count: 2;
    animation-duration: 2s;
    color: var(--bg-color);
    transition:  all 1000ms ease-in-out;
    position: absolute;
    left: 45%;
}
.head .logo span{
    color: var(--bg-color);
    position: relative;
    left: 66px;
}
.head .toggle-btn{
    position: absolute;
    width: 38px;
    height: 30px;
    top: 10px;
    left: 14px;
    z-index: 1;
    transition: all 200ms ease-in-out;
    mix-blend-mode: screen;
    border-radius:4px;
    cursor: pointer;
}
.head .toggle-btn span{
    position:absolute;
    width: 90%;
    height: 5px;
    background: var(--aux-color);
}
/*The toggle-btn code is used to bring in an "X" on the menu bar*/
.head .toggle-btn span:nth-child(1){
    top: 30%;
    transform: translateY(8px) rotate(45deg);
}
.head .toggle-btn span:nth-child(2){
    display: none;
}
.head .toggle-btn span:nth-child(3){
    top: 70%;
    transform: translateY(-5px) rotate(-42deg);
}
.head .navs{
    transform: translateY(-24%);
    display: flex;
    flex-direction: column;
    align-items:center;
    margin: 3%;
    transition: all 450ms ease-in-out;
    background:var(--bg-color);
    opacity: 90%;
    padding: 2% 0;
    z-index: 1;
}
.head .navs a{
    color: var(--aux-color);
    padding: 20px;
    font-size: 20px;
    border-bottom: 1px solid var(--aux-color);
    cursor: pointer;
}
.head .navs a:nth-child(4){
    margin-bottom: 2%;
}
.head .navs a:hover,
.head .navs a:active{
    background: var(--aux-color);
    color: var(--bg-color);
    border-radius: 10px;
    letter-spacing: .2rem;
    transition: all 550ms ease-in-out;
}
/*this is to take the navigations out of the screen as soon as the menu btn is clicked*/
.navs.lock{
    transform: translateY(-180%);

}
/*the .toggle-btn.close here is to bring three short horizontal lines on the menu bar*/
.toggle-btn.close span:nth-child(1){
    top: 10%;
    transform: translateY(0) rotate(0deg)
}
 .toggle-btn.close span:nth-child(2){
    display:flex;
    top: 45%;
    transform: translateY(0) rotate(0deg)
}
.toggle-btn.close span:nth-child(3){
    top:80%;
    transform: translateY(0) rotate(0deg)
}
.fes-section{
    padding-top: 77%;
    background: var(--bg-color);
    color: var(--aux-color);
}
.into-accnt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}
.out-accnt {
    font-size: 18px;
    padding: 11px;
    align-items: center;
}
form div {
    display: flex;
    flex-direction: column;
    width: 80%;
    padding: 13px;
    font-size: 20px;
}
/*form:has(input:not(:focus)) input{
   border:none;
}
form:has(input:focus) input{
    border:3px solid var( --aux-color);
 }*/
input{
    padding: 8px;
    border-radius: 8px;
    font-size: 18px;
}
.into-accnt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    font-size: 21px;
}
input[type="submit"] {
    background: green;
    color: var(--aux-color);
    font-weight: bolder;
    font-size: 91%;
    display: flex;
    justify-content: center;
    margin-left: 19px;
    transition: all 450ms ease-in;
    width: 27%;
}
input[type="submit"]:hover{
    background: rgb(6, 54, 6);
    transition: all 450ms ease-in;
}
/*MEDIA QUERRIES*/

@media screen and (max-width:320px) {
    .logo {
        margin-top: 10px;
        font-size: 31px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;
        margin-right: 25%;
        font-weight: bold;
        padding: 50px 0;
        color: var(--aux-color);
        transition:  all 1000ms ease-in-out;

    }
    .head .navs a {
    color: var(--aux-color);
    padding: 20px;
    font-size: 13px;
    border-bottom: 1px solid var(--aux-color);
    cursor: pointer;
    }
    .head .toggle-btn {
        position: absolute;
        width: 29px;
        height: 30px;
        top: 10px;
        left: 14px;
        z-index: 1;
        transition: all 200ms ease-in-out;
        mix-blend-mode: screen;
        border-radius: 4px;
        cursor: pointer;
    }
    .head {
        background: var(--txt-color);
        background-image: url(try1.jpg);
        -webkit-background-size: cover;
        background-size: cover;
        background-attachment: scroll;
        background-repeat: no-repeat;
        position: absolute;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 17%;
        min-height: 190px;
        transition: all 2000ms ease;
    }
    .into-accnt{
        font-size: 15px;
    }
    input {
        padding: 4px;
        border-radius: 8px;
        font-size: 10px;
      }
}
@media screen and (max-width:520px){
    .head{
        min-height: 200px;
    }
    .head .navs a {
        color: var(--aux-color);
        padding: 20px;
        font-size: 14px;
        border-bottom: 1px solid var(--aux-color);
        cursor: pointer;
        }
        .fes-section {
            padding-top: 63%;
        }
        .into-accnt{
            font-size: 16px;
        }
        .out-accnt {
            font-size: 14px;
            padding: 11px;
            align-items: center;
        }
        input {
            padding: 4px;
            border-radius: 8px;
            font-size: 13px;
        }
}
@media screen and (max-width: 779px) and (min-width: 480px){
    .logo{
        margin-top: 50px;
        font-size: 3.2rem;
    }
    .fes-section {
        padding-top: 48%;
    }
    .head .navs a {
        font-size: 15PX;
    }
    input {
        padding: 8px;
        border-radius: 8px;
        font-size: 14px;
        width: 80%;

    }
}
@media screen and (max-width: 780px) and (min-width: 624px){
    .head .navs a{
        font-size: 14px;
    }
    .logo{
        margin-top: 50px;
        font-size: 3.2rem;
    }
    .fes-section {
        padding-top: 38%;
    }
    input {
        padding: 8px;
        border-radius: 8px;
        font-size: 15px;
        width: 80%;
    }
}
@media screen and (min-width:700px) and (max-width:780px) {
    .head .toggle-btn{
        display: none;
    }
    .head .navs.lock{
        display: flex;
        flex-direction: row;
        position: relative;
        opacity: 90%;
        margin-right: -1%;
        background-color: var(--bg-color);
        top: -86%;
        padding: 2%;
        transform: translateY(0%);
    }
    .head .navs.lock a{
        font-size:14px;
        margin-left: 14px;
        margin-right: 2%;
        padding: 11px;
        gap: 0.5%;
    }
    .head .navs.lock a:nth-child(4){
        margin-bottom: 0%;
    }
    input {
        padding: 8px;
        border-radius: 8px;
        font-size: 15px;
        width: 80%;
    }
    .fes-section {
        padding-top: 38%;
    }
    form div{
        margin-left: 10%;
    }
}
@media screen and (min-width:781px) and (max-width:930px){
    .head .toggle-btn{
        display: none;
    }
    .head .navs.lock{
        display: flex;
        flex-direction: row;
        position: absolute;
        opacity: 90%;
        margin-right: 0%;
        gap: 0;
        right: 1%;
        top: -14%;
        padding: 2%;
        padding-right: 5%;
        transform: translateY(0%);
    }
    .head .navs.lock a{
        font-size:15px;
        margin-left: 14px;
        margin-right: 2%;
        padding: 11px;
        gap: 0%;
    }
    .head .navs.lock a:nth-child(4){
        margin-bottom: 0%;
    }
    .logo {
    margin-top:62px;
    font-size: 3.8rem;
    }
    .fes-section {
        padding-top: 33%;
    }
    input {
        padding: 9px;
        border-radius: 8px;
        font-size: 15px;
        width: 80%;
    }
    form div{
        margin-left: 10%;
    }
}
@media screen and (min-width:921px) and (max-width:1240px){
    .head .toggle-btn{
        display: none;
    }
    .head .navs.lock{
        display: flex;
        flex-direction: row;
        position: absolute;
        opacity: 90%;
        margin-right: 0%;
        gap: 0;
        right: 0%;
        top: -20%;
        padding: 2%;
        padding-right: 5%;
        transform: translateY(0%);
    }
    .head .navs.lock a{
        font-size:16px;
        margin-left: 14px;
        margin-right: 2%;
        padding: 11px;
        gap: 0%;
    }
    .head .navs.lock a:nth-child(4){
        margin-bottom: 0%;
    }
    .logo {
    margin-top:62px;
    font-size: 3.8rem;
    font-family: cursive;
    }
    .fes-section {
        padding-top: 33%;
    }
    input {
        padding: 10px;
        border-radius: 8px;
        font-size: 16px;
        width: 60%;
    }
    form div{
        margin-left: 10%;
    }
    .out-accnt {
        font-size: 18px;
        padding: 11px;
        align-items: center;
        text-align: center;
      }
}
@media screen and (min-width:1240px) and (max-width:2560px){
    .head .toggle-btn{
        display: none;
    }
    .head .navs.lock{
        display: flex;
        flex-direction: row;
        position: absolute;
        opacity: 90%;
        justify-content: end;
        margin-right: 0%;
        align-items: end;
        gap: 0;
        right: 5%;
        top: -31%;
        padding: 2%;
        padding-right: 5%;
        transform: translateY(0%);

    }
   .head .navs.lock a{
         font-size:16px;
           margin-left: 14px;;
           margin-right: 2%;
           padding: 22px;
           gap: 0%;
       }
    .head .navs.lock a:nth-child(4){
        margin-bottom: 0%;
    }
    .logo {
    margin-top:82px;
    font-size: 3.8rem;
    font-family: cursive;
    }
    .fes-section {
        padding-top: 22%;
    }
    input {
        padding: 10px;
        border-radius: 8px;
        font-size: 16px;
        width: 60%;
    }
    form div{
        margin-left: 10%;
    }
    .out-accnt {
        font-size: 18px;
        padding: 11px;
        align-items: center;
        text-align: center;
      }
}