/* general.css -- Styling the index page elements
 * author: Kennedy O'Hanley
 */

 @font-face {
    font-family: playfair;
    src: url("fonts/PlayfairDisplay-Regular.ttf") format('truetype');
}

@font-face {
    font-family: gothic;
    src: url("fonts/GothicA1-Regular.ttf") format('truetype');
}

 body {
    background-color: #4F6D7A;
    font-family:gothic, 'Times New Roman', Times, serif;
}

#title {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

h1 {
    font-family:playfair, Times, serif;
    font-size: 3rem;
    
}

nav ul {
    list-style-type:none;
    display: flex;
    align-items:center;
    justify-content:space-around;
    border-top: .1rem solid white;
    border-bottom: .1rem solid white;
    font-weight:bolder;
    padding: 1rem; 

}

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

@media only screen and (max-width:480px) {

   nav ul {
        border-top: .1rem solid white;
        border-bottom: .1rem solid white;
       list-style-type:none;
       font-weight:bold;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       
  
   }
   nav li {
       text-align: right;
       margin: .25rem;
   }

   nav a {
       /* padding: 1rem ; */
       text-decoration: none; 
       color: gray;
   }
}