/* -------------------------------------------------------------------------- */
/*                                    fonts                                   */
/* -------------------------------------------------------------------------- */

/* main text */
/* font-family: 'Almarai', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700&display=swap');

/* landing headline */
/* font-family: 'Advent Pro', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:wght@700&display=swap');


/* modal titles */
/* font-family: 'Akshar', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@400;500;600&display=swap');

/* scrolls */
/* font-family: 'Alex Brush', cursive; */
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');



/* -------------------------------------------------------------------------- */
/*                                global styles                               */
/* -------------------------------------------------------------------------- */

:root {
  font-family: 'Almarai', sans-serif;
  --main: #211e4e;
  --btnBlue: #4065b0;
}

body {
  background: rgb(66, 66, 66);
  padding: 0;
  margin: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

/* helper classes */
.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.transparent {
  opacity: 0;
}

.hidden {
  display: none !important;
}

.adjuster {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid yellow;
}



/* -------------------------------------------------------------------------- */
/*                                landing page                                */
/* -------------------------------------------------------------------------- */

/* loading overlay */
.menuLoading {
  font-family: 'Almarai', sans-serif;
}

#loader {
  border: 12px solid #f3f3f3;
  border-radius: 50%;
  border-top: 12px solid #444444;
  width: 70px;
  height: 70px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
      transform: rotate(360deg);
  }
}


/* landing content */

#startMenu {
  height: 40%;
  width: 50%;
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#landing {
  width: 100vw;
  height: 100vh;
  background-color: #95daf8;
  position: absolute;
  z-index: 9;
  font-family: 'Advent Pro', sans-serif;
}

#homeImg {
  height: 100vh;
}

#homeCloud1 {
  width: 15vw;
  animation: homeCloud1 45s linear infinite;
}

#homeCloud2 {
  width: 15vw;
  animation: homeCloud2 60s linear infinite;
}


@keyframes homeCloud1 {
  from {
    transform: translateX(-60vw);
  }
  to {
    transform: translateX(60vw);
  }
}

@keyframes homeCloud2 {
  from {
    transform: translate(60vw, -30vh);
  }
  to {
    transform: translate(-60vw, -30vh);
  }
}

.menuFinished {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  color: var(--main);
  margin-top: -15vh;
}

.menuFinished h1 {
  font-size: 80px;
  margin-bottom: 0;
}

.menuFinished h2 {
  font-size: 35px;
  display: flex;
  justify-content: center;
}

#enter {
  width: 155px;
  height: 45px;
  background-color: var(--btnBlue);
  border-radius: 3px;
  margin: auto;
  display: flex;
  justify-content: center;
  margin-top: 50px;
  
  color: white;
  font-family: 'Almarai', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
}

#enter p {
  margin: auto;
}

.sun {
  height: 200px;
  width: 200px;
  background-color: #ecb432;
  border-radius: 50%;
  position: absolute;
  top: 20%;
  left: 20%;
  filter: drop-shadow(0 0 2.75rem rgb(255, 204, 0));
}


/* -------------------------------------------------------------------------- */
/*                                 energy bar                                 */
/* -------------------------------------------------------------------------- */

.energy {
  --progress: 0%;
  top: 5%;
  right: 15%;
  position: absolute;
  width: 140px;
  height: 20px;
  border: 1px solid #fff;
  border-radius: 40px;
  padding: 0.4vh;
  box-shadow: 0 0 5px #aaa;
}

.energy .energybar {
  width: var(--progress);
  height: 100%;
  background: linear-gradient(gold, #c85, gold);
  background-repeat: repeat;
  border-radius: 40px;
  box-shadow: 0 0 5px 0px orange;
}

#lightning {
  width: 70px;
  top: -100%;
  left: -20%;
  position: absolute;
  filter: drop-shadow(0 0 0.25rem rgb(0, 0, 0));
}

