* { box-sizing: border-box; }

body { background-color: #76A3B3; 
       background-image: linear-gradient(to top, #FFFFFF, #76A3B3) ; 
       background-repeat: no-repeat; }

h1 { font-family: Bradley Hand, Verdana, sans-serif;
     font-weight: bold;
     color: #000000;
     padding-top: 0.2em; 
     font-size: 250%;
     text-align: center;
     letter-spacing: 2px; }

p:first-letter {font-size: 1.3em;
                color: #6633FF; }

aside { font-weight: bold;
        font-size: 100%; 
        padding-bottom: 1em;
        padding-top: 1em;
        }

iframe { width: auto;
         height: auto;
        }

nav { text-align: center; 
      background-color: #DCDCDC;
      padding: 0;
      font-size: 120%; 
      font-family: Verdana, sans-serif; }
nav a { text-decoration: none;
        font-weight: bold;
        display: block; 
         } 

nav a:link { color: #A11572; }
nav a:visited { color: #6633FF; }
nav a:hover { color: #AA4DE8; }

li { list-style-type: none;
     border-bottom: 2px solid #27363B;
     }

nav ul {margin: 0; 
        padding-left: 0;
        }

.fleximg { max-width: 100%;
           height: auto;
           max-height: 20em;
           margin: auto; }

.aboutimg { max-width: 100%; 
            height: auto;
           }

#container { width: 85%; 
             margin-left: auto; margin-right: auto; 
             border: 2px solid #27363B;
             background-color: #FFFFFF;
             box-shadow: 5px 5px 5px #000000;
             }

.mainback {background-color: #76A3B3;
           margin: 0;}


#gallery { display: flex;
           flex-direction: row;
           flex-wrap: wrap;
           justify-content: space-around; }

header { background-color #FFFFFF;
         background-size: cover; 
         height: 5em;
         text-align: right;
         border-bottom: 2px solid #27363B;
         }

main { padding-left: 1em;
       font-family: Verdana, sans-serif; 
       border-left: 2px solid #27363B; 
       border-bottom: 2px solid #27363B; }

table { margin: auto;
        border: 3px ridge #000000;
        border-spacing: 0;
       }

td, th { border: 1px solid #000066; 
        }

.highlight { background-color: #DCDCDC; }

figure { border-bottom: 2px solid #27363B; 
         margin: 0; }


footer {background-color: #DCDCDC;
        padding: 1em; }


@media (min-width: 650px) { 
  nav ul { display: flex; 
           flex-flow: row nowrap;
           justify-content: space-around;
           border-bottom: 2px solid #27363B; }
  nav ul li { border-bottom: none; }
  #gridwrap { display: grid;
              grid-template-columns: 45% auto;
              grid-template-rows: auto auto auto auto; }
  header { grid-row: 1/2; grid-column: 1/3; height: 6.8em;}
  nav    { grid-row: 2/3; grid-column: 1/3;  }
  main   { grid-row: 3/4; grid-column: 1/2; }
  figure { grid-row: 3/4; grid-column: 2/3; }
  footer { grid-row: 4/5; grid-column: 1/3; }

}

@media (min-width: 1000px) {
  nav ul { display: flex;
           flex-direction: column;
           flex-wrap: nowrap;
           border-bottom: none;  }
  nav ul li {border-bottom: 2px solid #27363B; }
  #gridwrap { display: grid;
              grid-template-columns: 150px auto auto;
              grid-template-rows: auto auto auto; }
  header  { grid-row: 1/2; grid-column: 1/4; }
  nav     { grid-row: 2/3; grid-column: 1/2; }
  main    { grid-row: 2/3; grid-column: 2/3; }
  figure  { grid-row: 2/3; grid-column: 3/4; }
  footer  { grid-row: 3/4; grid-column: 1/4; }
}