:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-weight: 700;

  color-scheme: light dark;
  color: rgba(255, 255, 255);
  background-color: #1e1828;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.heading {
  outline: 0;
  vertical-align: bottom;
  background-color: transparent;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.headline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60%;
  margin-bottom: 10px;
  margin-top: 15px;
}

.header-eles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  box-sizing: border-box;
  width: 100%;
}

.left-header-imgs {
  justify-self: start;
  margin-left: 5%;
  margin-top: 5px;
}

.right-header-imgs {
  justify-self: end;
  margin-right: 5%;
  margin-top: 5px;
}

.gamemode-button,
.reset-endless,
.info-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.header-title {
  font-size: calc(1.2vw + 6px);
}

.header-imgs {
  width: calc(1.3vw + 12px);
  height: calc(1.3vw + 12px);
}

hr {
  width: 100%;
}

.board {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  font-weight: 700;
  font-size: 1.2vw;
}

.row {
  display: flex;
  flex-direction: row;
}

.frame {
  display: flex;
  /* enables flexbox */
  align-items: center;
  /* vertical centering */
  justify-content: center;
  /* horizontal centering */

  background-color: #474153;
  height: 32px;
  width: 4vw;
  outline: 1px solid #c9c7c7;
  border-radius: 5px;
  margin: 4px;
  text-align: center;
  position: relative;
  transition: all 1s;
}

.art_title,
.len_title {
  right: 10px;
}

.bone {
  width: 14.5vw;
}

.length {
  width: 5.5vw;
}

.shape,
.direction {
  width: 7vw;
}

.num {
  width: calc(38vw + 32px);
  background-color: #332f3b;
}

.inputf,
.buttonf {
  font-family: inherit;
  /* or specify your desired font */
  font-size: 1.2vw;
  /* or match your .frame font size */
  outline: 1px solid #ffffff;
  background-color: #747376;
  text-align: left;
}

.buttonf {
  width: 10vw;
  transition: transform 0.2s, background-color 0.2s;
}

.buttonf:hover {
  transform: scale(1.08);
  background-color: #b042ff;
}

.wikipedia,
.endless-repeat {
  width: 42px !important;
  height: 42px !important;
  transition: transform 0.2s, background-color 0.2s;
}

.wikipedia:hover,
.endless-repeat:hover {
  transform: scale(1.08);
  background-color: #1d1e23;
}

.input {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  /* optional: adds space between input and button */
}

.inputf {
  width: calc(28vw + 24px);
  border-radius: 6px;
  transition: background-color 0.2s;
}

.inputf:focus {
  background-color: #8e8e90;
}

.titles {
  outline: 0px;
  background-color: transparent;
  font-size: 0.94vw;
  height: 20px;
}

.winframe {
  width: 24vw;
  height: 42px;
  background-color: rgb(223, 170, 64);
  border-radius: 12px;
  font-size: calc(0.8vw + 7px);
  transition: background-color 0.2s;
  line-height: 2.5;
}

.error-output {
  color: #d6873d;
  font-size: calc(0.7vw + 6px);
  ;
  text-align: center;
  margin-top: 10px;
}

.footer-line {
  font-size: calc(0.7vw + 6px);
  color: #cca481;
  position: absolute;
  bottom: 5px;
  gap: 30px;
  text-align: center;
  width: 100%;
}

.lower-hyper-link {
  color: #efafd9;
}

.info-popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #1e1828;
  color: rgb(215, 214, 243);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.info-popup h3 {
  margin-bottom: 10px;
  color: #fff;
  font-size: calc(6px + 1vw);
  text-align: center;
}
.info-popup p {
  margin-bottom: 10px;
  color: #ccc;
  font-size: calc(5px + 0.7vw);
}

.info-popup h4 {
  margin-bottom: 10px;
  color: #fff;
  font-size: calc(5px + 0.8vw);
}

.info-popup video {
  margin-top: 10px;
  border: 2px solid #a4a3a3;
  width: 75%;
  justify-self: center;
  border-radius: 8px;
  margin-bottom: 5px;
}

.example-cell {
  display: grid;
  grid-template-columns: 20% 1fr;
  align-items: center;
}

.example-cell p {
  margin-top: 5px;
}

.example-cell div {
  font-size: calc(2px + 0.8vw);
  width: 6vw;
  height: calc(10px + 1.7vw);
}

.correct-type-example {
  background-color: #56c079ff;
}

.incorrect-type-example {
  background-color: #c14b2eff;
}

.short-art-example, .direction-example {
  background-color: #B042FF;
}

.long-art-example {
  background-color: #E78F3A;
}

.info-button-return {
  margin: 0px;
  font-family: inherit;
  font-size: calc(5px + 0.8vw);
  outline: 1px solid #ffffff;
  background-color: #747376;
  text-align: center;
  border-radius: 5px;

    width: 15vw;
  transition: transform 0.2s, background-color 0.2s;
}

.info-button-return:hover {
  transform: scale(1.08);
  background-color: #b042ff;
}

.centered-content {
  text-align: center;
}

@keyframes revealCell {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }

  60% {
    opacity: 1;
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 800px) {

  .board,
  .inputf,
  .buttonf {
    font-size: 2.4vw;
  }

  .titles {
    font-size: 1.85vw;
  }

  .frame {
    width: 8vw;
  }

  .bone {
    width: 29vw;
  }

  .length {
    width: 11vw;
  }

  .shape,
  .direction {
    width: 14vw;
  }

  .num {
    width: calc(76vw + 32px);
  }

  .inputf {
    width: calc(56vw + 24px);
  }

  .buttonf {
    width: 20vw;
  }

  .winframe {
    width: 48vw;
  }

    video {
    display: none;
  }
}

@media (max-width: 500px) {

  .board,
  .inputf,
  .buttonf {
    font-size: 2.8vw;
  }

  .titles {
    font-size: 2.8vw;
  }

  .art_title {
    right: 0px;
  }

  .len_title {
    right: 4px;
  }

  .headline {
    width: 80%;
  }
}

@media (max-height: 400px) {
  .footer-line {
    position: relative;
  }
}

.frame.revealed {
  animation: revealCell 0.35s cubic-bezier(0.4, 0.8, 0.4, 1);
}

.fade-in {
  transition: opacity 0.7s;
}