.nav ul{
   list-style:none;
   background: #202020;
   text-align: center;
   padding:0;
   margin:0;
  }
     
.nav li {
    display:inline-block;
}

.nav a{
    text-decoration:none;
    color:#fff;
    width:100px;
    display:block;
    padding:10px;
    font-size:17px;
    font-family:Helvetica;
}

.nav a:hover{
    background:#9DA0A7;
    transition: 0.4s;
}

.nav a:active { 
    background-color: gray;
}

body
{
background-color:#303030
}

.top {
    margin: auto;
    text-align: center;
    background:#303030;
}

 
.banner {
    max-width: 700px;
    margin: auto;
    text-align: left;
    background:#303030;
    font-family:Garamond;
    font-size:3vw;
    color:white;
}

.center {
    max-width: 700px;
    margin: auto;
    text-align: center;
    background-image: url("/images/Background1.jpg");
    font-family:Helvetica;
    font-size:1.5vw;
    color: white;
}

@media only screen and (max-width: 768px) {
    /* For mobile: */
    .banner {
    max-width: 700px;
    margin: auto;
    text-align: center;
    background:#303030;
    font-family:Garamond;
    font-size:10vw;
    color:white;
    }
    
    .center {
    max-width: 700px;
    margin: auto;
    text-align: center;
    /*background:#294187 ;*/
     background-image: url("/images/Background1.jpg");
    font-family:Helvetica;
    font-size:5vw;
    color: white;
}
}


.bottom {
    margin: auto;
    text-align: center;
    background:#303030;
    font-family:Helvetica;
    font-size:1vw;
    color:white;
}


/* unvisited link */
a:link {
    color: white;
}

/* visited link */
a:visited {
    color: gray;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}