/*
Color Palette -
Alabaster: #F1F2EB (off-white)
Light Green: #A2DE7D
SGBUS Green: #7EDE68 (bright green)
Spring Green: #10E585 (blue green)
Pale Azure: #85DEFF (off-sky blue)
Ruddy Blue: #74A8D2 (neutral blue)
*/

/* Establish fonts */
@font-face {
  font-family:"Cthulu"; /* this name will be called over & over again, so I make it shorter than the actual name of the font */
  src: url("./fonts/Cthulhu's Calling.otf"); /* url where it's stored. here, all fonts are in a dedicated 'fonts' folder */
}
@font-face {
  font-family:"Murder";
  src: url("./fonts/Murder on 17th St.otf");
}
@font-face {
  font-family:"Primal";
  src: url("./fonts/Primal Dream.otf");
}
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap'); /* body font */

/* The background */
body {
  background-color: #000;
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position: center;
  background-size: cover;
  font-family: "Cormorant";
  font-size:12pt;
}

/* main div */
#mainbox {
  width: 70%;
  margin: 0 auto;
  color:#fff;
  text-indent:35px;
  background: rgba(0,0,0,0.6);
  padding:20px;
  border-radius:15px;
}

/* headers */
h1 {
  font-family:"Cthulu";
  font-size: 50pt;
  width:100%;
  text-align:center;
  margin-bottom:-5%;
  margin-top:-1%;
}
h2 {
  font-family:"Murder";
  font-size: 40pt;
  width:100%;
  text-align:center;
  margin-bottom:-2%;
}
h3 {
  font-family:"Primal";
  font-size: 20pt;
  width:100%;
  text-align:center;
  color:#7EDE68;
}

/* bold, italic, underline, strikethrough */
b {
  color: #7EDE68;
  font-weight:bold;
}
i {
  color: #7EDE68;
  font-style:italic;
}
u {
  color: #7EDE68;
  text-decoration:underline;
}
s {
  color: #7EDE68;
  text-decoration: line-through;
}

/* ...the devouring forest... */
.forest {
  font-weight:bold;
  background-size: 100vw 100vw;
  background: repeating-linear-gradient(90deg, #A9C19A 0%, #A2DE7D 25%, #7EDE68 50%, #A9C19A 75%);
  -webkit-animation: 'slide' 60s infinite linear forwards;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
@keyframes slide {
  0% { background-position-x: 0%; }
  100% { background-position-x: 200vw; }
}

/* links */
a, a:visited {
  color:#10E585;
  text-decoration:none;
}
a:hover,a:active {
  color:#F1F2EB;
}
a::before {
  content:"↨"
}

/* navigation */
nav{
  z-index: 99;
  background:none;
  position: fixed;
  padding: 10px;
  height: 100%;
  width: 10%;
}

.navlink{
  display: block;
  padding: 5px;
  margin: 8px 5px 8px;
  text-align:center;
  color: #10E585;
}

.navlink a {
  color: #10E585;
  text-decoration:none;
}
.navlink a::before {
  content: "" !important;
}
.navlink a:hover {
  color:#F1F2EB;
}

.currentpage { /* disable the navigation link to the current page and make it look difference */
  color:#fff;
  display: block;
  padding: 5px;
  margin: 8px 5px 8px;
  text-align:center;
  font-weight:bold;
}

#escaperoutes { /* navigation titling */
  color: #7EDE68;
  text-decoration:none;
  margin: 0 auto;
  text-align:center;
  font-family: "Primal";
  font-size:14pt;
  border-top: 1px solid #A2DE7D;
}

/* mobile nav */
@media screen and (max-width:600px) {
  #mobilenavbutton { /* give styling to the mobile button */
    display:block;
    z-index: 99;
    background: none;
    color:#7EDE68;
    position: fixed;
    padding: 3%;
    left:0;
    top:0;
    text-align:center;
    font-family: cthulu;
    font-size: 14pt;
    border:none;
  }
  #mobilenavbutton:hover {
    color:#7DE2D1;
  }
  nav { /* hide the navigation and give it a background + overlay all content */
    display:none;
    background:#000;
    width:100%;
    z-index:10;
  }
  #playlistholder { /* this isn't navigation, it's just for the spotify embedded playlist, to make it not so wide on desktop but appropriately wide on mobile */
    width:100%;
  }
}
@media screen and (min-width:601px) {
  #mobilenavbutton { /* hide the small button on desktop */
    display:none;
  }
  #playlistholder { /* this isn't navigation, it's just for the spotify embedded playlist, to make it not so wide on desktop but appropriately wide on mobile */
    width:50%;
    margin: 0 auto;
  }
}