@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;1,300;1,600&display=swap');


body {
    font-family: 'Varela Round', tahoma;
    font-size: 17px;
    margin: 10px;
    
    /* Adding bootstrap broke the html color? */
    background-color: antiquewhite;
    color: navy;
}

h1 {
    font-family: 'Lily Script One', cursive;
    font-size: 333%;
}

a{
    text-decoration: none
}
a:link{
color: navy;
}
a:visited{
color: navy;
}
a:hover{
color: navy;
text-decoration: none;
}
a:active{
color: navy;
}

/* Vertical Navigation Bar */
nav{
    background-color: wheat;
    padding-top: 13px;
    padding-bottom: 1px;
}
nav ul {
    list-style-type: none;
    text-align: center;
}
nav li {
    display: inline;
}
nav a {
    text-decoration: none;
    padding: 10px;
}
nav a:link {
    color: navy;
}
nav a:visited {
    color: navy;
}
nav a:hover {
    color: blue;
    text-decoration: none;
}
nav a:active {
    color: peru ;
}

main {
    max-width: 1200px;
    margin: 20px auto;
}

h1 {
    text-align: center;
    color: black;
}

.home-hero {
    background-image: url(images/header.jpg);
    height: 475px;
    font-family: 'Lily Script One', cursive;
    background-size: cover;
    background-position: center;
    color: black;
    padding: 10px 10px 10px 30px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

blockquote {
    background-color: wheat;
    border-left: 11px solid peru;
    border-bottom: 8px solid peru;
    border-right: 3px solid peru;
    padding: 30px;
}

.email a {
    color: blue;
}
.email a:active {
    color: peru;
}

img {
    display: block;
    margin: 0 auto;
    padding-top: 30px;
    border-radius: 4px;
}

h4{
    text-align: center;
}

footer{
    text-align: center;
    border-top: 1px solid gray;
    padding: 10px;
}


/* font awesome */
.fa{
    color: wheat;
    background-color: peru;
    font-size: 4em;
    display: block;
    border-radius: 4px;
}
.fa:hover{
    color: #7a6fd9;
    background-color: #664260;
    transition: 0.3s;
}
.fa:active{
    color: blue;
    background-color: navy;
}

/* CSS for Tablets */
@media only screen and (max-width: 1024px) {
    h1 {
        font-size: 3em;
    }
}

/* CSS for Smartphones */
@media only screen and (max-width: 768px) {
    h1 {
        font-size: 2.5em;
    }
}