*, *::before, *::after {
  box-sizing: border-box;
}


  body {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
        font-family: Arial, Helvetica, sans-serif;
        background-color: #b0f7d0; 
  }


  /* Make images easier to work with*/ 
  img,
    picture {
      display:block;
      margin-left:auto;
      margin-right:auto;
      /* margin-top:0; */
      max-width: 95%;
      box-shadow: 1em .5em 1em black;
         
    }
  /*

 .container {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
   
  } 


.container2{
  width: 90%;
  max-width: 900px;
  margin: auto;


}
    */

.toptitle{
     color: red;
     font-family: Comic Sans MS;
     text-align: center;
     font-weight: bold;
     /* border: 2px solid yellow; */
}

.toptitle h1{
  color: red;
  font-size:   2rem;  
  text-indent: 2rem;
}

.toptitle p {
  font-size:   1.5rem; 
  }

.toptitle__center {
  text-align: justify;
  font-size:3px;
  margin-top:0rem;
  margin-bottom:0rem;
}


nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family:cursive
}

nav li {
  display:inline-block;
  margin: 10px;
  padding-top: 10px;

  position: relative;
}

nav a {
  color: #0000FF;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {

  font-weight:bold;
}

nav a::before {
  content: '';
  display: block;
  height: 1.5px;
  background-color:#0000FF;

  position: absolute;
  top: 2.1em;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

/*
.nav__list {

  display:flex;
  padding: 0em;
  list-style-type:none;
  
}

.nav__link {
  font-family:cursive;
  text-align:center;
  margin-top: 0;
  margin-bottom: 0;
  padding:1em;
  text-decoration: none;
  text-transform: uppercase;;
}

.nav__link--button {
  background: #fff;
  color: #136c72;
  padding: .25em 1em;
  border-radius: 10em;
}


.nav__link:hover {
  opacity: .75;
}
*/
.mrow{
  display: flex;
  list-style-type:none;


}

.mcol{
  width:100%;
}

.columns {
  margin-left:auto;
  margin-right:auto;
  display: grid;
  grid-template-columns: 100%;
  /* gap: 5em; */
  /* border:2px solid green */

}


.imagebox{
  display: grid;  
  font-family: Arial;
  align-content: center;
  max-width: 99%;
  margin-left:1em;
  margin-right: 1em;
  padding: 1em; 
} 

.imagebox p{
 

  font-size: 1rem;
  text-align:center;
  font-weight:bold;
  color: red;

}

.imagebox h1{

  margin-top: 0;
 font-size: .7rem;
 text-align:center;
 font-weight:bold;
 color: red;

}
.imagebox h2{
  margin-top: 0;
  font-size: 1rem;
  text-align:center;
  font-weight:bold;
  color: red;
}



.textbox{
  display: grid;
  margin-top:0em;
  margin-bottom:0em;
  margin-left: .5rem;
  margin-right: .5rem;
  text-align:justify;
  font-size:.75em;
  margin-top:0;

 
}

.textbox p{
  font-family: Arial; 
  text-align: justify;
  color:#016B0F ;
}

.textbox h1{
  color: red;
  font-family: Comic Sans MS;
  text-align: center;
  font-weight: bold;
  font-size: 2em;
  text-indent: 2em;
}

.textbox h2{
  color: red;
  font-family: Comic Sans MS;
  text-align: center;
  font-weight: bold;
  font-size: 1em;
  text-indent: 2em;
}

.textboxred{
  display: grid;
  margin-left: 2em;
  margin-right: 3rem;
  font-family: Comic sans-serif;
  font-size: 1.5em; 
  text-align: center;
  color:red;
}


.btn {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase; 
  color: #23424A;
  font-weight: 900;
  background-color: #67b3b3;
  padding: .75em 2em;
  border-radius: 100px;
}

.btn:hover,
.btn:focus {
  opacity: .75; 
}


.bigred{
  font-family: segoe script;
  color: red;
  font-size: 2rem;
  font-weight: bold;
}

.red{
  color: red;
  font-size:4vw;
}

.greenbold{
  font-family: Comic Sans MS; 
  font-size:5vw; 
  text-align: center; 
  color: #016B0F;
}

.green{
  font-family: Comic Sans MS; 
  font-size:1.5rem; 
  text-align: center; 
  color: #016B0F;
}

.menu A:link { font-family: Arial; font-size:1rem; font-weight:normal; color: #0000FF; text-align: center;}
.menu A:visited { font-family: Arial; font-size:1rem; font-weight:normal; color: #800080; text-align: center;}
.menu A:hover { font-family: Arial; font-size:1.2rem; font-weight:bold; color: #0000FF; text-align: center;}


  /* Set core root defaults 
  html:focus-within {
    scroll-behavior: smooth;
  }

*/

 


 /* components*/

 


.textbox-greenbold {
    font-family: Comic Sans MS;
    font-size:5vw; 
    text-align: center;
    color: green;
    font-weight: bold;    
}

.textbox-bigred {
    font-family: Comic Sans MS;
    font-size:8vw; 
    text-align: left;
    text-indent: 5rem;
    color: red;
    font-weight: bold; 
    Max-width: 1000px;   
}


.HeadingL { font-family: Comic Sans MS; font: size 7vw; font-weight:bolder; font-style:normal; text-align: left; color: #FF0000; }
.SubHeading { font-family: Comic Sans MS; font: size 3vw; font-weight:bolder; font-style:normal; text-align: center; color: #FF0000; }


.BigRed { font-family: Comic Sans MS; font-size:3vw; font-weight:bolder; font-style:normal; text-align: left; color: #FF0000; }
.BigRed_C { font-family: Comic Sans MS; font-size:3vw; font-weight:bolder; font-style:normal; text-align: Center; color: #FF0000; }
.TableBorder { font-family: Arial; font-size:5vw; font-weight:bold; text-align: center; }

.Signature { font-family: Segoe Script; font-size:5vw; font-weight:bold; font-style:italic; color: #0000FF; }

.GreenBold { font-family: Comic Sans MS; font-size:5vw; text-align: center; color: #016B0F; }
.BlueBold { font-family: Comic Sans MS; font-size:5vw; text-align: center; color: #0000FF; }


.highlight { font-family: Arial; font-size:3rem; text-align: left; color: #CC00FF; }


@media (min-width: 700px) {
  .columns {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 1em;
    max-width: 1200px;
    /* border: 2px solid red; */

   }
   .imagebox p{
    font-size:1rem;
  }
    .imagebox h1{
      font-size:1.5rem;
    }

    .imagebox h2{
      font-size:1.5rem;
    }

    .textbox p{
      text-align:justify;
      font-size: 1.0rem;
    }

    .toptitle h1{
      font-size: 3rem;
    }
    .toptitle p{
      font-size: 2rem;
    }
    .toptitle-center p{
      font-size:3rem;
    }
    .toptitle-center h1{
      font-size: 3rem;
    }


    .menu A:link {  font-size:1.5rem; }
    .menu A:visited { font-size:1.5rem; }
    .menu A:hover {  font-size:1.2rem; }

}