style.css

body {
    margin: 0;
    padding: 0;
    font-family: 'Quattrocento Sans', sans-serif;
    
}

nav {
    font-size: larger;
    margin: auto;
    padding: 0 15px;
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.brand1 {
    
    font-family: 'Cherry Swash', cursive;
    color: tomato;
}
.brand2 {
    color: teal;
}

nav ul {
    width: 200px;
    display: flex;
    justify-content: space-between;
    list-style: none;
}

nav ul li a {
   text-decoration: none;
   color: cornflowerblue;
}

nav ul li a:hover {
    color:blueviolet;
    text-transform: uppercase;
 }

.active {
    background-color: aqua;
    padding: 3px;
}

.active:hover {
    background-color:darkseagreen ;
    color: blue;
    transition: all .5s ease-in-out;
}