.flex-container {
  display: flex; 
  flex-direction: row;
  background-color: rgb(62, 197, 238); 
  flex-wrap: wrap;     
  justify-content: center; 
  border-radius: 5%;
} 
.flex-container > div {
  background-color: #d4e2b1fd;
  width: 320px;
  margin: 5px;
  text-align: center;
  line-height: 20px;
  font-size: 21px; 
  border-radius: 9%;
}  
.flex-container .main{
  flex-basis:1890px; 
  font-size: 20px; 
  border-radius: 12%;
} 
.mini-flex{
  flex-basis: 1500px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;  
  font-size: 20px;  
  border-radius: 12%;
  
}  
.motto h3 { 
  color: #ebfc05; 
  background-color: #1b0fc0; 
  text-align: center; 
  width: fit-content; 
  margin-left: auto; 
  margin-right: auto;
}
.bob img{ 
  height: 50%; 
  width: 100%;
}

.sm-col .bob audio{
  display: inline-block;
  height: 30px;
  width: 100%;
}

.sm-col{
  flex-basis: 350px;
  color:rgb(144, 241, 229);
  font-size: 20px;
  background-color: rgb(132, 102, 241);
  padding: 5px;
  margin: 10px 5px; 
  border-radius: 12%;
}

.sm-col img{
  width: 100%;
  height: auto;
}  

.sm-col audio { 
  width: 100%; 
  height: auto;
} 
.history { 
  flex-basis:1890px; 
  text-align: center; 
  font-size: 20px; 
  border-radius: 4%;
}  
.mini-flex1{
  flex-basis: 1500px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;  
  font-size: 20px;
  
}
.sm-col-1 { 
  flex-basis: 350px;
  color:rgb(243, 224, 224);
  font-size: 20px;
  background-color: rgb(132, 102, 241);
  padding: 3px;
  margin: 5px 5px; 
  border-radius: 12%;
}  

.sm-col-1 div.flag{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sm-col-1 div.flag img{
  width: 100%;
  height: auto;
}

.sm-col-1.lou img { 
  height: 42%; 
  width: 80%;
} 
.sm-col-1.bird img { 
  height:25% ; 
  width:90% ;
}
.sm-col-1 img { 
  width: 80%; 
  height: 25%;
} 
.sm-col-1 video { 
  width: 100%; 
  height: auto;
}  
.mini-flex2{
  flex-basis: 1500px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;  
  font-size: 20px;
} 
.sm-col-2 { 
  flex-basis: 350px;
  color:white;
  font-size: 20px;
  background-color: rgb(132, 102, 241);
  padding: 3px;
  margin: 5px 5px; 
  border-radius: 12%;
}  
.sm-col-2 img { 
  width: 40%; 
  height: 15%;
}

.sm-col-2.bob img { 
  width: 95%; 
  height: 30%; 
}

.oliver { 
  height:auto ; 
  width:100% ;  
  background: #d3b17f;  
  border-radius: 12%;
}  
.oliver img { 
  width: 100%;
}
.sm-col-2 video { 
  width: 100%; 
  height: auto;
}
ul a { 
  font-size: 20px; 
  font-weight: 600; 
  text-decoration: underline;
  color: #07f542;
} 
ul,a { 
  list-style-type: square;
}
body { 
  background-image: url(../images/negbeach.png);
}
  
  .header { 
    text-align: center;
  }  
  .header img { 
       width: 25%;
  } 
  .header a img { 
      height: 10%; 
      width: 10%;
  }   
  h2 { 
    text-decoration: underline; 
     color: #df1212;    
  }
   h3 {  
    text-align: center;
    color: rgb(51, 8, 243); 
    text-decoration: underline; 
    
    
  } 

.welcome { 
   background-color: rgb(27, 233, 130); 
   text-align: center;
   font: weight 800px; 
   
  }   
 
.flag img {  
    width: 18%; 
    text-align: center;
} 
.flag video { 
    width: 35%; 
    text-align: center;
}
.flag { 
    display: flex;
    justify-content: center; 
    background-color: #df1212; 
    border-radius: 8%; 
    width: 95%; 
    margin-left: 3%;
} 
.flagbgg img { 
  width: 60%; 
}  
.bolt2 video { 
  width: 95%; 
} 
 

nav { 
  text-align: center;
} 
 
h4 { 
  color: #df1212; 
  text-decoration: underline;
}  
 
.nav p { 
  text-align: center; 
  font-size: 19px; 
  text-decoration: underline; 
  color: #ee0b0b; 
  font-weight: 700;
} 

.a { 
  margin-left: 37%;
}
.button {
  display: inline-block;
  padding: 3px 16px;
  font-size: 15px;
  cursor: pointer;
  text-align: center; 
  text-decoration:rgb(216, 65, 90);
  outline: green;
  color:yellow;
  background-color:rgb(221, 123, 208);
  border: none;
  border-radius: 17px;
  box-shadow: 0 5px green; 
  margin-bottom: 15px; 
}
  
.button:hover {background-color:rgb(247, 11, 11)} 

.button:active {
background-color: #3902b8;
box-shadow: 0 5px #666;
transform: translateY(4px);
} 
.nav.RETURN { 
  font-size: 20px; 
  font-weight: bold; 
  display: block; 
  background-color: rgb(65, 33, 247); 
  width: 65px;  
} 
  
.nav link { 
   font-size: 25px;
   color: #ee0ebd; 
   text-decoration:underline; 
   margin-right: 30px;
     
}
.nav .hover, a:active { 
   color: #47d310;
} 
.nav a:visited { 
   color: #e40e79; 
   background-color: rgb(3, 134, 47);
}

.nav a:link, a:visited { 
   margin-bottom:10px ;
   display:block; 
   width: 75px;
       
}
.nav a:hover a:active {
   color:#1b0fc0 ;
   font-weight: bold; 
} 

.footer div{ 
  text-align: center; 
  display: flex; 
  justify-content: space-evenly; 
  flex-wrap: wrap; 
  background-color: #f5f0f0;
}