#container {
    width: 100vw;
    height: 100vh;
    margin: 0;
    display: inline-block;
}

#signin{
    width:80vw;
    max-width: 500px;
    height: 400px;
    margin: 22vh auto;
    border-radius: 25px;
    box-shadow: 3px 3px 10px #000;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: rotateY(0deg);
}

#signin h1{
    width: 80%;
    height: 40px;
    margin: 30px 10%;
    text-align: center;
    color:#FFF;
}

#signin input{
    width: 80%;
    height: 40px;
    margin: 20px 10%;
    background: #000000bd;
    color:#f9f9f9;
    border-radius: 10px;
    box-shadow: none;
    border:none;
    text-align: center;
    opacity: 0;
}
#signin button{
    width: 80%;
    height: 40px;
    margin: 20px 10%;
    background: #FFF;
    color:#304e68;
    border-radius: 10px;
    box-shadow: none;
    border:none;
    text-align: center;
    opacity: 0;
}

#signin a{
    width: 25%;
    height: 40px;
    margin: 20px 12%;
    text-align: left;
    display: block;
    float: left;
    direction: ltr;
    font-size: 0.9em;
    color:#FFF;
    opacity: 0;
}











#signup{
    width: 80vw;
    max-width: 500px;
    height: 600px;
    margin: 20vh auto;
    border-radius: 25px;
    box-shadow: 3px 3px 10px #000;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    display: none;
}

#signup h1{
    width: 80%;
    height: 40px;
    margin: 30px 10%;
    text-align: center;
    color:#FFF;
}

#signup input{
    width: 80%;
    height: 40px;
    margin: 10px 10%;
    background: #000000bd;
    color:#f9f9f9;
    border-radius: 10px;
    box-shadow: none;
    border:none;
    text-align: center;
    opacity: 1;
}
#signup button{
    width: 80%;
    height: 40px;
    margin: 10px 10%;
    background: #FFF;
    color:#304e68;
    border-radius: 10px;
    box-shadow: none;
    border:none;
    text-align: center;
    opacity: 1;
}

#signup a{
    width: 25%;
    height: 40px;
    margin: 10px 12%;
    text-align: left;
    display: block;
    float: left;
    direction: ltr;
    font-size: 0.9em;
    color:#FFF;
    opacity: 1;
}










#forgotpass{
    width: 500px;
    height: 300px;
    margin: 20vh auto;
    border-radius: 25px;
    box-shadow: 3px 3px 10px #000;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    display: none;
}

#forgotpass h1{
    width: 80%;
    height: 40px;
    margin: 30px 10%;
    text-align: center;
    color:#FFF;
}

#forgotpass input{
    width: 80%;
    height: 40px;
    margin: 10px 10%;
    background: #000000bd;
    color:#f9f9f9;
    border-radius: 10px;
    box-shadow: none;
    border:none;
    text-align: center;
    opacity: 1;
}
#forgotpass button{
    width: 80%;
    height: 40px;
    margin: 10px 10%;
    background: #FFF;
    color:#304e68;
    border-radius: 10px;
    box-shadow: none;
    border:none;
    text-align: center;
    opacity: 1;
}

#forgotpass a{
    width: 25%;
    height: 40px;
    margin: 10px 12%;
    text-align: left;
    display: block;
    float: left;
    direction: ltr;
    font-size: 0.9em;
    color:#FFF;
    opacity: 1;
}











#confirm{
    width: 500px;
    height: 400px;
    margin: 20vh auto;
    border-radius: 25px;
    box-shadow: 3px 3px 10px #000;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    display: none;
}

#confirm h1{
    width: 80%;
    height: 40px;
    margin: 30px 10%;
    text-align: center;
    color:#FFF;
}

#confirm p{
    width: 80%;
    text-align: left;
    color:#FFF;
    font-size: 0.8em;
}

#confirm input{
    width: 80%;
    height: 40px;
    margin: 10px 10%;
    background: #000000bd;
    color:#f9f9f9;
    border-radius: 10px;
    box-shadow: none;
    border:none;
    text-align: center;
    opacity: 1;
}
#confirm button{
    width: 80%;
    height: 40px;
    margin: 10px 10%;
    background: #FFF;
    color:#304e68;
    border-radius: 10px;
    box-shadow: none;
    border:none;
    text-align: center;
    opacity: 1;
}

#confirm a{
    width: 25%;
    height: 40px;
    margin: 10px 12%;
    text-align: left;
    display: block;
    float: left;
    direction: ltr;
    font-size: 0.9em;
    color:#FFF;
    opacity: 1;
}