.xp {
  top: 5%;
  right: 5%;
  position: absolute;
  width: 140px;
  height: 24px;
  border: 1px solid #fff;
  border-radius: 40px;
  padding: 2px;
  box-shadow: 0 0 5px #aaa;
}


.xp .xpbar {
  width: 100%;
  height: 100%;
  background-color: var(--btnBlue);
  border-radius: 40px;
  box-shadow: 0 0 5px 0px var(--btnBlue);
}

.xpCount {
  padding: none;
  margin: 0;
  position: absolute;
  left: 45%;
  top: 20%;
  color: white;
}

#xpIcon {
  width: 70px;
  top: -50%;
  left: -20%;
  position: absolute;
  filter: drop-shadow(0 0 0.25rem rgb(0, 0, 0));
}

.loading {
  animation: shine 4s ease-in infinite, end 1s ease-out 1 4s;
  transition: width 2s ease 2s;
}

.playing {
  animation: shine 4s ease-in infinite, end 1s ease-out 1 4s;
}

@property --progress {
  syntax: "<length>";
  initial-value: 0%;
  inherits: true;
}

@keyframes shine {
  0% {
      background-position: 0 0;
  }

  100% {
      background-position: 0 50px;
  }
}

@keyframes end {
  0%, 100% {
      box-shadow: 0 0 10px 0px orange;
  }

  50% {
      box-shadow: 0 0 15px 5px orange;
  }
}


/* -------------------------------------------------------------------------- */
/*                               right side bar                               */
/* -------------------------------------------------------------------------- */

.right_bar {
  position: absolute;
  right: 5%;
  bottom: 8%;
}

.help-btn {
  width: 120px;
  cursor: pointer;
  display: block;
  margin-top: 70px;
}

.help-btn img {
  width: 100%;
  height: 100%;
}

#backpack-icon {
  width: 120px;
  cursor: pointer;
  display: block;
}



/* -------------------------------------------------------------------------- */
/*                                    cave                                    */
/* -------------------------------------------------------------------------- */
.cave {
  z-index: 2;
  max-width: 1920px;
  max-height: 1080px;
  width: auto;
  height: auto;
}

.cave_entrance {
  top: 35%;
  left: 8%;
  position: absolute;
  justify-content: center;
  width: 200px;
  height: 200px;
}

#cave_entrance {
  width: 200px;
  height: 200px;
}

.enter-text {
  top: 40%;
  left: 28%;
  position: absolute;
  color: #f3f3f3;
  cursor: pointer;
}

.glow {
  filter: drop-shadow(0 0 1.75rem rgb(233, 232, 228));
  cursor: pointer;
}

.cave_inside {
  width: 1920px;
  max-height: 1080px;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cave_inside {
  top: 0%;
  left: 0%;
  position: absolute;
  width: 100%;
  height: 100%;
}

.screen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
}

.screen img {
  max-width: 100%;
}

.screenRollIn {
  animation: rollIn 2s linear;
}

@keyframes rollIn {
  from {
    transform: translate(-50%, -300%);
  }
  to {
    transform: translate(-50%, -70%);
  }
}

.screenRollOut {
  animation: rollOut 2s linear;
}

@keyframes rollOut {
  from {
    transform: translate(-50%, -70%);
  }
  to {
    transform: translate(-50%, -300%);
  }
}

.cave_example {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 505px;
  transform: translate(-50%, -80%);
  overflow: hidden;
}

#cave_example1 {
  background-image: url(assets/example1.png);
  background-size: cover;
}
#cave_example2 {
  background-image: url(assets/example2.png);
  background-size: cover;
}

.exampleBackground {
  width: 100%;
}

