.active {
     background-color: #e4e5f2;
}

body {
    background-color:#fcf4eb;
    margin-left: 50px;
    margin-right: 50px;
}

header h1 {
    background-color: #e4e5f2;
    font-family: "reenie-beanie", sans-serif;
    font-size: 90px;
    color: #62b5aa;
    line-height: 100px;
    text-align: center;
}

header h2 { 
    font-family: "quicksand", sans-serif;
    font-size: 50px;
    color: #7d7d80;
    text-align: center;
}

img {
    width: 75%;
    height: 75%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    
}

p {
    color: #959596;
    font-family: "eb-garamond", serif;
    font-size: 30px;
    line-height: 40px;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
}

li { 
    display: inline;
    text-align: center;
}

li a {
    color: #7d7d80;
    text-align: center;
    text-decoration: none;
    padding: 10px;
    
}

li a:hover {
    background-color: #e4e5f2;
    padding: 15px;
}

ul {
    background-color: #faecdc;
    font-size: 25px;
    font-family: "quicksand", sans-serif;
    list-style-type: none;
    margin: 5px;
    padding: 10px;
    overflow: hidden;
    text-align: center;
}

@media screen and (max-width: 568px) {
    body {
        font-size: 10vw;
        margin-left: auto;
        margin-right: auto;
        min-width: 100px;
        max-width: 500px;
        width:90%;
    }
    header h1{
        background-size: 685px;
        font-size: 100px;
        padding-left: 5px;
        text-align: center;
    }
    p {
        font-size: 7vw;
    }
    li a {
        padding: 1px; 
    }
    
    li a:hover {
        padding: 5px;
    }
    ul {
        font-size: 7vw;
    }