/*RESET*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations. Not sure if I should keep this */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

#root,
#__next {
  isolation: isolate;
}

/*VARIABLES*/
:root {
  --purple: #866ace;
  --light-purple: #b199dd;
  --dark-purple: #322353;
  --darkest-purple: #251635;
  --cube-yellow: #ffe040;
  --library-brown: #86381f;
  --sewer-dark-green: #204631;
  --sewer-base-green: #527f39;
  --sewer-lightest-green: #d7e894;
  --sewer-dark-red: #450102;
  --sewer-base-red: #920000;
  --sewer-lightest-red: #c90000;
  --sewer-darkest-red: #1c0305;
}

/*BODY*/
body {
  font-family: courier new, monospace;
  background-color: var(--darkest-purple);
  background-image: url("img/bg/stars_1.png");
}

body.sewer {
  background-color: var(--sewer-dark-green);
  background: linear-gradient(to bottom,
      var(--sewer-dark-green),
      var(--sewer-dark-green) 85%,
      var(--sewer-lightest-green) 85%,
      var(--sewer-lightest-green) calc(85% + 1px),
      var(--sewer-base-green) calc(85% + 1px),
      var(--sewer-base-green) 100%);
  background-size: 100% 100%;
  background-attachment: fixed;
  height: 100vh;
}

body.sewer-red {
  background-color: var(--sewer-darkest-red);
  background: linear-gradient(to bottom,
      var(--sewer-darkest-red),
      var(--sewer-darkest-red) 85%,
      var(--sewer-base-red) 85%,
      var(--sewer-base-red) calc(85% + 1px),
      var(--sewer-lightest-red) calc(85% + 1px),
      var(--sewer-lightest-red) 100%);
  background-size: 100% 100%;
  background-attachment: fixed;
  height: 100vh;
}

