*{ margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#page-wrapper{
    width: 80vw;
    margin: 0 auto;

}
#single {
    padding: 4%;
    margin: auto;
    align-content: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: calc(10px + 2vmin);
    font-weight: bold;

}

#page {
    padding: 0;
    background-color: white;
    width: 100%;
    margin: 0;
    align-content: flex-start;
    display: flex;


}


#box1 {
    width: 30%;
    height: 50vh;
    border: 5px solid white;
    background-image: url("src/1.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;

}

.text {

    opacity: 0;
    transition: opacity 2s;
    background-color: #AAB396;
    height: 100%;
    width: 100%;
    text-align: center;
    padding-top: 25%;
    font-family: cursive;
    font-size: calc(2px + 3vw);
    color: white;

}

#box1:hover {
    z-index: 3;
}

#box1:hover .text{
    opacity: 1;
}

#box2{
    left: 25%;
    width: 30%;
    height: 50vh;
    border: 5px solid white;
    top: 0;
    background-image: url("src/2.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;

}

.text {

    opacity: 0;
    transition: opacity 2s;
    background-color: #AAB396;
    height: 100%;
    width: 100%;
    text-align: center;
    padding-top: 25%;
    font-family: cursive;
    font-size: calc(2px + 3vw);
    color: white;

}

#box2:hover {
    z-index: 6;
}

#box2:hover .text {
    opacity: 1;
}

#box3{
    left: 50%;
    width: 30%;
    height: 50vh;
    border: 5px solid white;
    top: 0;
    background-image: url("src/3.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;

}

.text {

    opacity: 0;
    transition: opacity 2s;
    background-color: #AAB396;
    height: 100%;
    width: 100%;
    text-align: center;
    padding-top: 25%;
    font-family: cursive;
    font-size: calc(2px + 3vw);
    color: white;

}

#box3:hover {
    z-index: 9;
}

#box3:hover .text {
    opacity: 1;
}

#box4{
    left: 75%;
    width: 30%;
    height: 50vh;
    border: 5px solid white;
    top: 0;
    background-image: url("src/4.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;

}

.text {

    opacity: 0;
    transition: opacity 2s;
    background-color: #AAB396;
    height: 100%;
    width: 100%;
    text-align: center;
    padding-top: 25%;
    font-family: cursive;
    font-size: calc(2px + 3vw);
    color: white;

}

#box4:hover {
    z-index: 15;
}

#box4:hover .text {
    opacity: 1;
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

#title {
    display: flex;
    flex-direction: row;
    justify-content: left;

}

#logo-title {
    display: flex;
    flex-direction: row;
    justify-content: left;
    padding-left: 13%;

}

#logo{
    max-width: 90%;
    max-height: 100%;
    position: absolute;
    top: 30%;
    left: 2%;
}

#container{
    height: 60%;
}

button {
    border: 2px solid black;
    padding: 5px 10px;
    cursor: pointer;
}

#search-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

#search:hover {
    background-color: #68784e;
    background-image: url("src/search.png");
}
nav input:hover{
    background-color: white;
}

#home, #love, #grad, #convo, #friend, #car {
    text-align: center;
    background-color: transparent;
    transition: height 0.2s 0s linear;

}

#love {
    background-image: url("src/love.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#home {
    background-image: url("src/home.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#convo {
    background-image: url("src/conversation.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#grad {
    background-image: url("src/graduation.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#car {
    background-image: url("src/car.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#friend {
    background-image: url("src/relationship.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}
#home, #love, #convo, #grad, #car, #friend {
    width: 6vh;
    height: 6vh;

}

#love:hover,
#home:hover,
#convo:hover,
#grad:hover,
#car:hover,
#friend:hover {
    height: 13vh;
    width: 13vh;
    z-index: auto;

}

#love:active,
#house:active,
#convo:active,
#grad:active,
#car:active,
#relation:active {
    height: 13vh;
    width: 13vh;
    z-index: auto;
}

nav ul li:hover{
    background-color: #A8BD86;
}

#search {
    display: inline;
    background-image:url("src/search.png");
    justify-content: right;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 3.5vh;
    width: 3vw;
    background-color: #A8BD86;
}

header img{
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    max-width: 70%;
    max-height: 70%;
    left: 10%;
    top: 18%;
}
header{
    padding: 2%;
    background-color: #A0C878;
    position:relative

}

#steps {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 5%;
    left: 5%;
}

header h1 {
    font-size: calc(9vw);
    text-align: center;

}

header p{
    text-align: right;
    padding: 3%;
}

nav{
    background-color: #DDEB9D;
    border-top: 1px solid #718a4e;
    border-bottom: 1px solid #718a4e;
    align-content: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

nav ul{
    display: flex;
    padding: 0;
    list-style: none;
    align-items: center;
}

nav ul li{
    display: inline-block;
    padding: 1% 2% 1%;
    border-left: 1px solid #718a4e;
    align-items: center;
    justify-content: center;
}

nav a{
    text-decoration: none;
    color: black;
}


main{
    background-color: #edf7ed;
    color: black;
    padding: 5%;
    width: 100%;
    align-content: flex-start;
    align-items: center;
    flex-direction: column;
    display: block;
    height: 280vh;
    text-align: center;
    font-size: calc(2px + 1.5vw);
}

main h1{
    padding: 5%;}

footer{
    background-color: #A0C878;
    padding: 5%;
    font-size: calc(2px+ 1.5vw);
    margin:auto;
    align-items: center;
    text-align: center;
    justify-content: center;
}


@media (max-width: 900px) {

    nav {
        justify-content: center;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    nav ul li {
        padding: 8px;
        border-left: none;
        border-bottom: 1px solid #718a4e;
    }

    #home, #love, #convo, #grad, #car, #friend {
        width: 48px;
        height: 48px;
    }

    #search {
        width: 24px;
        height: 24px;
    }
}