/* 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." */

@font-face {
 font-family: 'FaunaOne';
 src: url('/FaunaOne-Regular.ttf') format('truetype');
  }
  
@font-face {
 font-family: 'Tektur';
 src: url('/Tektur.ttf') format('truetype');
  }

body {
  background-color: mediumseagreen;
  color: black;
  font-family: Verdana;
  margin: 0;
  margin-top: 5px;
}

h1,
h2 {
  text-align: center;
  font-family: 'FaunaOne', Verdana, sans-serif;
  }
  
 h1 {
  padding: 10px;
  margin: 0 auto;
  border: 5px double black;
  width: 500px;
  }

/* applies to main div of all pages */
.bodytext {
  background-color: #a0debb;
  width: 1000px;
  padding: 40px 100px;
  margin: 30px auto;
  border-radius: 15px;
  font-size: 15px;
}

/* start navbar section */

/* messing with anything in the class below might screw up the banner */
.navbar {
  text-align: center;
  background-image: url('/navbanner.png');
  height: auto;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 60px;
  margin: 0;
  }

.navbar a {
  background-color: darkcyan;
  padding: 10px 15px;
  margin: 10px;
  border-radius: 15px;
  color: white;
  text-decoration: none;
  font-size: 24px;
  font-family: 'Tektur', Verdana, sans-serif;
  font-weight: bolder;
  display: inline-block;
}

.navbar a:hover {
  background-color: turquoise;
  color:white;
  }
  
/* end navbar section */
  
a {
  color: darkcyan;
  }  
  
a:hover {
  color: mintcream;
  }
  
/* #mailpage applies to the entire primary div of the contact page */  
#mailpage {
  text-align: center;
  width: 500px;
  }

/* used only for Weird World atm but can be applied anywhere */
.updatedate {
  color: gray;
  text-align: center;
  }
  
/* start Weird World specific styling */

/* spotlight box only */  
.featured h2 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 26px;
  }

/* spotlight box only */
.featurebox {
  border: 5px double black;
  margin: 30px;
  padding: 10px;
  }
  
/* allows text to wrap around images and fill the container width once the image ends */  
.imgcapt {
  float: right;
  width: 200px;
  margin: 10px;
  }

/* image captions */  
.imgcapt p {
  background-color: white;
  font-size: 10px;
  margin-top: 0px;
  }
  
/* end Weird World specific styling */