body.skull {
  background-color: var(--sewer-darkest-red);
  background: linear-gradient(to bottom,
      var(--sewer-darkest-red),
      var(--sewer-darkest-red) 75%,
      #FFF 75%,
      #FFF calc(75% + 2px),
      #8f1500 calc(75% + 2px),
      #8f1500 100%);
  background-size: 100% 100%;
  background-attachment: fixed;
  height: 100vh;
}

body.library {
  background-image: url('img/bg/library.png');
  background-size: cover;
  background-attachment: fixed;
}

hr {
  border-color: var(--light-purple);
  margin-top: 2em;
  margin-bottom: 2em;
}

ul {
  list-style-image: url("img/microcube.png");
}

.centered-div {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.text-bubble {
  background-color: #000000;
  color: #ffffff;
  padding: 15px;
  text-decoration: none;
  display: block;
  margin: 1em auto;
  border-radius: 5px;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: var(--dark-purple);
  color: var(--light-purple);
  text-align: center;
  padding: 5px;
}

/*MENU CLASSES*/

.dropdown {
  position: relative;
}

.dropbtn {
  background-color: var(--purple);
  color: #000;
  width: 120px;
  padding: 1em;
  border: none;
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 0;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dropdown-content {
  display: none;
  position: absolute;
  position: fixed;
  top: 3.5em;
  right: 0;
  background-color: #000;
  border: 2px solid #FFF;
  width: 180px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
  color: #fff;
  padding: 0.5em;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #FFF;
  text-align: right;
}

.dropdown-content a:hover {
  background-color: var(--dark-purple)
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: var(--light-purple);
}

/*COLUMNS*/

.column-wrappers {
  display: flex;
  justify-content: space-between;
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.left-col-wrapper {
  width: 600px;
}

.right-col-wrapper {
  max-width: 200px;
}

.item-rows {
  display: flex;
  justify-content: space-between;
  margin-top: 2em;
}

.item-block {
  text-decoration: none;
  color: #FFF;
  font-weight: bold;
  text-align: center;
}

.item-block :hover {
  color: var(--light-purple);
}

.item-image {
  max-width: 120px;
}

.purple-stone-col {
  width: 100px;
  height: 520px;
  background-image: url("img/stone_column.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  display: block;
  /*Position fixed but aligned to the wrapper's right edge responsively.*/
  position: fixed;
  bottom: 0;
  left: calc(50% + min(800px, 100vw) / 2 - 120px);
}

.purple-col-top {
  /*the top div has a grass texture*/
  height: 60px;
  background-image: url("img/top_grass.png");
}

.purple-col-main {
  background-color: var(--purple);
  padding: 20px;
}

.black-col-main {
  background-color: #000;
  padding: 20px;
  color: #FFF;
}

.library-col-top {
  /*the top div has a bookcase texture*/
  height: 60px;
  background-image: url("img/library/top_library.png");
  background-size: cover;
}

.library-col-main {
  background-color: var(--library-brown);
  padding: 20px;
}

.library-book-col {
  width: 100px;
  height: 310px;
  background-image: url("img/library/library_column.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  display: block;
  /*Position fixed but aligned to the wrapper's right edge responsively.*/
  position: fixed;
  bottom: 0;
  left: calc(50% + min(800px, 100vw) / 2 - 120px);
}

.sewer-col-main {
  border: var(--sewer-base-green) solid 1px;
  background-color: var(--sewer-dark-green);
  padding: 20px 20px 0 20px;
}

.sewer-col-main p {
  color: var(--sewer-lightest-green);
}

.red-sewer-col-main {
  border: var(--sewer-base-red) solid 1px;
  background-color: var(--sewer-dark-red);
  padding: 20px 20px 0 20px;
  color: #FFF;
}

.green-sewer-col {
  width: 100px;
  height: 400px;
  background-image: url("img/sewer/sewer_column.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  display: block;
  /*Position fixed but aligned to the wrapper's right edge responsively.*/
  position: fixed;
  bottom: 0;
  left: calc(50% + min(800px, 100vw) / 2 - 120px);
}

.green-sewer-col-2 {
  width: 150px;
  height: 500px;
  background-image: url("img/sewer/sewer_column_long.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  display: block;
  /*Position fixed but aligned to the wrapper's right edge responsively.*/
  position: fixed;
  bottom: 0;
  left: calc(50% + min(800px, 100vw) / 2 - 120px);
}

.platform-sewer-col {
  width: 130px;
  height: 380px;
  background-image: url("img/sewer/sewer_platform.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  display: block;
  background-size: contain;
  /*Position fixed but aligned to the wrapper's right edge responsively.*/
  position: fixed;
  bottom: 0;
  left: calc(50% + min(800px, 100vw) / 2 - 120px);
}

.red-sewer-col {
  width: 90px;
  height: 550px;
  background-image: url("img/sewer/red-column.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  display: block;
  background-size: contain;
  /*Position fixed but aligned to the wrapper's right edge responsively.*/
  position: fixed;
  bottom: 0;
  left: calc(50% + min(800px, 100vw) / 2 - 120px);
}

.sewer-block {
  display: block;
  width: 15px;
  height: 15px;
  margin: auto;
  position: relative;
  border: var(--sewer-base-green) solid 1px;
  background: var(--sewer-dark-green);
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.sewer-block-red {
  display: block;
  width: 15px;
  height: 15px;
  margin: auto;
  position: relative;
  border: var(--sewer-base-red) solid 1px;
  background: var(--sewer-dark-red);
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

/*SPECIAL*/
@keyframes floating {
  0% {
    top: 0px;
  }

  50% {
    top: 20px;
  }

  100% {
    top: 0px;
  }
}

.floating-item {
  margin: 2em auto;
  width: 50px;
  position: relative;
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.floating-small-item {
  display: block;
  width: 15px;
  margin: auto;
  position: relative;
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

/*CUBE*/
.outer-cube-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10em;
}

.wrap {
  perspective: 1000px;
  perspective-origin: 50% 100px;
}

.cube {
  position: relative;
  width: 400px;
  transform-style: preserve-3d;
}

.cube div {
  position: absolute;
  width: 400px;
  height: 400px;
  background-color: var(--purple);
  background-image: url("img/cube_background.png");
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cube div img {
  aspect-ratio: 1;
  max-width: 100px;
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}

.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  transform: rotateX(-90deg) translateY(-300px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(90deg) translateY(300px);
  transform-origin: bottom center;
}

.front {
  transform: translateZ(300px);
}

@keyframes spin {
  from {
    transform: rotateY(0);
  }

  to {
    transform: rotateY(360deg);
  }
}

.cube {
  animation: spin 20s infinite linear;
}

/*MESSAGES*/
div#correct-message,
div#wrong-message {
  opacity: 0;
}

/*MEDIA QUERIES*/

@media (max-width: 696px) {

  .purple-stone-col,
  .platform-sewer-col,
  .red-sewer-col,
  .green-sewer-col-2,
  .green-sewer-col,
  .library-book-col {
    display: none;
  }
}