/*Variables -- the colors look HORRIFIC. We'll fix them here*/
/*Keep all CSS here for now, use what you need */ 
/*<!--REGIONAL SUBMISSION-->*/


:root{
    --primaryOne: #ccc; 
    --primaryTwo: #1e0534; 
    --secondaryOne: #51355A; 
    --secondaryTwo: #1f1f1f;
    --accent:#2A0C4E; 
    --background:#E1E1E1;
}

body{
  font-family: 'Lato', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', Verdana, sans-serif;
  background-image: url('Media/starsTwinkling.gif');
    
}

p, .basicText {
    color: var(--primaryOne);
    padding: 2%; 
    font-size: larger;
    line-height: 30px;
}

h2 {
    text-align: center;
    font-size: 3.8vw;
    margin: 2%;
    padding: 5%;
    color: white; 

}

h4 {
    color: var(--primaryOne);
    font-size: 1.8vw;
    padding-left: 16px;
}

ul {
    color: var(--primaryOne);
    line-height: 30px;
    list-style-type:circle;
    list-style-position: outside;
    margin-top: -3%;
    padding-left: 90px;
}


/*Nav Bar */
.topnav {
    overflow: hidden;
    background-color: var(--background);
    font-size: 1vw;
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 9999;
    width: 100%; 
    height: auto;
    margin-bottom: 1%;
    min-height: 50px; 
  }

  .topnav a {
    float: left;
    color: var(--accent);
    text-align: center;
    padding: 1% 1.5%;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: var(--primaryOne);
    color: black;
  }
  
  .topnav a.active {
    background-color: #ffffffc0;
    color: #000000;
  }

/*Basically the top of every page, if we have a consistent header*/
.pageTop{
    background-image: url("media/starsTwinkling.gif");
    box-shadow: 5px 5px 10px 0 var(--primaryOne) inset, -5px -5px 10px 0 var(--primaryOne); 
    height: 30vw;
    padding: 4%;
}

/*Begin the broken part*/

/*All for the safety div + head + image */


.safetyHead{
    margin: 2%;
    padding: 2%;
    margin: 2%;
    padding: 2%;

}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
    margin: 2%;
    padding-top: 2%; 
    padding-left: 2%;
    padding-right: 2%;
}

.flexBox{
    display: flex;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
    margin: 2%;
    padding-top: 2%; 
    padding-left: 2%;
    padding-right: 2%;
}

.flexBox{
    display: flex;
}

/* The rule is the theme of the page, if we're keeping it */

.rule{
    text-align: center;
    font-size: 2vw;
}

.safetyHead{
    float:left; 
    margin: 2%;
    padding-top: 0.1%;
    padding-bottom: 0.1%;
    font-size: 1.5vw;
    background-color: var(--primaryOne);
    text-align: center;
    color: black;
}

.safetyBody{
    width: 60%; 
    margin: 2%;
    padding-top: 0.1%;
    padding-bottom: 0.1%;
    font-size: 1.5vw;
    background-color: var(--primaryOne);
    text-align: center;
    color: black;
}

.safetyImg{
    float: right
}


.safetyHead{
    float:left; 
    margin: 2%;
    padding-top: 0.1%;
    padding-bottom: 0.1%;
    font-size: 1.5vw;
    background-color: var(--primaryOne);
    text-align: center;
    color: black;
}

.safetyBody{
    width: 60%; 
    margin: 2%;
    padding-top: 0.1%;
    padding-bottom: 0.1%;
    font-size: 1.5vw;
    background-color: var(--primaryOne);
    text-align: center;
    color: black;
}

.safetyImg{
    float: right
}


/*START W3SCHOOLS CODE */
.tab {
  overflow: hidden;
  border: 2px solid var(--secondaryOne);
  background-color: var(--secondaryTwo);
  margin-bottom: 2%;
padding-left: 43%;

}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 8px;
  transition: 0.3s;
  font-size: 17px;
}
  
  /* Change background color of buttons on hover */
  .tab button:hover, .tab button.active {
    background-color: #ddd;
  }

  .tab button:hover p,  .tab button.active p{
    color: var(--primaryTwo);
  
  }
  
  .tab button p{
    color: var(--primaryOne)
  }

  /* Create an active/current tablink class */

  
  /* Style the tab content */
  .tabcontent {
    display:none;
    margin: 2%;
    border: 1px solid #ccc;
    border-top: none;
  }

  /* END OF W3 SCHOOLS CODE*/ 

  .split-side-text1{
    background-color: var(--primaryOne);
    color: white; 
  }

