* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*    Custom Scroll Bar    */

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: black;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: lightblue;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(93, 196, 236);
}

/*
    prevents caret from appearing in chrome
    when non-input elements are clicked on 
*/
*:not(input) {
  cursor: default;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
}

@font-face {
  font-family: Kurale;
  font-weight: 400;
  font-style: normal;
  src: url("../resources/Kurale-Regular.ttf");
}

/* 
    The Grid's Parent Container - 
     full width of browser 
*/
body {
  background-color: var(--backgroung-color);
  width: 100%;
  font-family: kurale;
  --fade: 0.5s;
  padding: 2vw;
  overflow: hidden;

  --backgroung-color: #fbfbef;
  --text-color: #444;
  transition: background-color .3s, color .3s;
}

/* set outer colors */
body.dark {
  --backgroung-color: black;
  --text-color: rgb(253, 246, 201);
  font-family: kurale;

}

/* 
    Intro
*/
#intro {
  position: absolute;
  color: gold;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  font-weight: 700;
  z-index: 100;
  transition: opacity 0.4s;
}

#intro .content {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5vw;
}

#intro p {
  white-space: nowrap;
}

#intro .first-continue-btn-container {
  width: 100%;
  text-align: center;
  margin-top: 5vw;
  height: 5vw;
  font-size: 3vw;
}

#intro .first-continue-btn-container img {
  height: 100%;
}

#intro .first-continue-btn {
  background-color: transparent;
  color: gold;
  border: none;
  outline: none;
  font-weight: 700;
  font-size: 2.5vw;
  cursor: pointer;
}

/* 
Create A Grid: 
10 rows      20 columns
*/

.mainBox {
  display: grid;
  width: 100%;
  grid-template: repeat(10, 1fr) / repeat(20, 1fr);
  margin: 0 auto 0px;
}

/*  Back-ground image is set, but not as back-ground - no z-index yet */
.island {
  grid-area: 1 / 1 / 11 / 21;
  background: url("../resources/img/Island.jpg") no-repeat;
  background-size: cover;
  flex-shrink: 1;
  width: 100%;
  height: 47vw;
  border-radius: 25% 10vw;
  overflow: hidden;
}

/*                      First Text - Opening Scenario   z-index: 5; */

#paragraph {
  grid-area: 3 / 5 / span 5 / span 9;
  font-size: 1.3vw;
  font-weight: 700;
  width: fit-content;
  min-width: 20vw;
  height: fit-content;
  align-self: flex-start;
  justify-self: center;
  text-align: center;
  border-radius: 3vw;
  padding: 1vw;

  background-color: rgb(239, 250, 187, 0.6);
  box-shadow: 0 0 2vw 2vw rgb(239, 250, 187, 0.6);
  transition-duration: 0.2s;
  opacity: 0;
}

/*          button1 = continue      button2 = index page         */
.buttons {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 0.5vw;
}

.button1,
.button2 {
  width: fit-content;
}

.button1,
.button2 {
  z-index: 20;
  font-size: 1.5vw;
}

aj-input {
  position: relative;
  top: 1vw;
}

/*                      Waving Hello   -   z=index: 7;         */
.monkey {
  grid-area: 8 / 9 / span 5 / span 2;
  width: 75%;
  height: auto;
  z-index: 9;
  align-self: center;
  justify-self: center;
  border-radius: 20%;
  transform: translateY(-1vw);
  transition: transform 2s;
}

/*                      Sound controls  (music / waves)         */

#waves {
  grid-area: 8 / 1 / span 1 / span 17;
  position: relative;
  transform: translateY(0.5vw);
  z-index: 6;
  cursor: pointer;
  /* background-color: grey; */
}

#radio {
  grid-area: 8 / 11 / span 2 / span 3;
  width: 5vw;
  transform: translateY(1vw);
  transition: transform 2s 0.3s;
  align-self: flex-end;
  cursor: pointer;
  z-index: 10;
}

#radioStation {
  grid-area: 8 / 9 / span 3 / span 5;
  display: flex;
  transform: translateY(-1.3vw);
  transition: transform 2s 0.3s;
  margin-bottom: 0.7vw;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4vw;
  font-weight: 700;
  z-index: 9;

  justify-content: center;
  align-self: center;
  text-align: center;
}

#radioStation div {
  width: fit-content;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 3px 0 0;
  width: 60px;
  border-radius: 5px;
}