.ad1 {
  background-color: white;
  width: 30%;
  height: 35%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10%;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.closeAd1 {
  position: absolute;
  top: 7%;
  right: 5%;
  font-weight: 700;
  font-size: 22px;
  cursor: pointer;  
}

.ad2 {
  position: absolute;
  width: 40%;
  height: 45%;
  bottom: 0%;
  right: 0%;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.ad2 img {
  position: absolute;
  top: 0%;
  right: 0%;
  width: 100%;
}

.closeAd2 {
  position: absolute;
  top: 2%;
  left: 2%;
  color: #6e6e6e;
  font-weight: 700;
  cursor: pointer;
}

.ad3 {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff60;
}

.ad3content {
  background-color: white;
  width: 300px;
  height: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10%;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.closeAd3 {
  position: absolute;
  top: 7%;
  right: 5%;
  font-weight: 700;
  font-size: 22px;
  cursor: pointer;  
}


.cavePopUp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(to bottom, #524C58 0%,#352F3B 100%);
  min-height: 300px; 
  width: 600px;
  border-radius: 20px;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

.popUpContent {
  margin: 30px;
  background-color: #352F3B;
  color: white;
  font-size: 21px;
  font-weight: 700;
  padding: 15px 30px;
  border-radius: 20px;
}


.cavePopCloseBtn {
  width: 155px;
  height: 45px;
  background-color: white;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 40px;

  color: #352F3B;
  font-family: 'Almarai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
}

.cavePopCloseBtn p {
  margin: auto;
}
.mntPopUp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(to bottom, #5986C5 0%,#4065B0 100%);
  min-height: 200px; 
  width: 500px;
  border-radius: 20px;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

.mntPopUpContent {
  margin: 30px;
  background-color: #3359A5;
  color: white;
  font-size: 21px;
  font-weight: 700;
  padding: 15px 30px;
  border-radius: 20px;
}




.mntPopCloseBtn {
  width: 45px;
  height: 45px;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-content: center;
  position: absolute;
  top: 0%;
  right: 3%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 40px;

  color: white;
  font-family: 'Almarai', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
}

.mntPopCloseBtn p {
  margin: auto;
}

.mntPopHeadline {
  font-family: 'Akshar', sans-serif;
  font-size: 40px;
  text-align: center;
  text-shadow: 1px 1px 1px #3359A5, -1px -1px 1px #3359A5, 1px -1px 1px #3359A5, -1px 1px 1px #3359A5;
  color: white;
}

.mntPopBtn1 {
  width: 155px;
  height: 45px;
  background-color: white;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 40px;

  color: #211e4e;
  font-family: 'Almarai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
}
.mntPopBtn2 {
  width: 155px;
  height: 45px;
  background-color: #3359A5;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 40px;

  color: white;
  font-family: 'Almarai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mntPopDivider {
  display: flex;
  align-items: center; 
  justify-content: center; 
  color: white;
}

#cart {
  bottom: 5%;
  right: 50%;
  position: absolute;
  transform: translateX(50%);
  width: auto;
}

.cart-driving-in {
  transform: translateX(50%);
  animation: drive-in 3s ease-out;
}

@keyframes drive-in {
  from {
    transform: translateX(250%);
  }
  to {
    transform: translateX(50%);
  }
}

.cart-driving-out {
  transform: translateX(-250%);
  animation: drive-out 2s ease-in;
}

@keyframes drive-out {
  from {
    transform: translateX(50%);
  }
  to {
    transform: translateX(-250%);
  }
}

.cartOverlay {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

#cartArr1 {
  position: absolute;
  top: 5%;
  left: 35%;
  width: 80px;
}

#cartArr2 {
  position: absolute;
  top: -8%;
  left: 30%;
  width: 120px;
}

.cartText1, .cartText2 {
  font-size: 20px;
  font-weight: 700;
  color: white;
  text-decoration: underline;
}

.cartText1 {
  position: absolute;
  top: -3%;
  left: 48%;
  cursor: pointer;
}

.cartText2 {
  position: absolute;
  top: -15%;
  left: 48%;
  cursor: pointer;
}

.cartText1:hover, .cartText2:hover {
  transform: scale(110%);
}

.scroll {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 900px;
  background: url(assets/scroll.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.closeScrollBtn {
  position: absolute;
  top: 15%;
  right: 18%;
  font-size: 30px;
  cursor: pointer;
}

.scrollContinueBtn {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translatex(-50%);
  font-family: 'Alex Brush', cursive;
  font-size: 40px;
  font-weight: 300;
  padding: 5px 20px;
  background-color: #f7e8bf;
  -webkit-box-shadow: 0px 5px 7px 3px rgba(0,0,0,0.25); 
  box-shadow: 0px 5px 7px 3px rgba(0,0,0,0.25);
  border-radius: 3px;
}


.scrollHeadline {
  font-family: 'Alex Brush', cursive;
  font-size: 50px;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;

}

.scrollText {
  font-family: 'Almarai', sans-serif;
  font-size: 20px;
  line-height: 1.3;
  padding-left: 20px;
  margin-bottom: 20px;
}

.scrollSrc {
  padding-left: 20px;
  font-size: 14px;
}

.scrollContent {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translatex(-50%);
  width: 60%;
  height: 70%;
}

.scrollContent img{
  width: 300px;
  margin-left: 120px;
  margin-bottom: 10px;
  justify-content: center;
}
  


.ad4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 350px;
  background: white;
}

.closeAd4Btn {
  position: absolute;
  right: 2%;
  top: 2%;
  cursor: pointer;
}

.ad4img {
  width: calc(365px * 0.6);
  height: calc(508px * 0.6);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



.ad5 {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translateY(-50%);
  width: 400px;
  height: 220px;
  overflow: hidden;
  animation: scrollAd 3s;
}

.ad5img {
  width: 400px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.closeAd5Btn {
  position: absolute;
  left: 2%;
  top: 4%;
  cursor: pointer;
  color: white;
}

@keyframes scrollAd {
  from {
    transform: translate(250%, -50%);
  }
  to {
    transform: translate(0%, -50%);
  }
}

.ad5closing {
  animation: closeScrollAd 3s;
}

@keyframes closeScrollAd {
  from {
    transform: translate(0%, -50%);
  }
  to {
    transform: translate(250%, -50%);
    
  }
}

.itemContainer {
  width: 480px;
  height: 110px;
}

.itemContainer img {
  width: 100px;
  position: absolute;
  top: 50%;
}

#item1 {
  left: 30%;
}

#item2 {
  right: 30%;
}


.energyScreenshot {
  width: 100%;
}

.mntAdOverlay {
  position: absolute;
  top:0%;
  left: 0%;
  bottom: 0%;
  right: 0%;
  backdrop-filter: blur(6px);
}

.mntAd {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 341px;
  height: 239px;
} 

.countdown {
  position: absolute;
  top: 0%;
  right: 5%;
  font-size: 22px;
}

.noCursor {
  cursor: default;
}

.pointer {
  cursor: pointer;
}



.person {
  position: absolute;
  width: calc(800px / 4);
  height: 200px;
  background: url(assets/climber-sprite-200x.png);
}

.climber-animation {
  animation: animate 0.5s steps(4) infinite;
}

.climb-up {
  animation: animate 0.4s steps(4) infinite, climbUp 1s;
}
.climb-down {
  animation: animate 0.4s steps(4) infinite, climbDown 1s;
}

@keyframes climbUp {
  from {
      transform : translate(0em, 0em)
  }

  to {
      transform : translate(-5rem, -5rem)
  }
}
@keyframes climbDown {
  from {
      transform : translate(0em, 0em)
  }

  to {
      transform : translate(5rem, 5rem)
  }
}

@keyframes animate {
  from {
      background-position: 0;
  }

  to {
      background-position: 800px;
  }
}


.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}


/* -------------------------------------------------------------------------- */
/*                              content container                             */
/* -------------------------------------------------------------------------- */
.page-wrap {
  float: left;
  position: relative;
  /*set position to relative to position clouds relative to screen size */
  display: block;
  max-width: 1920px;
  max-height: 1080px;
  min-height: 1000px;
  min-width: 1920px;
  width: auto;
  /* set width of content wrap to 100% of the screen size but no more than 1920px to prevent stretched image on ultra wide screens */
  height: auto;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  overflow: hidden;
  background: linear-gradient(to top, #95daf8 0%,#38a3d1 100%);
}

.tutorial_overlay {
  top: 0%;
  left: 0%;
  background-color: #02013bda;
  z-index: 999;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.glow2 {
  z-index: 9999 !important;
  filter: drop-shadow(0 0 1.75rem rgb(98, 189, 250)) !important;
}

.dialog {
  position: absolute;
  color: aliceblue;
  background-color: #000000af;
  padding: 1em;
}

.control-dialog {
  position: absolute;
  top: 72%;
  left: 15%;
}

#control_arrow_top {
  background: none;
  width: 75px;
  height: 75px;
  position: absolute;
  left: -28%;
  top: -70%;
}
#control_arrow_bot {
  background: none;
  width: 75px;
  height: 75px;
  position: absolute;
  left: -28%;
  top: 40%;
}

.help-dialog {
  position: absolute;
  top: 72%;
  right: 15%;
}

#help_arrow_top {
  background: none;
  width: 75px;
  height: 75px;
  position: absolute;
  right: -28%;
  top: -70%;
}

.bars-dialog {
  position: absolute;
  top: 22%;
  right: 15%;
}

#bars_arrow_top {
  background: none;
  width: 75px;
  height: 75px;
  position: absolute;
  right: -28%;
  top: -70%;
}

#bars_arrow_top {
  background: none;
  width: 75px;
  height: 75px;
  position: absolute;
  right: -28%;
  top: -70%;
}

