@charset "utf-8";
/* CSS Document */

* {
  box-sizing: border-box;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
     float: left;
     padding: 3px;
     border: 0px solid red;
}

.row::after {
     content: "";
     clear: both;
     display: table;
}

body {
   background-color: azure;
   min-height: 100vh;
}

#mwlogo{
 margin-top: 25px;  
}

#misstate {
   margin-left: auto; 
   margin-right: auto; 
   margin-bottom: 30px; 
   border: solid #306fb3 4px; 
   box-shadow: 0px 0px 16px black; 
   background-color: #da3831;
   color: lightyellow; 
   text-shadow: 2px 2px 2px black;
   padding: 3px 50px;
   border-radius: 50px;
   width: 95%;
}

a {
   text-decoration: underline;
   font-size: 22px;
   color: blue;
}

#menubar {
   padding-top: 0px;
   font-size: 20px;
}

.topnav {
  overflow: hidden;
  background-color: #da3831;
  padding: 10px 0px;
  margin-top: 10px;
}

.topnav a {
  float: none;
  display: inline;
  color: blanchedalmond;
  text-align: center;
  padding: 24px 16px;
  text-decoration: none;
  font-size: 20px;
}

.topnav a:hover {
  background-color: #306fb3;
  color: white;
  text-shadow: 1px 1px 2px black;
}


.topnav .icon {
  display: none;
     font-size: 25px;
}

h1, h2, h3, p, button, a {
   font-family: 'Libre Baskerville', serif;
}

h1 {
   font-size: 60px;
}

h2 {
   font-size: 30px;
}

p, button {
   font-size: 22px;
}

#ppbtn {
   width: 250px; overflow: auto; background-color: #da3831;
   font-size: 30px;
   border-radius: 20px;
   color: white;
}

#ppbtn:hover{
   box-shadow: 0px 0px 20px #da3831;
   cursor: pointer;
   background-color: #306fb3;
   color: white;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0px;
}

.flex-container > div {
    width: 30%;
    margin: 0px 10px 20px;
    text-align: center;
     padding: 10px;
     background-color: antiquewhite;
     border: solid #306fb3 3px;
   border-radius: 20px;
}

.flex-container > div:hover {
     box-shadow: 0px 0px 26px black;
}

.flex-container-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0px;
}

.flex-container-2 > div {
    width: 45%;
    margin: 0px 10px 20px;
    text-align: center;
     padding: 10px;
     background-color: antiquewhite;
     border: solid #306fb3 3px;
   border-radius: 20px;
}

.flex-container-2 > div:hover {
     box-shadow: 0px 0px 26px black;
}

.flex-container5 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0px;
}

.flex-container5 > div {
    width: 18%;
    margin: 0px 10px 20px;
    text-align: center;
     padding: 10px;
     background-color: antiquewhite;
     border: solid #306fb3 3px;
   border-radius: 20px;
}

.flex-container5 > div:hover {
     box-shadow: 0px 0px 26px black;
}

.flex-container3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0px;
}

.flex-container3 > div {
    width: 30%;
    margin: 0px 10px 20px;
    text-align: center;
     padding: 10px;
     background-color: antiquewhite;
     border: solid #306fb3 3px;
   border-radius: 20px;
}

.flex-container3 > div:hover {
     box-shadow: 0px 0px 26px black;
}

.flex-container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0px;
}

.flex-container2 > div {
    width: 43%;
    margin: 0px 10px 20px;
    text-align: center;
     padding: 10px;
     background-color: antiquewhite;
     border: solid #306fb3 3px;
   border-radius: 20px;
}

.flex-container2 > div:hover {
     box-shadow: 0px 0px 26px black;
}

.btn {
   overflow-wrap: break-word;
   /*width: 350px;*/
   background-color: #306fb3;
   color: white;
   border-radius: 20px;
   font-size: 22px;
   border: solid #da383a 4px;
   padding: 10px;
   font-family: 'Libre Baskerville', serif;
}

.btn:hover {
   background-color: #da383a;
   border-color: #306fb3;
   box-shadow: 0px 0px 8px black;
   cursor: pointer;
}
 
#myBtnTop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #306fb3; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  width: 60px;
}

.faqs {
   float: right; width: 200px; margin-left: 20px;
}

input[type=text], input[type=email], input[type=number], input[type=password], input[type=file], select{
   width: 100%;
   font-family: 'Libre Baskerville', serif;
   font-size: 22px;   
}

textarea {
   width: 100%;
   font-family: 'Libre Baskerville', serif;
   font-size: 22px;
   height: 150px;
}

input[type=radio]{
   width: 20px;
   height: 20px;
}

@media only screen and (max-width: 1200px) {
   .flex-container > div {
    width: 45%;
   }  

}

   @media only screen and (max-width: 900px) {
     /* For mobile phones: */
     [class*="col-"] {
     width: 100%;
     }

   .flex-container-2 > div {
       width: 100%;
      }
      
      .topnav {
          padding: 0px 0px;
          font-size: 18px;
     }
     
     .topnav a:not(:first-child) {
          display: none;
     }
     
     .topnav a.icon {
          float: right;
          display: block;
     }
     
     .topnav.responsive {
          position: relative;
     }
     
     .topnav.responsive .icon {
          position: absolute;
          right: 0;
          top: 0;
     }
     
     .topnav.responsive a {
          float: none;
          display: block;
          text-align: left;
     }
     
     .topnav a {
          float: left;
          font-size: 22px;
        line-height: 0px;
     }
        
     .flex-container > div {
           width: 100%;
          }
   
     .flex-container3 > div {
       width: 100%;
      }

      .flex-container5 > div {
          width: 100%;
      }
      
      h1 {
         font-size: 35px;
      }

      h2 {
         font-size: 30px;
      }

      p {
         font-size: 18px;
      }
   
      #misstate {
         padding: 10px 10px;
       }
      
      .faqs {
         float: right; width: 33%; margin-left: 20px; margin-bottom: 20px;
      }
   
      a {
         font-size: 18px;
      }
   
      #mwlogo{
         margin-top: 0px;  
      }    
   
      .btn {
         overflow-wrap: break-word;
         width: 270px;
         background-color: #306fb3;
         color: white;
         border-radius: 20px;
         font-size: 22px;
         border: solid #da383a 4px;
         padding: 10px;
         font-family: 'Libre Baskerville', serif;
      }
}