/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  font-size: 0.875rem;
  font-family: "Open Sans", sans-serif;
  color: #0D0300;
  background-image: url("https://i.imgur.com/fTnUBMH.jpeg");
	background-size: cover;
	background-attachment: fixed;
  background-position:bottom;
	padding:0;
	margin:0;
  }
  
center {
  text-align:center;
  }
  
/*Some custom fun styling*/
h1, h2, h3 {
  text-align:center;
  font-family: Georgia, serif;
  }

a {
  color: #33c;
  }
  
a:visited {
  color: #226;
  }

blockquote {
  background: #dedeed;
  color: #444;
  font-style: italic;
  border-left: 2px solid #445;
  padding: 0.5em 0.5em 0.5em 1em;
  border-radius: 0 3px 3px 0;
  margin: 1em;
  }
  
/*Get rid to top padding on headers at the very top of a box.*/
.topheader {
  margin-top: 1px;
  }
  
  
/*Container for all major divs*/
.main {
  border: 0px solid #121212;
  position: relative;
  height: 41rem;
  width: 75vw;
  margin: 2.5rem auto 1.5rem auto;
  }
  
.box {
  position: absolute;
  background: #F5EFE4;
  display: inline-block;
  border: 4px solid #1f023b;
  padding: 10px 5px 5px 0;
  bottom: 1rem;
  overflow: hidden;
  box-shadow: 3px 3px rgba(31, 2, 59, 1);
  }
  
.left, .right {
  height: 32.5rem;
  width: 20%;  
  }
  
.left {
  border-radius: 25px 3px 3px 15px;
  left: -50px;
  }

.middle {
  border-radius: 20px 20px 3px 3px;
  height: 40rem;
  width: 60%;
  margin-left:19.4%;
  }
  
.right {
  border-radius: 3px 25px 15px 3px;
  right:-50px;
  }
  
.left .scrollbox, .right .scrollbox {
  height: 32.5rem;
  }
  
.middle .scrollbox {
  height: 40rem;
  }
  
.scrollbox {
  overflow:auto;
  }
  
.inner {
  padding: 1rem 2em 0 1.5em;
  }
  
.inner img {
  max-width: 100%;
  height: auto;
  }

.footer {
  position: absolute;
  width: 100%;
  color: #efefef;
  font-size:0.9em;
  text-align:center;
  font-weight:bold;
  bottom: -1rem;
  margin: 0.5rem auto 0.75rem auto;
  }
  

/*Optional sidebar links*/
.button-link {
  display: block;
  background: #d1b6fc;
  color: #222;
  text-decoration: none;
  margin: 0.75em 0;
  padding: 0.35em 0.5em;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  }
  
.button-link:visited {
  color: #000;
  }
  
.button-link:hover {
  background: #c0c0d0;
  }


/*Nicer-looking resizing for narrower screens.*/
@media(max-width: 1000px) {
  .main {
    width: 82.5vw;
    }
    
  @media(max-width: 850px){
    body {
      font-size: 0.85rem;
      }
    .main {
      height: 91vh;
      width: 92vw;
      margin: 7vh 5vw 1.5vh 5vw;
      }
    .left, .right {
      height: 75vh;
      width: 18.5vw;
      }
    .right {
      right: 0;
      }
    .middle {
      height: 90vh;
      width: 50vw;
      margin-left: 20.5vw;
      }
    .left .scrollbox, .right .scrollbox {
      height: 75vh;
      }
    .middle .scrollbox {
      height: 90vh;
      }
    .footer {
      bottom: -2.5vh;
      margin: 0.25rem auto 0.5rem auto;
      }
    }
  }

/*Resizing for horizontally shorter screens.*/
@media(max-height: 45rem) {
  .main {
    height: 91vh;
    margin-top: 7vh;
    margin-bottom: 1.5vh;
    }
  .middle {
    height: 90vh;
    }
  .left, .right {
    height: 75vh;
    }
  .left .scrollbox, .right .scrollbox {
    height: 75vh;
    }
  .middle .scrollbox {
    height: 90vh;
    }
  .inner {
    padding-top: 0.5em;
    }
  .footer {
    bottom: -2.5vh;
    margin: 0.25rem auto 0.5rem auto;
    }
    
  @media(max-height: 32.5rem) {
    body {
      font-size: 0.825rem;
      }
    .main {
      margin-top: 10vh;
      height: 88vh;
      }
    .middle {
      height: 87vh;
      }
    .left, .right {
      height: 72vh;
      }
    .left .scrollbox, .right .scrollbox {
      height: 72vh;
      }
    .middle .scrollbox {
      height: 87vh;
      }
    .inner {
      padding-top: 0.25rem;
      }
    .footer {
      bottom: -3vh;
      }
    }
  }

/*Mobile layout*/
@media(orientation: portrait) {
    .main, .box, .footer {
      position: relative;
      display: block;
      }
    
    .left, .right, .middle {
      width: 90vw;
      height: auto;
      margin: 0 auto;
      padding-right: 3px;
      }
    
    .left .scrollbox, .right .scrollbox, .middle .scrollbox {
      height: auto;
      max-height: 100%;
      }
      
    .inner {
      padding: 0.75rem 1.5em 0.25em 1.5em;
      }
    
    .left {
      border-radius: 20px 20px 2px 2px;
      margin: 0;
      }
      
    .middle {
      border-radius: 2px;
      margin: 1rem 0;
      }
      
    .right {
      border-radius: 2px 2px 20px 20px;
      margin: 0;
      }
      
    .footer {
      width: auto;
      bottom: 0;
      margin: 0 0 1rem 0;
      padding: 0 1rem;
      }
  
  }
.tab {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: 1rem;
}

.tab {
  overflow: hidden;
  border: 0px solid #ccc;
  background-color: #2D0E54;
  border-radius: 25px 25px 15px 15px;
}


/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  color: #EEE9F5;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #AE86E3;
}

/* Create an active/current tablink class */
.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 0px solid #ccc;
  border-top: none;
}

.chatterOne{
  width: 150px;
  height: 150px;
 position:absolute;
   top:-1%;
   left: 13%;
}

.chatterTwo {
  width: 150px;
  height: 150px;
 position:absolute;
    top:-1%;
    left:77%;
}

audio {
    display:block;
    margin: auto;
 }
 
.copyright {
position: fixed;
  color: #F5EFE4;
  width: 100%;
  right: -44%;
  bottom: -3%;
  font-size:0.9em;
 }