#tut_close_btn {
  position: absolute;
  top: 50%;
  left: 50%;
}

.dp {
  margin-left: 200px !important;
  margin-top: -20px !important;
}

/* -------------------------------------------------------------------------- */
/*                                 enviroment                                 */
/* -------------------------------------------------------------------------- */
#mountain1 {
  display: block;
  min-height: 937px;
  max-height: 100vh;
  position: absolute;
  top: 0%;
  left: 0%;
}

#cloud1 {
  top: 10%;
  /* position cloud and set its size relative to container wrap */
  right: 10%;
  position: absolute;
  width: 15%;
  animation: move 45s linear infinite;
  /* animate the cloud with function move, see below FUNCTION | INTERVAL | DURATION */
}
#cloud2 {
  top: 35%;
  /* position cloud and set its size relative to container wrap */
  left: 20%;
  position: absolute;
  width: 15%;
  animation: move2 60s linear infinite;
  /* animate the cloud with function move, see below FUNCTION | INTERVAL | DURATION */
}

/* animation for the cloud(s) */
@keyframes move {
  from {
    transform: translateX(-75vw);
  }
  to {
    transform: translateX(50vw);
  }
}
@keyframes move2 {
  from {
    transform: translateX(80vw);
  }
  to {
    transform: translateX(-30vw);
  }
}

