body {background-color : #D9D9D6;
    color : #666666; 
    font-family: Arial, Helvetica, sans-serif;}

header {
    background-position: right; 
   text-align: center;
   }



header a:link {color: #199d75; }

header a:visited {color: #127154; }

header a:hover {color: #666666;}



nav { 
    font-weight: bold;
    font-size: 120%; 
    padding: 0;
   text-align: center;
   size-adjust: 25%;
   }

nav a { text-decoration: none;
   font-weight: bold;
   
}

nav ul { list-style-type: none;
    color: #199d75;
   padding-left: 0px; 
   }

nav li {border: solid 2px; border-color: #199d75; background-color: #D9D9D6; padding: 3px;
      border-radius: 25%; 
}



nav a:link{color: #199d75;}

nav a:visited {color: #127154;}

nav a:hover {color: #666666;}

nav ul ul { position: absolute;
    padding: 0; text-align: left; display: none; }


    nav ul ul li { border: 1px solid #00005D;
       display: block; width: 8em;
       padding-left: 1em; margin-left: 0; }

       nav li:hover ul { display: block; } 



div h2{
    border: #000000;
    border-style: solid;
    text-align: center;
    color: #199d75;
    font-size: 60px;
    font-style: oblique;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

footer {text-align: center;}


div p{
    text-align: center;
    text-size-adjust: 12;
    
        color: #199d75;
        margin: 0;
        font-style: oblique;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 30px;
  }

  main section{
      display: grid;
      justify-items: center;
      
  }

  table{
    box-shadow: 3px 3px;
  }

  table, th, td {
      border: 2px solid;
      border-color: #000000;
  }

td{
    text-align: left;
    padding: 10px;
    height: 30px;
    vertical-align:middle;
    color:#000000
}

th{
    text-align: left;
    color: #000000;
    background-color: #199d75;
    vertical-align: middle;
    padding: 10px;
}

tr:hover{
    background-color:#199d75;
}


  table{
      width: 70%;
  }

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    height: 100px;
    width: 260px;
  }
  

 .headshots{
     width: 70%;
     height: auto;
     max-height: 700px;
     max-width: 500px;
     margin-left: 12%;
     margin-right: 12%;
     margin-bottom: 2em;
     border: solid;
     border-color: #000000;
     border-width: 2px;
     border-radius: 100%; 
 } 

 #images{
     margin-top: 2em;
    margin-bottom: 2em;
    border: solid;
    border-color: #000000;
    border-width: 2px;
    border-radius: 25%;
    width: 70%;
    min-width: 70%;
    height: auto;
 }

 


  video {
    width: 80%;
    height: auto;
    padding-top: 3em;
    padding-left: 10%;
    padding-right: 10%;
  }

  .trainerHeader{
    color: #666666;
    font-style: oblique;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 60px;
    display: flex;
    justify-content: center;
    border-bottom: solid 1px #000000;
    border-top: solid 1px #000000;
    border-width: 3px;
    background-color: #D9D9D6;
}

body p{
    font-size: 30px;
    text-align: top;
}

body h3{
    font-size: 50px;
    font-style: oblique;
    display: flex;
    justify-content: center;
    align-items: center;
   
    
}
   
footer{
    border-top: solid #666666;
    margin-top: 2em;
}

#videoHeader{
    display: flex;
    justify-content: center;
    color: #199d75;
    font-size: 60px;
    font-style: oblique;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border: #199d75;
    border-style: solid;
    border-width: 3px;
    background-color: #000000;
}

form input:hover{
    background-color: #199d75;
    }

form textarea:hover{
background-color: #199d75;
}

form select:hover{
    background-color: #199d75;
    }

.form{
    margin-top: 1.5em;
}

@supports ( display: flex) {
    form { display: flex;
            flex-flow: column nowrap;
           margin-right: 20%;
           margin-left: 20%;
            color: #127154;
          }
    input, textarea { margin-bottom: .5em;}

    input[type="submit"] { grid-column: 8 / 2;
            width: 40%; }
  }

@media (max-width:1023px){
    nav{
        display: flex;
        justify-content: center;
    }
    
  

}

@media (min-width: 1024px)
{
   nav ul{
           display:flex;
		   border: 2px #199d75;
           padding-top: 1.8em;
           flex-wrap: nowrap;
           flex-direction: row;
           justify-content: space-around;
		   text-decoration: none;
           
   }
  

   form { display: flex;
    flex-flow: column nowrap;
   margin-right: 35%;
   margin-left: 35%;
   
  }

  table{
    width: 50%;
}
  
  div p{
      display: flex;
      flex-direction: row;
      
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      padding-top: none;
      padding-bottom: none;
      padding-left: 20px;
      padding-right: 20px;
     
     
    }

    
    nav{
        background: linear-gradient(to left, #000000, #D9D9D6)
    }
    
  iframe{
      min-width: 700px;
      display: flex;
      float: inline-start;
  }

 header h1{
     margin-left: 10em;
    
    }

    .classesRight{
        display: grid;
        grid-column: 2/2;
        margin-bottom: 2em;
        border: solid;
        border-color: #000000;
        border-width: 2px;
        border-radius: 25%;
        width: 70%;
        min-width: 70%;
        height: auto;
        justify-items: center;
     }
     
     .classesLeft{
        display: grid;
        grid-column: 1/1;
        margin-bottom: 2em;
        border: solid;
        border-color: #000000;
        border-width: 2px;
        border-radius: 25%;
        width: 70%;
        min-width: 70%;
        height: auto;
        justify-items: center;
     }
   

    #navbar{
        border: #199d75;
        border-width: 20px;
    }

   #wrapper{ display: grid;
           grid-template-rows: max-content;
           grid-template-columns: 1fr 1fr 1fr;
           margin: auto;
           width: 100%;
           border: 1px; border-color: #002171;
           box-shadow: #002171;
            }
            nav {grid-row: 1 / 1; grid-column: 2/4;}
            header { grid-row: 1/1; grid-column: 1/1;}
            div {grid-row: 2/2; grid-column: 1/4;}
          main{ grid-row: 3/4; grid-column: 1/4;}
          footer { grid-row: 5/5; grid-column: 1/4;}

          

    .gymbanner
        {
            background-image: url(curls.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 100% auto;
            
        }
        
        #gymbannertext{
            color: #199d75;
            padding-bottom: 100px;
            padding-top: 100px;
            margin: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
            font-style: oblique;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: 60px;
            display: flex;
            justify-content: center;
        }

        
    

        #trainerBio{
            display: flex;
            justify-content: center;
        }

        .grid {
            display: grid;
            gap: 1rem;
            margin-right: 10em;
            margin-left: 10em;
            flex-wrap: nowrap;
            grid-auto-flow: column;
            font-size: large;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            margin-left: auto;  
            margin-right: auto; 
            justify-items: center;
          }

        
}