body {
    background: #f7f7f7;
    color: #000000;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 300;
}
section, header {
    width: 80%;
    max-width: 800px;
    margin: auto;
    margin-bottom: 5rem;
}

header h1, h2, blockquote {
    font-family: "Merriweather", serif;
    color: cadetblue;
}

header h1 {
    font-size: 5rem;
    line-height: 1;
     color: rgb(207, 5, 106);
     margin: 0rem 0 0rem 0;
}

h2 {
    font-size: 1.8rem;
}
header h2 {
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 300;
    color: rgb(53, 93, 146);
    font-style: oblique;
    margin-bottom: 4rem;
}

header h4 {
    font-size: 5rem;
    line-height: 1;
     color: rgb(75, 121, 180);
     margin: 0rem 0 0rem 0;
}


p{
    line-height: 1.6;
}

e{
margin: 4rem 0 2rem 0;
 }

blockquote {
    line-height: 1.6;
    font-style: italic;
    font-size: 1.562rem;
    hanging-punctuation: first;
    text-indent: -0.6rem;
}

hr {
    margin: 3rem 0 5rem 0;
}

/*-- Styling links --*/
a {
    color: rgb(255, 255, 255);
    text-decoration: none;
   }

a:hover {
    color: rgb(64, 124, 126);
}
/*-- navigation --*/
.responsivenav {
    background: cadetblue;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


#logo {
    font-size: 2rem;
    color: rgb(255, 255, 255);
    font-family: 'Merriweather', serif;
    font-weight: 700;
    padding-left: 35px;
}

/*-- Adding responsive element to images --*/
.gridimage {
    display: grid;
    column-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}


nav {
    display: inline;
}


nav ul {
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 1px;
    list-style-type: none;
    padding-right: 70px;
}

nav ul li {
    display: inline;
    margin: 5px;
}

nav a {
    border-bottom: none;
    color: #f7f7f7;
    padding: 10px;
}

nav a:hover {
    color: rgb(64, 124, 126);
    transition: all 0.3s ease-in-out; 
}

h1 {
    font-size: 1.562rem;
    font-family: "Merriweather", serif;
    color: rgb(75, 121, 180);
}


/*--  Styling Footer  --*/
footer {
    background-color: rgb(95, 158, 160);
    color: #ffffff;
    text-align: center;
    font-size: 0.8rem;
    padding: 4rem 0;
}
.light {
    background-color: rgb(252, 255, 255);
    padding: 3rem 0;
}

footer a {
    color: rgb(255, 255, 255);
}
footer a:hover {
      color: rgb(64, 124, 126);
}


/*-- Adding media queries for different devices --*/ 
@media (max-width: 600px) {}
header h1 {
    font-size: 4rem;
}

.gridimage {
    row-gap: 10px;
}
img {
    width: 100%;
    height: auto;
}