/* -------------------------------------------------------------------------- */
/*                                   player                                   */
/* -------------------------------------------------------------------------- */

/* set static position for the climber based on container wraps size */
.climberPos1 {
  rotate: -10deg;
  bottom: 10%;
  right: 30%;
}

.climberPos2 {
  rotate: -10deg;
  bottom: 15%;
  right: 35%;
}

.climberPos3 {
  rotate: -10deg;
  bottom: 20%;
  right: 40%;
}

.climberPos4 {
  rotate: -10deg;
  bottom: 25%;
  right: 45%;
}

.climberPos5 {
  rotate: -10deg;
  bottom: 30%;
  right: 50%;
}

.climberPos6 {
  rotate: -10deg;
  bottom: 35%;
  right: 55%;
}

.climberPos7 {
  rotate: -10deg;
  bottom: 40%;
  right: 60%;
}

.climberPos8 {
  rotate: -10deg;
  bottom: 45%;
  right: 65%;
}

.climberPos9 {
  rotate: -10deg;
  bottom: 50%;
  right: 70%;
}

.climberPos10 {
  rotate: -10deg;
  bottom: 55%;
  right: 75%;
}



/* -------------------------------------------------------------------------- */
/*                                  backpack                                  */
/* -------------------------------------------------------------------------- */
.inventory {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  min-height: 500px;
  background-color: #211e4e;
  border-radius: 20px;
}