.container-half-prep {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 40% 40%;
}
  
.left-image-prep {
    grid-area: 1 / 1 / 2 / 1;
}

.left-text-prep p, .right-text-prep p {
  font-size: 1.75vw;
  color:var(--secondaryTwo);
  line-height: 3vw;
  margin-top: 0%;
  padding: 30% 10% -6% 10% ;
  margin: 8%;
  font-family: 'Lato', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', Verdana, sans-serif;
  font-size: 160%;
}

.right-text-prep ul{
  font-size: 120%;
  color:var(--secondaryTwo);
  line-height: 2.5vw;
  margin-top: -8%;
  margin-right: 5%;
  padding-left: 120px;
  font-family: 'Lato', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', Verdana, sans-serif;

}

.right-image-prep {
  grid-area: 1 / 2 / 2 /2;
}

.right-text-prep {
  grid-area: 2 / 2;
  background-image: linear-gradient(to bottom, #ccccccc6, #ccccccc6, #ccccccc6, transparent);
  animation-name: bottomToTopFill;
  animation-duration: 2s;
  animation-delay: 1ms;
}

.half-half-container-prep {
    display:flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}

.half-half-item {
    width: 20%;
    height: 100%;
}

@media (min-height: 200px) {
  .left-text-prep p, .right-text-prep p {
    font-size: 100%;
  }
  .right-text-prep ul{
    font-size: 80%;
  }

}

@media (min-height: 600px) {
  .left-text-prep p, .right-text-prep p {
    font-size: 90%;
  }

  .right-text-prep ul{
    font-size: 70%;
  }
}

@media (min-height: 800px) {
  .left-text-prep p, .right-text-prep p {
    font-size: 150%;
  }

  .right-text-prep ul{
    font-size: 130%;
  }
}

/* The element to apply the animation to */
.left-text-prep {
  grid-area: 1 / 1;
  background-image: linear-gradient(to top, #ccccccc6, #ccccccc6, #ccccccc6, #ccccccc6, transparent);
  animation-name: topToBottomFill;
  animation-duration: 2s;
  animation-delay: 1ms;
}

@keyframes bottomToTopFill {
  0%   {margin-top: 50px;}
  90%  {margin-top: 5px;}
  100% {margin-top: 0px;}
}

@keyframes topToBottomFill {
  0%   {margin-bottom: 50px;}
  90%  {margin-bottom: 5px;}
  100% {margin-bottom: 0px;}
}
 


.blackOverlay{
  background-color: #000000d3;
  z-index: 10;
  padding: 4%;
}

.blackOverlay90 {
  background-color: #2A0C4E;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0,rgba(0, 0, 0, 0), 0), var(--secondaryTwo));
}


.andromedsaIcon {
  size: 150%; 
  width: 18px;
}


.container-half {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}
  
.left-image {
    grid-area: 1 / 1 / 2 / 1;
}

.right-text-recovery {
  grid-area: 2 / 2;
  background-image: linear-gradient(to bottom, #ccccccc6, #ccccccc6, #ccccccc6, transparent);
  animation-name: bottomToTopFill;
  animation-duration: 2s;
  padding-bottom: 60%;
  animation-delay: 1ms;
}

.left-text-recovery {
  grid-area: 1 / 1;
  background-image: linear-gradient(to top, #ccccccc6, #ccccccc6, #ccccccc6, #ccccccc6, transparent);
  padding-bottom: 20%;
  animation-name: topToBottomFill;
  animation-duration: 2s;
  animation-delay: 1ms;
}

.left-text-recovery p, .right-text-recovery p {
  font-size: 1.5vw;
  color:var(--secondaryTwo);
  line-height: 3vw;
  margin-top: 0%;
  padding: 30% 10% -6% 10% ;
  margin: 8%;
  font-family: 'Lato', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', Verdana, sans-serif;

}

.right-text-recovery ul, .left-text-recovery ul{
  font-size: 1.65vw;
  color:var(--secondaryTwo);
  line-height: 2.5vw;
  margin-top: -8%;
  margin-right: 5%;
  padding-left: 120px;
  font-family: 'Lato', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', Verdana, sans-serif;
}