html {
   font-size: 100%; /*Sets my font size to atleast 100%*/   
   }

body { /*Creates the base for my wesbsite*/
   
   background-color: rgb(255, 255, 255); /*Sets my background color*/
   margin: 0;
   padding: 0;
   font-size: 100%;
   font-family: 'Lexend Deca', sans-serif; /*sets my fonts*/
       
}
   
   
   h1 { /*sets my big welcome image*/
       font-size:250%;
       color:rgb(0, 0, 0);
       
   }
   h2 { /*Sets my text that introduces each section*/
       font-size: 150%;
       color: rgb(0, 0, 0);
       
}
   
   h3 { 
       font-size: 300%; /*sets my white text for my welcome*/
       color: antiquewhite;
       padding: 0 0 25px 0;
   }
   
   h4,h5,h6 {
   
   }
   
   
   p{ /*Sets my paragraph text*/
       color: rgb(31, 31, 31);
       font-size: 175%;
       line-height: 2em;
   }

   .p2{ /*Sets my paragraph text*/
    color: rgb(145, 145, 145);
    font-size: 100%;
    line-height: 2em;
}


   .container { /*sets the second layer of my website*/
       background-color: rgb(255, 255, 255);
      overflow: hidden;
       padding-top: 3%;
       margin: auto;
       width:100% auto;
       max-width: 2000px;
       font-family: 'Lexend Deca', sans-serif;
    box-sizing: border-box;
   }
   .welcome { /*sets the boxes for my different sections*/
       background-color: rgb(255, 255, 255);
       border: 0px;
       padding: 0;
       margin:0 auto;
       margin-top: 5%;
       margin-bottom: 5%;
       overflow:hidden;
       text-align: center;
       display: flex;
       justify-content: center;
     
       
   }


   #menu { /*styles my header bar*/
      background-color: #000000;
      position: fixed;
      width: 100vw;
      box-sizing: content-box;
      overflow:hidden;
      top:0;
      font-family: 'Lexend Deca', sans-serif;
      display: flex;

      
   }
   .navi { /*styles my header buttons*/
      width: 200px;
      height: 20px;
      background-color: #000000;
      color: rgb(255, 255, 255);
      margin: 10px;
      display: inline-block;
      padding: 20px;
      text-align: center;
      overflow:hidden;
   }
   .emblem {
    width: 50px;
    height: auto;
    background-color: #000000;
    color: rgb(255, 255, 255);
    margin: 10px;
    display: inline-block;
    padding: 0;

    overflow:hidden;
 }

   
 
 .parent {
  display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 19px;
grid-row-gap: 0px;
  background-color: rgb(255, 255, 255);
  text-align: center;
  padding: .8rem;
  font-size: larger;

  
  }
  
  .div1 { 
    grid-area: 1 / 1 / 2 / 2; 
    border: 4px solid black;
    padding: .8rem;

  }
  .div2 { 
    grid-area: 1 / 2 / 2 / 3;
    border: 4px solid black;
    padding: .8rem;
  }
  .div3 { 
    border: 4px solid black;
    grid-area: 1 / 3 / 2 / 4; 
    padding: .8rem;
  }
    



 

   .content {
      width: 80%;
      height: auto;
      background-color: #ffffff;
      margin: 0 auto;
      overflow:hidden;
      padding: 20px;

   }
   
.footer {
padding: 1.5%;
background-color: black;
text-align: center;
}



   a.one:link { /*costomizes my links*/
       color: rgb(255, 255, 255); 
   }
   
   a.one:visited { /*costomizes my links*/
       color: rgb(255, 255, 255);
   }
   a.one:hover { /*costomizes my links*/
       color:rgb(115, 222, 255 );
   }
   

    
     a.one:link {
       text-decoration: none;
     }
     
     a.one:visited {
       text-decoration: none;
     }
     
     a.one:hover {
       text-decoration: none;
     }
     
     a.one:active {
       text-decoration: none;
     }
   

  
     a.two:link { /*costomizes my links*/
      color: rgb(0, 0, 0); 
  }
  

  a.two:visited { /*costomizes my links*/
      color: rgb(0, 0, 0);
  }
  a.two:hover { /*costomizes my links*/
      color:rgb(255, 255, 255);
      background-color: #000000;
  }
  


    a.two:link {
      text-decoration: none;
    }
    
    a.two:visited {
      text-decoration: none;
    }
    
    a.two:hover {
      text-decoration: none;
    }
    
    a.two:active {
      text-decoration: none;
    }


    @media (max-width: 40em) {
      .emblem {
      display: none;
      }
      p {
        font-size: 125%;
      }
      .welcome {
        margin-top: 20%;

      }
      }

   @media (max-width: 400px) {
      .parent {
        font-size: smaller;
      }

      }