@charset "utf-8";
/* CSS Document */

body {
  background-color: white;
  margin: initial;
}


.nav-bar {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-template-rows: auto;
  grid-column-gap: 10px;
  width: 300px;
  background-color: white;
  cursor: pointer;
  padding-top: 10px;
}

.nav-bar div {width: 60px; text-align:center }

.home-icon { grid-area: 1 / 1 / 2 / -5; }
.bio-icon { grid-area: 1 / 2 / 2 / 3; }
.hunts-icon { grid-area: 1 / 3 / 2 / 4; }
.terms-icon { grid-area: 1 / 4 / 2 / 5; }
.div5 { grid-area: 1 / 5 / 2 / 6; }

.nav-bar img { width : 40px; opacity: 0.5 }
.nav-bar img:hover, .nav-bar p:hover { opacity: 1 }

.intro-pic-panel {
  display : block;
  position : relative;
}

.intro-pic-panel img {width : 100%}

.middle-panels {
  position : relative;
  display: block;  
 
  background: #917253;
  background: radial-gradient(circle, rgba(145, 114, 83, 1) 0%, rgba(173, 128, 68, 1) 49%, rgba(181, 146, 103, 1) 91%);
  border-radius: 20px;
}

.bottom-panel {display:block; text-align: center}
.bottom-panel p {font-size: 12px}

button {
  border: none;
  border-radius: 5px;
  background-color: rgba(0,0,0,0.5);
  color: white;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  cursor: pointer;
}

button:hover { background-color: black }

a {
  text-decoration: none;
  color : rgba(0, 0, 0, 0.8); 
  font-size: 14px;
}

.title {
  font-family: Betterlett;
  font-size: 60px;
  color : rgba(255, 235, 173, 1);
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

div, p, dt, dd {
  font-family: Altehaas;
  color : rgba(0, 0, 0, 0.8);
  font-size: 18px;
  line-height: 22px; 
  margin-bottom: 10px;
}


dt { color : rgba(255, 235, 173, 0.75) }

dd {
  margin-left: 20px;
  cursor: pointer;
  font-size: 16px;
  line-height: 20px; 
}

/* Terms and Conditions */
.term {
  font-size: 16px;
  font-weight: bold;
}
.conditions {
  font-size: 14px; 
  text-indent: each-line;
  margin-left: 20px
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 0.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.div-fade {
  transition: opacity 0.4s ease-in;
}

.fadeOut { opacity: 0; }
.fadeIn { opacity: 1; }

@font-face {
  font-family: Neuvetica-Thin; 
  font-weight: normal;	 
  src: url('../fonts/Neuvetica-Thin.woff'),
       url('../fonts/Neuvetica-Thin.woff2');
}

@font-face {
  font-family: Neuvetica-Medium; 
  font-weight: normal;	 
  src: url('../fonts/Neuvetica-Medium.woff'),
       url('../fonts/Neuvetica-Medium.woff2');
}

@font-face {
  font-family: Neuvetica-Bold; 
  font-weight: normal;	 
  src: url('../fonts/Neuvetica-Bold.woff'),
       url('../fonts/Neuvetica-Bold.woff2');
}

@font-face {
  font-family: Altehaas; 
  font-weight: normal;	 
  src: url('../fonts/Altehaas.woff'),
       url('../fonts/Altehaas.woff2');
}

@font-face {
  font-family: Betterlett; 
  font-weight: normal;	 
  src: url('../fonts/Betterlett.woff'),
       url('../fonts/Betterlett.woff2');
}