.feedback{
    background-color: pink;
    padding:14px 4px;
    text-align: center;
    border-radius: 4px;
    display: none;
}
.hider{
    display: none;
}
/*li{
    list-style-type:none;
}
.icon{
    filter:invert(100%) sepia(0%) saturate(7444%) hue-rotate(268deg) brightness(109%) contrast(97%);
}
*/
*{
    font-family: sans-serif;
}
.overall-container{
    display:flex;
    justify-content:center;
    align-items: center;
    padding: 25px 0;
    min-height: 95vh;

}
.login-card h2 ,.signup-card h2{
    text-align: center;
}
/*@keyframes iconRotate{
    from{
        rotate: 0deg;
    }
    to{
        rotate:360deg;
    }
}*/
.login-card h2 img,.signup-card h2 img{
     width:70px;
}
.signup-card{
    box-shadow: 1px 1px 8px 3px rgba(0, 0, 0, 0.186);
    border-radius: 8px;
    width:fit-content;
    height:fit-content;
    padding:15px 20px;
}
.login-card{
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.186);
    border-radius: 8px;
    padding:15px 20px;
    width:40%;
}
.signup-card form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
       "f s"
       "e e"
       "ph ph"
       "pas pas"
       "pas2 pas2"
       "pro pro"
       "subm subm"
    ;
    column-gap: 20px;
    row-gap: 11px;
}
.login-card form{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 20px;
    row-gap: 11px;
}
.signup-card > form > div > label > input,.signup-card > form > div > input,.login-card > form > div > label > input,.login-card > form > div > input{
    font-size: 1.2em;
    width: 100%;
    padding: 6px 2px;
    box-sizing: border-box;
} 
.signup-card > form > div > input,.login-card > form > div > input{
   background-color:#1cb555;
   border: none;
    color:white;
    padding:10px 0;
    border-radius: 5px;
    transition:1s all;
}
.signup-card > form > div > input:hover,.login-card > form > div > input:hover{
    background-color: rgba(0, 0, 0, 0.77);
}
.input-label{
    font-size: 1.2em;
    margin: 10px 0;
}
.signup-card form div:first-child{
    grid-area: f;
}
.signup-card form div:nth-child(2){
    grid-area: s;
}
.signup-card form div:nth-child(3){
    grid-area: e;
}
.signup-card form div:nth-child(4){
    grid-area: ph;
}
.signup-card form div:nth-child(5){
    grid-area: pas;
}
.signup-card form div:nth-child(6){
    grid-area: pas2;
}
.signup-card form div:nth-child(7){
    grid-area: pro;
}
.signup-card form div:nth-child(8){
    grid-area: subm;
}
.signup-card form div{
    width: 100%;
}
.opt{
    text-align: center;
    margin: 15px 0;
}
.opt a{
    color: #1cb555;
}
@media screen and (max-width:767px) {
    .login-card,.signup-card{
        width: 100%;
        box-shadow: 1px 1px 8px 3px white;
    }
    
}