/*Claire's CSS*/
*{
    margin: 0;
    box-sizing: border-box;
}
#page-wrapper{
    width: 80vw;
    margin: auto;
    text-align: center;
}
header{
    padding: 2%;
    position: relative;
}
#logo{
    max-width: 90%;
    max-height: 100%;
    position: absolute;
    top: 30%;
    left: 2%;
}
#title{
    display: flex;
    flex-direction: row;
    justify-content: left;
}
#logo-title{
    display: flex;
    flex-direction: row;
    justify-content: left;
    padding-left: 13%;
}
header h1{
    text-align: left;
    font: bold calc(2px + 4vw) "Roboto Condensed", sans-serif;
}
header p{
    font: normal 400 calc(2px + 1.5vw) "Roboto Condensed", sans-serif;
    text-align: center;
    padding-top: 8%;
}

/*nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1% 3%
}*/

#search{
    display: flex;
    align-items: center;
    padding: 1.5% 20% 1% 4%;
}
nav input{
    font: normal 400 calc(2px + 1vw) "Roboto Condensed", sans-serif;
    height: 4vh;
    background-color: rgba(255, 255, 255, 0.7);
    border: 2px solid #babfb2;
}
nav button{
    font: normal 400 calc(2px + 1vw) "Roboto Condensed", sans-serif;
}
nav #search a{
    color: rgba(255, 255, 255, 0);
}
#search-button{
    height: 4vh;
    width: 3vw;
    border: 2px solid #627346;
    border-radius: 10%;
    background-image: url("src/wide-search.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #a8bd86;
}
nav{
    border-top: 1px solid #718a4e;
    border-bottom: 1px solid #718a4e;
}
nav ul{
    list-style-type: none;
    padding: 0;
    display: flex;
    align-items: center;
}
nav ul li{
    display: inline-block;
    padding: 1% 2% 1%;
    border-left: 1px solid #718a4e;
}

#first-button{
    margin-left: 20%;
}
nav a{
    text-decoration: none;
    color: rgba(255, 255, 255, 0);
    font: normal 400 calc(2px + 1vw) "Roboto Condensed", sans-serif;
}
#home, #date, #convo, #student, #drive, #friend{
    width: 3vw;
    height: 5vh;
    text-align: center;
    background-color: transparent;
    transition: height 0.2s 0s linear;
}
#home{
    background-image: url("src/home-icon.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#date{
    background-image: url("src/heart-button.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#convo {
    background-image: url("src/convo-icon.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#student {
    background-image: url("src/school-icon.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#drive {
    background-image: url("src/car-icon.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#friend {
    background-image: url("src/friend-icon.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
nav p{
    opacity: 0;
}

main{
    padding: 2% 10% 5%;
    height: 170vh;
}
#first-line{
    text-align: center;
    padding-bottom: 5%;
}
main img{
    max-width: 60%;
    padding: 2%;
}
#disclaimer{
    background-image: url("src/disclaimer-button.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: transparent;
    background-color: transparent;
    height: 6vh;
    width: 4vw;
    position: fixed;
    left: 85%;
    z-index: 1;
}
main h1{
    padding: 2%;
    font: bold calc(2px + 2vw) "Roboto Condensed", sans-serif;
}
main h3{
    padding: 2%;
    font: bold calc(2px + 1.7vw) "Roboto Condensed", sans-serif;
}
main h4{
    padding-bottom: 1%;
    font: normal 400 calc(2px + 1.5vw) "Roboto Condensed", sans-serif;
}
main p{
    padding: 1%;
    text-align: left;
    font: normal 400 calc(2px + 1vw) "Roboto Condensed", sans-serif;
}
main li{
    text-align: left;
    padding: 1%;
    font: normal 400 calc(2px + 1vw) "Roboto Condensed", sans-serif;
}
#one, #two, #three, #four, #five, #six{
    background-color: rgba(255, 255, 255, 0.7);
    margin: auto;
    width: 60vw;
    padding: 5% 10%;
    height: 130vh;
    position: absolute;
    left: 20%;
}
#one{
    z-index: 6;
    visibility: visible;
}
#two{
    z-index: 5;
    visibility: hidden;
}
#three{
    z-index: 4;
    visibility: hidden;
}
#four{
    z-index: 3;
    visibility: hidden;
}
#five{
    z-index: 2;
    visibility: hidden;
}
#six{
    z-index: 1;
    visibility: hidden;
}
#disclaim{
    position: fixed;
    z-index: 9;
    left: 30vw;
    top: 25vh;
    margin: 0;
    width: 40vw;
    height: 50vh;
    background-color: #ffef85;
    border: solid 2px #9A9483;
    display: none;
}
#disclaim-1{
    font-size: calc(2px + 4vw);
    padding: 5% 0 4%;
}
.disclaim-text{
    font-size: calc(2px + 1.5vw);
    padding: 1% 5%;
}

#close{
    font-size: calc(2px + 2vw);
    position: absolute;
    z-index: 10;
    top: 0.5vh;
    left: 37vw;
    border: none;
    color: #6b611e;
    background-color: transparent;
}
#moving-buttons{
    margin: auto;
    z-index: 10;
    top: 179.2vh;
    left: 16.6vw;
    background-color: #7b9971;
}
#moving-buttons button{
    font: normal calc(2px + 1.5vw) "Roboto Condensed", sans-serif;

}
#next{
    position: absolute;
    left: 81vw;
    top: 178vh;
    background-color: #b1e09f;
    border: solid 2px #2a3b24;
    color: #2a3b24;
}

