/* Color Palette
Light Purple - #DFA5D9 (Plum (Web))
Dark Purple - #7B516F (Chinese Violet)
Light Green - #AFC9A6 (Celadon)
Dark Green - #3C5F30 (Hunter Green)
Red - #8F0000 (Dark Red)
*/

@font-face { /* fancy titling */
  font-family: "midnights";
  src: url("./Midnights on the Shore.otf?#iefix") format("opentype");
}
@font-face { /* handwriting */
  font-family: "pearlesce";
  src: url("./Pearlesce.otf?#iefix") format("opentype");
}
@font-face { /* main */
  font-family: "oldstyle";
  src: url("./oldstyle.ttf?#iefix") format("truetype");
  font-style:normal;
}
@font-face { /* italic */
  font-family: "oldstyle";
  src: url("./oldstyleitalics.ttf?#iefix") format("truetype");
  font-style:italic;
}

/* bg and text */
body {
  background-image: url("./bg.jpg");
  background-repeat:no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size:cover;
  font-family: "oldstyle";
  font-size:16pt;
}

/* main box. 'tb' for textbox */
#tb {
  background:#fff;
  width:80%;
  margin: 10% auto;
  padding:20px;
  text-indent:25px;
  border-radius:20px;
}

/* headings */
h1 {
  font-family:"midnights";
  font-size:50pt;
  text-align:center;
  width:100%;
}

h2 {
  font-family:"midnights";
  font-size:38pt;
  text-align:center;
  width:100%;
}

/* special handwriting class, pearlesce is compass's handwriting lol */
.handwriting {
  font-family:"pearlesce";
  font-size:20pt;
}


/* regular links */
a {
  text-decoration:none;
  color:#3C5F30;
}
a:hover {
  color:#AFC9A6;
}


/* navigation */
nav { /* this stuff all makes it a header */
  z-index: 99;
  background-color: transparent;
  padding: 6px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  top:0;
  left:0;
  width:100%;
  position:fixed;
}
.navlink { /* way to style divs */
  background-color: #DFA5D9;
  display: block;
  padding: 5px;
  margin: 8px 5px 8px;
  border-radius:10px;
  color: #000;
  text-align:center;
}
.navlink:hover { /* hover color changes */
  background-color:#7B516F;
}
.navlink a { /* link itself */
  text-decoration:none;
  color:#000;
}
.navlink a:hover { /* and when hover link */
  color:#DFA5D9;
}
.currentpage { /* differentiates when actively on a page */
  background-color:#AFC9A6;
  display:block;
  padding: 5px;
  margin: 8px 5px 8px;
  border-radius:10px;
  color: #8F0000;
  text-align:center;
}
#mobilenavbutton { /* for mobile-friendly navigation */
  border-radius:15px;
  background-color:#AFC9A6;
  color:#000;
  width:20px;
  text-align:center;
  position:fixed;
  top:0;
  right:1%;
  z-index:199;
}
#mobilenavbutton:hover {
  background-color:#3C5F30;
  color:#AFC9A6;
}
/* Mobile Navigation */
@media screen and (max-width:600px) {
  nav {
    display:none;
  }
  #mobilenavbutton {
    display:block;
  }
}
@media screen and (min-width:601px) {
  #mobilenavbutton {
    display:none;
  }
  nav {
    display: flex;
  }
}

/* Credits styling */
.creds { /* overall list, make each item a header */
  font-weight:bold;
  text-indent:0;
  list-style:none;
  font-family:"pearlesce";
  font-size:30pt;
  margin:0;
  padding:0;
  text-align:center;
}
.increds { /* short for 'inner credits' */
  font-weight:normal;
  font-family:"oldstyle";
  font-size:16pt;
  margin:0;
  padding:0;
  list-style-position:inside;
}
.increds a {
  text-decoration:none;
  color:#7B516F;
}
.increds a:hover {
  color:#DFA5D9;
}

/* Inventory */
#locket, #compass, #inkit, #notebook, #comaps, #firstaid, #twine, #sewingkit, #sextant, #glasses, #hat, #sunscreen { /* things all the items will share */
  display:flex;
  justify-content:center;
  align-items:center;
  align-content:center;
  text-align:center;
  width:150px;
  height:150px;
  overflow:hidden;
  position:absolute;
}
#locket {
  background: url("./inventory/locket.png");
}
#compass {
  background: url("./inventory/compass.png");
}
#inkit {
  background: url("./inventory/kit.png");
}
#notebook {
  background: url("./inventory/notebook.png");
}
#comaps {
  background: url("./inventory/maps.png");
}
#firstaid {
  background: url("./inventory/firstaid.png");
}
#twine {
  background: url("./inventory/twine.png");
}
#sewingkit {
  background: url("./inventory/sewing.png");
}
#sextant {
  background: url("./inventory/sextant.png");
}
#glasses {
  background: url("./inventory/sunglasses.png");
}
#hat {
  background: url("./inventory/sunhat.png");
}
#sunscreen {
  background: url("./inventory/sunscreen.png");
}
#locket span, #compass span, #inkit span, #notebook span, #comaps span, #firstaid span, #twine span, #sewingkit span, #sextant span, #glasses span, #hat span, #sunscreen span { /* hide the inner text */
  display:none;
}
#locket:hover, #compass:hover, #inkit:hover, #notebook:hover, #comaps:hover, #firstaid:hover, #twine:hover, #sewingkit:hover, #sextant:hover, #glasses:hover, #hat:hover, #sunscreen:hover {
  background-color:#eee;
  border-radius:15px;
}
.hovertxt { /* the inner label, 'hovertxt' */
  background:rgba(255,255,255,0.8);
  padding:5px;
  width:150px;
  height:150px;
  overflow:auto;
  text-indent:0;
  display:flex;
  justify-content:center;
  align-items:center;
  align-content:center;
  text-align:center;
}
@media screen and (max-width:600px) { /* position them on mobile devices */
  .ninjatext { /* hidden ps for mobile to have white bg */
    visibility:hidden;
    display:block;
  }
  #locket {
    top:10em;
    left:1em;
  }
  #compass {
    top:11em;
    left:8em;
  }
  #inkit {
    top:20em;
    left:1em;
  }
  #notebook {
    top:18em;
    left:7.5em;
  }
  #comaps {
    top:26.5em;
    left:7em;
  }
  #firstaid {
    top: 30em;
    left:1em;
  }
  #twine {
    top:38em;
    left:0.5em;
  }
  #sewingkit {
    top:36em;
    left:7.25em;
  }
  #sextant {
    top:45em;
    left:6em;
  }
  #glasses {
    top:54em;
    left:1em;
  }
  #hat {
    top:53em;
    left:7.25em;
  }
  #sunscreen {
    top:62em;
    left:4em;
  }
}
@media screen and (min-width:601px) { /* position them on desktops */
.ninjatext { /* hidden ps for mobile to have white bg */
    display:none;
  }
  #locket {
    top:12em;
    left:10em;
  }
  #compass {
    top:15em;
    left:20em;
  }
  #inkit {
    top:23em;
    left:20em;
  }
  #notebook {
    top:25em;
    left:30em;
  }
  #comaps {
    top:20em;
    left:40em;
  }
  #firstaid {
    top:16em;
    left:32em;
  }
  #twine {
    top:21em;
    left:8em;
  }
  #sewingkit {
    top:13em;
    left:43em;
  }
  #sextant {
    top:30em;
    left:11em;
  }
  #glasses {
    top:27em;
    left:40em;
  }
  #hat {
    top:32em;
    left:21em;
  }
  #sunscreen {
    top:32.5em;
    left:33em;
  }
}