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

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

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

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

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

/*container for navbar*/
.topnav{
    background-color: #ffffff;
    padding: 20px;
    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;
}  

/*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 hover over button*/
.button:hover{
    background-color: #6b95de;
}

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

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

/*container to display the grid*/
.gridContainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-evenly;
    align-content: center;
    column-gap: 20px;
    row-gap: 100px;
}


/*tile sizing*/
#tile{
    max-height: 250px;
    padding: 0px;
}

/*background and general formating for content tile*/
.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;
    margin: 30px;
}

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

/*loading in 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;
}

/*fadeIn during time determined by .fadeIn*/
@keyframes fadeIn {
    from {opacity:0;} to {opacity:1;} 
}

/*upload title formatting*/
input[type=text]{
    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;
}

/*image formatting*/
img{
    max-width: 100%;
    height: auto;
    max-height: 50%;
}