body {
  margin: 0;
  padding: 0;
  background-color: #826f7b;
  transition: background-color 0.3s ease-in-out;

  font-family: "meno-display", serif;
  font-weight: 400;
  font-style: normal;

  cursor: url('images/cursor-green.png') 2 2, auto;
}
a {
  cursor: url('images/glove-cursor-1.png') 2 2, auto;
}
#page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}
#background-img {
  position: absolute;
  height: 100%;
  width: 100%;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}
#sleep-heals {
  position: absolute;
  top: -6%;
  height: 42%;
  z-index: 10;
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}
/* @media only screen and (max-width: 600px) {
  #sleepHeals {
    height: 20%;
  }
  #page-container {
    background-color: black;
    z-index: 10;
  }
} */
#grid-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  height: 100%;
  width: 100%;
}
.row {
  height: 33%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mid {
  height: 34%;
  padding-left: 2%;
  padding-right: 2%;
}
.top {
  padding-left: 10%;
  padding-right: 10%;
}
.bot {
  padding-left: 5%;
  padding-right: 5%;
}
.text-box {
  width: 27%;
  height: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-link {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.top .text-box, .bot .text-box {
  width: 33%;
}
.text-img {
  transition: opacity 1.5s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 4;
  width: 70%;
}
.text-img.show {
  opacity: 0.8;
  visibility: visible;
}
#focus {
  width: 65%;
}
#immunity {
  width: 83%;
}
#creativity {
  width: 75%;
}
#memory {
  width: 65%;
}
#metabolism {
  width: 78%;
}
#sun-container {
  margin-top: 5%;
  position: absolute;
  width: 50%;
  padding-bottom: 50%;
}
#eye-highlights {
  position: absolute;
  width: 100%;
  z-index: 3;
  display: block;
}
#eye-highlights.hidden {
  display: none;
}
#sclera {
  position: absolute;
  width: 100%;
  z-index: 0;
}
#left-hand {
  position: absolute;
  width: 100%;
  z-index: 5;
  animation: float-left 2s infinite ease-in-out;
}
#left-hand.hidden {
  display: none;
}
#right-hand {
  position: absolute;
  width: 100%;
  z-index: 5;
  animation: float-right 2s infinite ease-in-out;
}
#right-hand.hidden {
  display: none;
}
#sun {
  position: absolute;
  width: 100%;
  z-index: 2;
}
@keyframes float-left {
  0% { transform: translate(0, 0); }
  25% { transform: translate(3px, -3px); }
  50% { transform: translate(0, -5px); }
  75% { transform: translate(-3px, -3px); }
  100% { transform: translate(0, 0); }
}
@keyframes float-right {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3px, -3px); }
  50% { transform: translate(0, -5px); }
  75% { transform: translate(3px, -3px); }
  100% { transform: translate(0, 0); }
}
.eyes {
  position: absolute;
  top: 48.5%;
  left: 38%;
  width: 24%;
  height: 5%;
  display: flex;
  justify-content: space-between;
}
.eye {
  position: relative;
  width: 29%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pupil {
  position: absolute;
  width: 65%;
  height: 85%;
  z-index: 1;
}
#txt-btn {
  position: absolute;
  width: 21%;
  top: 34%;
  left: 40%;
  z-index: 6;
  cursor: url('images/glove-cursor-1.png') 2 2, auto;
}
#txt-btn.sleep {
  width: 21%;
  top: 34%;
  left: 40%;
}
#txt-btn.wake {
  width: 19%;
  top: 34%;
  left: 40%;
}