@import url('https://fonts.googleapis.com/css?family=Poppins');

/*help from https://codepen.io/danzawadzki/pen/EgqKRr*/

/*Generic css*/
html{
    background-color: #77a6f7;
}
body{
    text-align: center;
    font-family:"Poppins", sans-serif;  
}


h1 {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    display:inline-block;
    margin: 40px 8px 10px 8px; 
    color: #ffffff;
}

h1.active{
    color: #000000;
    border-bottom: 2px solid #77a6f7;
}

h2{
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    display:inline-block;
    margin:10px 8px 10px 8px; 
    color: #000000;
}

/*container to center content*/
.container{
    text-align: center;
    display: inline-block;
}

/*page as background and general formatting for content*/
.page{
    display: flex;
    align-items: center;
    flex-direction: column; 
    justify-content: center;
    min-height: 100%;
    border-radius: 10px 10px 10px 10px;
    background: #ffffff;
    padding: 30px;
    width: 90%;
    max-width: 450px;
    position: relative;
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    text-align: center;
}

/*nav bar*/
ul{
    list-style-type: none;
    overflow: hidden;
    text-align: center;
    display: flex;
    justify-content: space-between;
    padding-left: 10%;
    padding-right: 10%;
}

/*container for navbar*/
.topnav{
    background-color: #ffffff;
    padding: 30px;
    margin: 20px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    
}

/*nav bar specifics*/
a{
    text-decoration: none;
    font-size: 20px;
    color: #000000;
}

.topnav a:hover{
    background-color: #d3e3fc;
}

.topnav a.active{
    background-color: #00887a;
}  


a.inactive{
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    display:inline-block;
    margin: 40px 8px 10px 8px; 
    color: #d3e3fc;
    text-decoration: none;
    border-bottom: 2px solid #d3e3fc;
}   

/*logo*/
#icon{
    width: 60%;
    max-width: 100px;
}

/*form specifics*/
input[type=submit]{
    background-color: #77a6f7;
    color: #ffffff;
    padding: 15px 80px;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    border-radius: 5px 5px 5px 5px;
    border: none;
    margin: 20px 20px 40px 20px;
    transition: all 0.3s ease-in-out;
}

input[type=submit]:hover{
    background-color: #6b95de;
}

input[type=submit]:active{
    transform: scale(0.95);
}

input[type=text], input[type=password]{
    background-color: #d3e3fc;
    border: none;
    color: #000000;
    padding: 15px 32px;
    display: inline-block;
    font-size: 16px;
    margin: 5px;
    width: 85%;
    border: 2px solid #d3e3fc;
    transition: all 0.5s ease-in-out;
    border-radius: 5px 5px 5px 5px;
}

input[type=text]:placeholder input[type=password]:placeholder{
    color: #ffffff;
  }

input[type=text]:focus, input[type=password]:focus {
    background-color: #ffffff;
    border-bottom: 2px solid #77a6f7;
} 

/*loading in fade*/
.fadeIn {
    opacity:0;
    animation:fadeIn ease-in 1;
    animation-fill-mode:forwards;
    animation-duration:1s;
}

/*fade order*/
.fadeIn.first {
    animation-delay: 0.4s;
}
  
.fadeIn.second {
    animation-delay: 0.6s;
}
  
.fadeIn.third {
    animation-delay: 0.8s;
}
  
.fadeIn.fourth {
    animation-delay: 1s;
}

/*fade in during the duration defined in .fadeIn*/
@keyframes fadeIn {
    from {opacity:0;} to {opacity:1;} 
}

/*inactive hover sign up and sign in*/
.underlineHover:hover {
    color: #000000;
    border-bottom: 2px solid #77a6f7;
}
  
/*generic button for site*/
.button{
    background-color: #77a6f7;
    color: #ffffff;
    padding: 15px 80px;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    border-radius: 5px 5px 5px 5px;
    border: none;
    margin: 20px 20px 40px 20px;
    transition: all 0.3s ease-in-out;
}

/*cursor over button*/
.button:hover{
    background-color: #6b95de;
}

/*button clicked*/
.button:active{
    transform: scale(0.95);
}