/* class selector for styling the background and max width/height min width/height for page*/
  #myPage{
    margin-top: 0;
    align-content: center;
    margin: auto;
    background: rgb(64, 64, 68);
    width: 95%;
    max-height: 600%;
    max-width: 1200%;
    min-width: 90%;
    min-height: 200%;

    
    
    

  
}

 


/*element selector styling for header */
header{
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  background-color: #020000;
  color: rgb(189, 182, 182);
  text-align: center;
  box-shadow: 0px 6px 25px 10px
  


}
/* class selector styling for navigation bar */
 .navbar-item{
 
  margin-left: 5%;
  margin-right: 5%;
  text-decoration: none;
  color: rgb(189, 182, 182);
  text-transform: uppercase;
  margin-bottom: 1em;
  font-size: 1.5em;
  display: inline;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  

  

  

}
/* element selctor styling for anchor links ourside of the nav bar*/
a{
  color:  rgb(189, 182, 182);
  text-decoration: none;
  padding-bottom: 1em;


}
/*psudo selector for anchors */
a:hover{
  text-decoration: underline;
 
  

  
  
  
  
}


/*styling for footer*/
footer{
  background-color: #060201;
    color: rgb(189, 182, 182);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

    
}

/*class selector for styling colunms on each page utlizing flexbox*/
.columns{

  display: flex;
  flex-wrap: wrap;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 
  

  
}
/*styling for each colunm on each page utlizing flexbox*/
.columns > * {
    flex: 1 1 33.3%;
}
/*class selector for styling content inside each colunm on the demos and index page*/
.content{
    inline-size: 435px; 
    box-sizing: border-box;
    overflow-wrap: break-word;
    text-align: center;
    padding-top: 0;
    padding-bottom: 0%; 
    margin: auto;
    padding-left: 3%;
    padding-right: 5%;
    box-shadow: 0px 6px 25px 20px
    
      

  
}
/* class selector for styling content inside each colunm on the achievements page*/

.content2{
  inline-size: 70%; 
  box-sizing: border-box;
  overflow-wrap: break-word;
  text-align: center;
  padding-top: 0;
  padding-bottom: 0%; 
  margin: auto;
  font-size: 1.5em;
  padding-left: 3%;
  padding-right: 5%;
  box-shadow: 0px 6px 25px 20px
  
  

}


/*id selector for sizing and styling for the logo */
  #logo{
  height: 300px;
  width: 300px;
  background-color: rgb(189, 182, 182);
  
}
 #star{
   width: 100%;
   height: 50%;


 }



/*element selctor styling heading 2's*/
h2{
  text-decoration: underline;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 2em;
}
/*element selctor styling heading 3's*/
h3{
  text-decoration: underline;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}
/*element selctor adding bottom padding for paragraths*/
p{
 
  padding-bottom: 1em;
}
/*element selctor centering my numbered list*/
ol {
  text-align: left;
  padding-left: 35%;
 
  
}
table{

 width: 100%;
 border: 1px solid;
}

th, td {
  height: 70px;
  border: 1px solid;
}

/*media querie for puting nav bar in one column with smaller screens*/
@media (min-width:200px) and (max-width:1000px)  { 
  .navbar-item{
    padding-left:  0;
    margin-left: 0;
    margin-bottom: 1em;
    display: block;
  }
  
  
}
/*media querie for shrinking centent with smaller screens*/
@media (min-width:200px) and (max-width:1000px)  { 

  .content{
    inline-size: 280px; 
    
  }
}