#oceanSoundsStatus {
  position: absolute;
  display: none;
  color: black;
  margin: auto;
  font-weight: 700;
  font-size: 1.4vw;
  box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.7);
  line-height: 1;
  padding: 0.3vw 0.4vw;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 0.7vw;
  letter-spacing: 0.1vw;
  z-index: 99;
}

.displayNone {
  display: none;
}

#grind_the-movie {
  grid-area: 7 / 13 / span 3 / span 4;
  width: 52%;
  height: auto;
  z-index: 5;
  align-self: center;
  transition: opacity 10s;
  display: none;
  opacity: 0;
}

.theGuys {
  grid-area: 6 / 1 / span 5 / span 4;
  position: relative;
  border-radius: 0 0 0 10vw;
  overflow: hidden;
}

.guys {
  position: absolute;
  z-index: 9;
  width: 40%;
  opacity: 0;
  transition-duration: 2s;
  left: -7vw;
}

.extraText {
  grid-area: 9 / 3 / span 2 / span 14;
  display: flex;
  flex-flow: column;
  font-size: 2vw;
  font-weight: 700;
  font-style: italic;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1vw;
}

.extraText p {
  white-space: nowrap;
}

.treasure {
  grid-area: 8 / 1 / span 3 / span 4;
  width: 35%;
  height: auto;
  z-index: 5;
  opacity: 0;
  align-self: center;
  justify-self: center;
  z-index: 99;
  transform: rotateY(180deg);
}

.ghost_ship {
  grid-area: 6 / 4 / 10 / span 2;
  width: 60%;
  align-self: center;
  transform: translateY(-1vw);
  opacity: 0;
  z-index: 7;
}

.plane {
  grid-area: 3 / 1 / span 2 / span 3;
  width: 50%;
  align-self: center;
  justify-self: center;
}

.jumboJet {
  grid-area: 5 / 14 / span 2 / span 3;
  width: 40%;
  align-self: flex-end;
  justify-self: center;
}

.spaceShip {
  grid-area: 1 / 10 / span 1 / span 2;
  width: 50%;
  align-self: center;
  justify-self: center;
}

.cruise_ship {
  grid-area: 8 / 1 / span 2 / span 20;
  position: relative;
  width: 7%;
  top: -1vw;
  align-items: flex-end;
  left: 75vw;
  z-index: 4;
  transition: transform 10s linear;
}

.coco1 {
  grid-area: 9 / 16 / span 1 / span 2;
  width: 29%;
  align-self: center;
  justify-self: end;
}

.coco2 {
  grid-area: 10 / 17 / 10 / span 2;
  width: 39%;
  align-self: flex-start;
}

.coco3 {
  grid-area: 8 / 16 / span 3 / span 2;
  width: 22%;
  padding-bottom: 1vw;
  align-self: center;
  z-index: 99;
}

.hiddenItems {
  opacity: 0;
  transition-duration: var(--fade);
}

.coco4 {
  /*    in the top tree    */
  grid-area: 1 / 19 / span 8 / span 1;
  position: relative;
  align-self: start;
  justify-self: start;
  width: 60%;
  transition: transform 1s ease-in, opacity var(--fade);
  cursor: pointer;
}

#monk1Bubble {
  grid-area: 6 / 10 / span 4 / span 2;
  width: 100%;
  align-self: center;
  opacity: 0;
  display: none;
  z-index: 5;
  transform: translateY(-1vw);
  transition-duration: opacity 1.3s;
}

#monk1Text {
  grid-area: 7 / 10 / span 2 / span 2;
  align-self: center;
  text-align: center;
  font-size: 1.4vw;
  line-height: 1;
  z-index: 5;
  opacity: 0;
  display: none;
  transform: translateY(-1vw);
  transition-duration: opacity 1.3s;
  color: white;
}

.myFriend,
.theBitterTruth {
  font-size: 16px;
  text-align: left;
  color: var(--text-color);
  top: 1000px;
  display: none;
  opacity: 0;
  transition: opacity 0.4s;
  max-width: 600px;
  margin: auto;
  padding: 20px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.dark .myFriend,
.dark .theBitterTruth {
  font-family: Kurale;
}

#modeBtn {
  position: absolute;
  width: 25px;
  filter: invert(0);
  top: 1.5vw;
  left: 1.5vw;
  cursor: pointer;
}

.dark #modeBtn {
  filter: invert(1)
}

@media screen and (max-width: 500px) {
  .myFriend,
  .theBitterTruth {
    font-size: 3.2vw;
    top: 200vw;
    max-width: 120vw;
    padding: 4vw;
  }

  #modeBtn {
    width: 5vw;
  }
}