#inventory {
  height: 100%;
  width: 100%;
}

button {
  cursor: pointer;
  border: none;
  font-weight: 600;
}

.btn-close {
  margin: 10px;
  padding: 0.5rem 0.7rem;
  background: #eee;
  border-radius: 50%;
  float: right;
}

.backpackContent {
  width: 90%;
  height: 90%;
  margin: auto;
  margin-top: 35px;
  margin-left: 35px;
  flex: auto;
}

.backpack-item {
  width: 100px;
  float: left;
}

.item-thumbnail {
  background-color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 50px;
  color: #5986C5;
  font-weight: 700;
  margin: auto;
  margin-top: 15px;
  cursor: pointer;
}

.item-description {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 75px;
  margin: auto;
  margin-top: -10px;
  font-size: 12px;
  color: white;
}


/* -------------------------------------------------------------------------- */
/*                                    quiz                                    */
/* -------------------------------------------------------------------------- */

.quizBackground {
  position: absolute;
  background: linear-gradient(to top, #3359A5 0%,#2C296C 100%);
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: 0%;
}

.quizBody {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  min-height: 500px;
  background-color: white;
  border-radius: 20px;
}

.quizQuestion {
  color: #3359A5;
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 30px;
}

.quizAnswers {
  display: flex;
}

.answers {
  display: flex;
  float: left;
  width: 40%;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 10px;
  background: #3359A5;
  height: 150px;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  padding-left: 20px;
  padding-right: 20px;
}

.wrongAnswer {
  background: rgb(243, 64, 64) !important;
}

.correctAnswer {
  background: #02b62f !important;
}



/* -------------------------------- controls -------------------------------- */
.arrowUp {
  left: 5%;
  bottom: 25%;
  position: absolute;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.arrowDown {
  left: 5%;
  bottom: 14%;
  position: absolute;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.arrowUp img {
  width: 100%;
  height: 100%;
}

.arrowDown img {
  width: 100%;
  height: 100%;
}


/* * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}

.modal {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.4rem;
width: 50%;
height: 50%;
padding: 1.3rem;
min-height: 250px;
position: absolute;
z-index: 2;
top: 20%;
left: 20%;
background-color: white;
border: 1px solid #ddd;
border-radius: 15px;
}

.modal .flex {
display: flex;
align-items: center;
justify-content: space-between;
}

.modal input {
padding: 0.7rem 1rem;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 0.9em;
}

.modal p {
font-size: 0.9rem;
color: #777;
margin: 0.4rem 0 0.2rem;
}

button {
cursor: pointer;
border: none;
font-weight: 600;
}

.btn {
display: inline-block;
padding: 0.8rem 1.4rem;
font-weight: 700;
background-color: black;
color: white;
border-radius: 5px;
text-align: center;
font-size: 1em;
}

.btn-open {
position: absolute;
bottom: 5%;
right: 5%;
}

.btn-close {
transform: translate(10px, -20px);
padding: 0.5rem 0.7rem;
background: #eee;
border-radius: 50%;
}

.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3px);
z-index: 1;
}

.hidden {
display: none;
} */

.tutPos {
  position: absolute;
  top: 30% !important;
  left: 30% !important;
}