.active {background-color: #4caf50;}

ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #e00daf;}
        
li {float: left; width: 20%;}
        
li a {display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 18pt; transition: 1s}
        
li a:hover {background-color: deeppink; transition: 1s; font-size: 24pt;} /* the hover is a element used to make style changes when the cursor is used over an element. */
        
h1 {
    font-size: 36pt;  
    text-align: center;
    border-style: solid; 
    border-color: rebeccapurple;
    background-color: #e00daf ;
    margin-bottom: -34px; /* margins are used to determine distance between elements, I use them here to group together the headings and nav bar.*/
    margin-top: -8px;
}
h2 {
    font-size: 30pt;  
    text-align: center; /*the text align is a element used position text elements */
    border-style: solid; 
    border-color: rebeccapurple;
    background-color: #e00daf ;
    margin-bottom: 0px;
}
        
#nav {border-style: solid; border-color: rebeccapurple;}

body {background-color: black;}

body {color: white;}

#logo {
  display: block;
  margin-left: 35%;
  width: 50%;
}

#history {text-align: center; font-size: 24pt;}

.About22 {
  display: flex; /* the flex element allows for two elements to be positioned next to each other on the site, this can be used for images and text that go with each other.*/
}

.About22 img {
  float: left; /*float is to position elements like images on certain parts of the page, this is often used with flex so that an images can float either left or right and then flex for text to work with it. */
  width: 400px;
  margin-right: 1em;
  border-style: solid; 
  border-radius: 10%; 
  border-color: white;
}

.About22 p {
  font-size: 18pt;
}

#about {text-align: center; font-size: 24pt;}

 .HistoryP {
    display: flex;
    align-items: center;
    font-size: 18pt;
}
.right-image {
    margin-right: 1em;
    margin-left: 10px;
    float: right;
    border-style: solid; 
    border-radius: 10%; 
    border-color: white;
}


#MFh3 {
    text-align: center;
    font-size: 24pt;
    margin-bottom: -25px;
}

.row {
  display: flex;
}

.columnIMG {
  flex: 33.33%;
  padding: 5px;
  max-width: 450px;
  align-self: center;
  margin: 40px;
  width: 100%;
  border-style: solid; 
  border-radius: 10%; 
  border-color: white;
  overflow:hidden;
  padding: 0px;
  max-height: 540px;
  margin-bottom: -25px;
}
.columnNames {
  flex: 33.33%;
  padding: 5px;
  max-width: 450px;
  align-self: center;
  margin: 40px;
  width: 100%;
  border-style: solid; 
  border-radius: 10%; 
  border-color: white;
  overflow:hidden;
  padding: 2px;
  max-height: 540px
}

h4 {text-align: center;
    font-size: 18;
}

#Official {color: hotpink;}