* { 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; }
form { display: grid;
       grid-template-columns: 12em auto;
       grid-template-rows: auto;
       width: 60%;
       grid-gap: 1em; gap 0.5em; 
       padding: 2em; }

aside { font-weight: bold;
        font-size: 120%; 
        padding: 2em; }

iframe { width: auto;
         height: auto;
          }

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


.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; }
footer {background-color: #DCDCDC;
        padding: 1em; }


@media (min-width: 650px) { 
  nav { display: 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 { display: none; }
  #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; }
}