/* 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." */
   
/*
lighter blue for main bois = #dcfffc
blue = #b1fff8
soft red = #ffb1b8
soft purple = #bab1ff
*/

body {
  background-color: #dcfffc;
  color: black;
  font-family: Verdana;
}

/* Error Page */
.error-body {
  background-color: #dcfffc;
  color: black;
  font-size: 16px;
  font-family: Verdana;
}

.error-h1 {
  color: black;
  font-size: 30px;
  font-family: Verdana;
}

.error-link {
  color: #ffb1b8;
  font-family: Verdana;
}

/* Main page */

/*Banner Home*/
.main-banner {
  background-size: cover;
  top: 25%;
  height: 250px;
  overflow: hidden;
  background-image: URL("https://mistowo.neocities.org/images/cloudheader.jpg");
}

.overlay {
  z-index: 10;
  height: 100%;
  width: 100%;
  text-align: center;
  padding-top: 100px;
  background: rgba(1,77,78,0.4) none no-repeat scroll 0 0;
  background-size: cover;
  overflow: hidden;
}

.overlay:after {
  content: "Mist";
  text-align: center;
  margin: auto;
  top: 50%;
  font-size: 3em;
  font-weight: bold;
  color: #D8FCFF;
text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #00FCFF, 0 0 30px #00FCFF, 0 0 40px #00FCFF, 0 0 55px #00FCFF, 0 0 75px #00FCFF, 2px 2px 2px rgba(0,252,255,0);
}

.container-box {
  width: 80%;
  height: 120%;
  margin: auto;
  left: 15%;
  overflow: hidden;
  outline: 11px groove rgba(25,247,255,0.35);
  outline-offset: 0px;
}

.boxes-items {
  margin: auto;
  width: 100%;
  column-count: 2;
  column-gap: 1;
  padding: 20px 0px;
}

.box {
  width: 70%;
  border: 3px solid #60B4BB;
  border-radius: 2%;
  background-color: #83F5FF;
  -webkit-box-shadow: 0px 0px 27px 4px #000000; 
  box-shadow: 0px 0px 27px 4px #000000;
  height: 140px;
}

.box > h4 {
  text-align: center;
}

.box > p {
  text-align: center;
  margin: 4px;
  padding-bottom: 10px;
}

.about {
  
}

.contact-footer {
  
}

/* Mobile CSS */
@media screen and (max-width: 600px) and (min-width: 300px) {

}


/* Tablet CSS */
@media screen and (max-width: 1200px)  and (min-width: 600px) {

}