@media screen and (min-width: 0px) {
  #unit {
    width: 35%;
    margin: 5% 3%;
    text-align: center;
    padding: 25px;
    height: 40px;
    background: #98b5c3;
    color: #444;
    transition: .5s;
    font-size: 1.4em;
  }

  #unit:hover { 
    background: #0E2B3A;
    color: #ccc;
    box-shadow: -1px -1px 15px #111;
    }

    #unitcs {
    width: 35%;
    margin: 5% 3%;
    text-align: center;
    padding: 25px;
    height: 40px;
    background: #98b5c3;
    color: #444;
    transition: .5s;
    font-size: 1.4em;
  }

  #unitcs:hover { 
    background: #0E2B3A;
    color: #ccc;
    box-shadow: -1px -1px 15px #111;
    }

  #heading {
    text-align: center;
    color:#999;
  }
  hr {
    color: #999;
  }


  body {
    background-image: url("maxresdefault.jpg");
    background-attachment: fixed;
    background-size: cover;
   
  }

  table {
    
    margin: 20px auto;
  }
  table a{
    font-size: 15px;

   
 }

 #selfgrade {
  font-size: 15px;

  
 }
 
 
  #contactdiv {
    width: 90%;
  }
  
  header {
    background: black;
    opacity: .4;
    width: 98%;
    border: 1px double white; 
    height: auto;
  }

  #headrow {
    background: #16455E;
  }
  #prli  {
    font-size: 2em;
    background: #ccc;
  }

  #prli {
    width: 40%;
    text-align: center;
  }

  #prli a {
    color: #4D7385;
  }
  

  #classes li {
    width: 35%;
    margin: 25px 6%;
    box-shadow: 10px 10px 15px #111;
  }

  #pclasses li {
    width: 40%;
    margin: 20px 2%;
    box-shadow: 3px 3px 25px black;
  }

  #mainstuff {
    margin: auto;
  }

  #col2 {
    width: 20%;
  }
  #col3 {
    width: 20%;
  }
  td{
    padding: 0;
  }
  

}

@media screen and (min-width: 1000px) {
  #unit {
    width: 25%;
    
    height: 70px;
    margin: 20px 7%;
  }

  #unitcs {
    width: 25%;
    font-size: 1.5em;
    height: 50px;
    margin: 60px 7%;
  }


  #prli {
    background: #ccc;
  }
  #headrow {
    background: #16455E;
  }

  #prli {
    width: 20%;
    text-align: center;
    margin: 1%;
  }

  #prli a {
    color: #4D7385;
  }
  table a {
    font-size: 1em;
  }
  #selfgrade {
  font-size: 1em;
  
 }
  body {
    background-image: url("maxresdefault.jpg");
    background-size: cover;
    background-attachment: fixed;
    background height: 1000px; 


  }
  
  

  

 header {
  background: black;
  opacity: .4;
  width: 98%;
  border: 1px double white; 
}
  h1 {
    opacity: 1;
  }

  #classes li {
    width: 35%;
    margin: 25px 6%;
    box-shadow: 10px 10px 15px #111;
  }

  #pclasses li {
    width: 25%;
    margin: 25px 3%;
    box-shadow: 10px 10px 15px #111;
  }

  #contactdiv {
    width: 40%;
  }


}

 @media screen and (min-width: 1450px) {
  #unit {
    background: rgba(28,75,243,0.8); 
    width: 11%;
    margin: 2% .7%;
    color: white;
    height: 70px;
  }

  #unitcs {
    background: rgba(28,75,243,0.8); 
    width: 13.9%;
    margin: 2% 1%;
    color: white;
    height: 60px;
  }


  #col1 {
    width: 15%;
  }
  #col2 {
    width: 40%;
  }
  #col3 {
    width: 40%;
  }
  body {
    background-image: url("3.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;

  }
  nav { 
      border: 0px solid;
      border-radius: 0;
  }

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin: 0 5% 0 0;
    text-align: right;
    width: 45%;
  }
  #prli{
    font-size: 1.5em;

  }
 #logo {
    float: left;
    margin: 0% 5% 0 0;
    text-align: left;
    width: 45%;
  }
  
  h1 {
    font-size: 2.5em;
  }
  
  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }
  
  header {
    border-bottom: 5px solid #444;
    margin-bottom: 60px;
    background:#1C4BF4;
    opacity: 1;
  }
  #classes {
    width: 100% ;
  }
   #classes li {
    width: 25%;
    margin: 50px 4.16666667%;
    box-shadow: 10px 10px 15px #111;
  }

   #pclasses li {
    width: 15%;
    margin: 50px 4.16666667%;
    box-shadow: 10px 10px 15px #111;
  }
  #prli {
    background: #ccc;
  }

  #headrow {
    background: #1C4BF4;
  }
  #pr {
    margin: 0 20%;
  }
  #prli {
    width: 18%;
    text-align: center;
    margin: 1% 1.5%;
  }

  #prli a {
    color: #4D7385;
  }
  #col1 {
    width: 15%;
  }
  #col2 {
    width: 40%;
  }
  #col3 {
    width: 40%;
  }
  #heading {
    color: #1C4BF4;
  }
  #unit:hover { 
    background: #CCC;
    color: #1C4BF4;
  }
  
  th {
    font-size: 1.2em;
    font-weight: 800;

  }
table {
  background: #1C4BF4;
}

}