@import url("reset.css");
@import url("font.css");
@import url("ids.css");
html {
  overflow-y: scroll;
}
body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
h1 {
  text-align: center;
  font-size: 128px;
  font-family: "Yiggivoo Unicode";
  font-style: normal;
  font-weight: 400;
  line-height: 104%;
}
h2 {
  text-align: right;
  font-size: 86px;
  font-family: "Yiggivoo Unicode";
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}
h3 {
  text-align: center;
  font-family: "Yiggivoo Unicode";
  font-size: 64px;
  font-weight: 400;
}
p {
  font-family: "Yiggivoo Unicode";
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: 119%;
}
img {
  user-select: none;
  -webkit-user-drag: none;
}
.screen {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-self: stretch;
  height: 100svh;
  box-sizing: border-box;
}
.yellow {
  background-color: #e0a03f;
  color: #fef3b1;
}
.white {
  background-color: #fef3b1;
  color: #9f2b2c;
}
.red {
  background-color: #9f2b2c;
  color: #fef3b1;
}
.blue {
  background-color: #355d67;
  color: #fef3b1;
}
.title {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.trees {
  height: 100%;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  place-items: center;
}
.titleGame {
  align-items: center;
  align-self: stretch;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  gap: 20px;
  img {
    height: 10vw;
    width: auto;
  }
}
.Block--isDraggable {
  touch-action: none;
  cursor: grabbing;
  touch-action: none;
}

.draggable-mirror {
  opacity: 80% !important;
  box-shadow: none !important;
  z-index: 1000;
}
.columnBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  width: 100%;
  height: 100%;
}
.rowBlock {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  width: 100%;
  height: 100%;
}
.subTitle {
  display: flex;
  height: 158px;
  padding: 0 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}
.titleTree {
  position: absolute;
  left: -220%;
  height: 102%;
}
.disc {
  display: flex;
  padding: 10px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.binarTree {
  height: 70%;
}
.endTree {
  position: relative;
  display: flex;
  padding: 48px;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  align-self: center;
}
.flower {
  align-items: end;
  align-self: stretch;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  justify-content: center;
}
.flowerImg {
  width: 40%;
  transform: translateY(0);
  transition: 0.2s ease-in;
}
.qr {
  position: absolute;
  top: 5%;
}
.aboutMe {
  align-items: center;
  align-self: stretch;
  width: 100%;
  height: 100%;
  cursor: url("../assets/img/hammerEnd.svg"), auto;
  display: flex;
  position: relative;
  justify-content: center;
}
.game {
  align-items: center;
  align-self: stretch;
  width: 100%;
  height: 100%;
  position: relative;
}
.compare {
  align-items: center;
  align-self: stretch;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 24px;
}
.compareColumn {
  width: 30%;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  align-items: stretch;
  justify-items: stretch;
  place-items: center;
}
.nameBox {
  display: flex;
  width: 110%;
  height: 80%;
  align-items: center;
  justify-content: center;
}
.selectInfo {
  display: flex;
  width: 50svw;
  height: 50swh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.selector {
  align-items: center;
  align-self: stretch;
  width: 100%;
  height: 100%;
  position: relative;
  h3,
  p {
    color: #9f2b2c;
  }
}
.slider {
  position: absolute;
  transition: 0.4s ease-in-out;
  display: flex;
  left: 0;
  flex-direction: row;
  height: 100%;
  width: fit-content;
}
.leftArrow {
  position: absolute;
  top: 50%;
  z-index: 99;
  left: 2%;
  transform: translateY(-50%);
}
.item {
  touch-action: none;
  position: absolute;
}
.rightArrow {
  position: absolute;
  top: 50%;
  right: 2%;
  z-index: 99;
  transform: translateY(-50%);
}
.apple1 {
  position: absolute;
  height: 50%;
  top: 3%;
  left: 3%;
}
.apple2 {
  position: absolute;
  height: 35%;
  top: 6%;
  right: 3%;
  rotate: 30deg;
}
.apple3 {
  position: absolute;
  height: 35%;
  bottom: 3%;
  left: 25%;
  rotate: 90deg;
}
.apple4 {
  position: absolute;
  height: 50%;
  rotate: -60deg;
  right: 25%;
  bottom: 20%;
}
.roots {
  cursor: url("../assets/img/hammerGame.png"), auto;
}
.attack {
  cursor: url("../assets/img/sword.png"), auto;
  background-image: url("../assets/img/gameBG.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: end;
}

.endHover {
  transition: 0.6s ease-in;
  bottom: 0;
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100%;
  animation: colorAnim 2s ease-in-out infinite;
}
@keyframes colorAnim {
  0% {
    background-color: #e0a03f;
  }
  50% {
    background-color: #b8372d;
  }
  100% {
    background-color: #e0a03f;
  }
}

.dragon {
  width: 90%;
  transform: translateY(-20%);
  transition: 0.2s ease-in;
}
.progressBar {
  z-index: 99;
  width: 90%;
  height: 5%;
  background-color: #431616;
  position: absolute;
  bottom: 5%;
}
.progress {
  width: 100%;
  height: 100%;
  background-color: #e0a03f;
  z-index: 99;
}
.root {
  height: 70%;
  position: absolute;
  transition: 0.1s ease-in;
}
.box {
  width: 35%;
  z-index: 50;
  transition: 0.2s ease-in;
}
.myInfo {
  position: absolute;
  transform: scale(0.01) rotate(90deg);
  transition: 0.5s ease-in;
}
.lt {
  text-align: left;
}
.merge {
  display: flex;
  padding: 0 60px;
  justify-content: center;
}
.house {
  touch-action: none;
  position: absolute;
  right: 5%;
  height: 80%;
}
.tree {
  position: absolute;
  left: 48px;
  height: 80%;
}
@media (max-width: 1024px) {
  .titleGame {
    img {
      height: 20vw;
      width: auto;
    }
  }
  .screen {
    height: 200svh;
    flex-direction: column;
  }
  .selectInfo {
    display: flex;
    width: 100svw;
    height: 50swh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  h1 {
    font-size: 96px;
  }
}
@media (max-width: 850px) {
  h3 {
    font-size: 36px;
  }
}
@media (max-width: 450px) {
  .merge {
    img {
      width: 20svw;
    }
  }
  .selectInfo {
    img {
      height: 50%;
    }
  }
  .titleGame {
    img {
      height: 25vw;
      width: auto;
    }
  }
  .item {
    width: 35svw;
    height: auto;
  }
  .dragon {
    transform: translateY(-100%);
  }
  .screen {
    height: 200svh;
    flex-direction: column;
  }
  h1 {
    font-size: 48px;
  }
  h2 {
    font-size: 36px;
  }
  p {
    font-size: 20px;
  }
  .binarTree {
    width: 110%;
    height: auto;
  }
}