#prev{
    position: absolute;
    left: 12vw;
    top: 178vh;
    background-color: #b1e09f;
    border: solid 2px #2a3b24;
    color: #2a3b24;
}
/*#decor{*/
/*    z-index: 9;*/
/*    position: fixed;*/
/*    top: 169vh;*/
/*    left: 29.5vw;*/
/*    padding: 0.5% 30% 0.5% 2%;*/
/*    background-color: rgba(255, 255, 255, 0.7);*/
/*    border: 2px solid rgba(224, 227, 218, 1);*/
/*}*/
/*#decor-back{*/
/*    background-color: #DDEB9D;*/
/*    padding: 3% 49.7% 1% 11%;*/
/*    position: fixed;*/
/*    top: 168vh;*/
/*    left: 19.8vw;*/
/*    z-index: 8;*/
/*}*/
footer{
    padding: 2%;
    font: normal 400 calc(2px + 1vw) "Roboto Condensed", sans-serif;
}
footer a{
    color: black;
}
#search-button:hover{
    background-color: #68784e;
    background-image: url(src/search-white.png);
}
nav input:hover{
    background-color: white;
}
#home:hover, #date:hover, #convo:hover, #student:hover, #drive:hover, #friend:hover{
    height: 6vh;
    width: 4vw;
}
#home:active, #date:active, #convo:active, #student:active, #drive:active, #friend:active{
    height: 6vh;
    width: 4vw;
}
nav ul li:hover{
    background-color: #a8bd86;
}
nav ul li:active{
    background-color: #a8bd86;
}
#search:hover{
    background-color: transparent;
}
#disclaimer:hover{
    background-color: #A7C1A8;
    height: 7vh;
    width: 5vw;
    left: 83%;
}
#next:hover, #prev:hover{
    background-color: #2a3b24;
    color: white;
}
#close:hover{
    background-color: red;
    color: white;

}

/*colors down here*/
header, footer{
    background-color: #A0C878;
}
nav{
    background-color: #DDEB9D;
}
main{
    background-color: #edf7ed;
}

@media screen and (max-width: 1000px){
    #home, #date, #convo, #student, #drive, #friend{
        width: 4.5vw;
        height: 4vh;
    }
    #first-button{
        margin-left: 10%;
    }
    #logo{
        max-width: 50%;
        top: 5%;
    }
    #title{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    header h1{
        padding: 5% 0 0 30%;
        font-size: calc(2px + 4vw);
    }
    header p{
        font-size: calc(2px + 2vw);
        padding: 3%;
    }
    main{
        height: 140vh;
    }
    main h1{
        font-size: calc(2px + 3vw);
    }
    main h3{
        font-size: calc(2px + 2.5vw);
    }
    main h4{
        font-size: calc(2px + 2vw);
    }
    main img{
        padding: 5%;
        max-width: 85%;
    }
    main p{
        font-size: calc(2px + 1.5vw);
    }
    main li{
        font-size: calc(2px + 1.5vw);
    }
    footer{
        font-size: calc(2px + 1.5vw);
    }
    #prev{
        left: 11vw;
        top: 150vh;
    }
    #next{
        top: 150vh;
    }
    #one, #two, #three, #four, #five, #six{
        height: 110vh;
    }
}
@media screen and (max-width: 750px){
    header h1{
        font-size: calc(2px + 6vw);
        padding-left: 30%;
    }
    #logo{
        max-width: 50%;
        top: 5%;
    }
    #title{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #logo-title{
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 3% 25% 2% 0;
    }
    header p{
        font-size: calc(2px + 2vw);
        padding: 1% 0;
    }
    #home, #date, #convo, #student, #drive, #friend{
        width: 4vw;
        height: 3vh;
    }
    #search-button{
        height: 4vh;
        width: 5vw;
    }
    #search{
        padding-right: 5%;
    }
    #first-button{
        margin-left: 5%;
    }
    nav input{
        padding: 2% 0;
        width: 15vw;
        font-size: calc(2px + 1.5vw);
    }
    #disclaimer{
        height: 4vh;
        width: 6vw;
        left: 83%;
    }
    #disclaim{
        height: 35vh;
        width: 41vw;
    }
    #disclaim p{
        font-size: calc(2px + 2vw);
    }
    #disclaim li{
        font-size: calc(2px + 2vw);
    }
    #one, #two, #three, #four, #five, #six{
        height: 100vh;
    }
    main{
        height: 130vh;
    }
    main img{
        max-width: 60%;
    }
    main h1{
        font-size: calc(2px + 3.5vw);
    }
    main h3{
        font-size: calc(2px + 3vw);
        padding-top: 5%;
    }
    main h4{
        font-size: calc(2px + 2.5vw);
    }
    main p, main li{
        font-size: calc(2px + 2vw);
    }
    #next{
        top: 140vh;
    }
    #prev{
        top: 140vh;
        left: 10vw;
    }
    footer{
        font-size: calc(2px + 2vw);
    }
    #home:hover, #date:hover, #convo:hover, #student:hover, #drive:hover, #friend:hover{
        height: 5vh;
        width: 6vw;
    }
    #disclaimer:hover{
        height: 5vh;
        width: 7vw;
        left: 81%;
    }

}