* {
  box-sizing: border-box;
}

body {
  background-color: #000000;
  font-family: "Bruno Ace", cursive;
  overflow: hidden;
}

.sec-one {
  height: 12vh;
}

.sec-two {
  height: 88vh;
}

.start #easy,
.levels #easy {
  color: gold;
}
.start button,
.levels button {
  width: -moz-fit-content;
  width: fit-content;
  scale: 0.8;
  font-size: large;
  transition: 0.5s;
  color: #0dcaf0;
}
@media (min-width: 900px) {
  .start button,
  .levels button {
    font-size: x-large;
  }
}
.start :hover,
.levels :hover {
  background-color: #000000;
  color: #fff700;
}
@media (max-width: 767px) {
  .start :hover,
  .levels :hover {
    color: #0dcaf0;
  }
}

.sec-two {
  margin-top: 3rem;
}
@media (min-width: 900px) {
  .sec-two {
    margin-top: 5rem;
  }
}
.sec-two .row {
  scale: 1.2;
}
@media (min-width: 900px) {
  .sec-two .row {
    scale: 1.5;
  }
}
.sec-two .row div {
  display: flex;
  justify-content: center;
  font-size: x-large;
  margin-right: 0.3rem;
}
@media (max-width: 767px) {
  .sec-two .row div {
    font-size: 1.25rem;
  }
}
@media (min-width: 900px) {
  .sec-two .row {
    margin-top: 4rem;
    margin-right: 0;
  }
}
.sec-two .fifth-row,
.sec-two .sixth-row {
  scale: 0.8;
}
@media (min-width: 900px) {
  .sec-two .fifth-row,
  .sec-two .sixth-row {
    scale: 1.1;
  }
}
.sec-two .text {
  scale: 0.7;
}

.instructions {
  top: 3%;
  right: 4%;
}
@media (min-width: 767px) {
  .instructions {
    right: 10%;
    scale: 1.3;
  }
}
@media (min-width: 1300px) {
  .instructions {
    right: 20%;
    scale: 1.5;
  }
}
.instructions .list {
  width: 260px;
  height: 350px;
  top: 120px;
  right: 35px;
  font-size: 0.6rem;
  background-color: rgba(8, 8, 8, 0.8392156863);
  border: 1px solid #fff;
  font-family: "Bruno Ace", cursive;
  transform-origin: top right;
  scale: 0;
  -webkit-backdrop-filter: hue-rotate(260deg);
          backdrop-filter: hue-rotate(260deg);
}
.instructions .list > li {
  margin-bottom: 5px;
}
.instructions .list > li::before {
  content: "";
  position: absolute;
  translate: -12px 4.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #0393af;
}
@media (min-width: 767px) {
  .instructions .list {
    top: 20px;
    right: 40px;
  }
}
.instructions .list .smile {
  font-size: 0.8rem;
}
.instructions .list dt {
  color: #4da0f8;
}
.instructions .list i {
  color: orange;
}
.instructions .icon {
  right: 10px;
  cursor: pointer;
}
.instructions .icon i {
  animation: icon-scale 1s 5s 6 alternate;
  background-color: #0084ff;
  color: #e4deec;
}
.instructions span {
  color: #e44bef;
}
.instructions .show-instructions {
  animation: show-instructions 0.7s linear forwards;
}
.instructions .hide-instructions {
  animation: hide-instructions 0.7s linear forwards;
}

@keyframes show-instructions {
  to {
    scale: 1;
  }
}
@keyframes hide-instructions {
  from {
    scale: 1;
  }
  to {
    scale: 0;
  }
}
@keyframes icon-scale {
  to {
    background-color: tomato;
    scale: 1.3;
  }
}
.focus {
  top: 36%;
  opacity: 0;
  animation: title-blur 0.7s 1s linear forwards, title-vanish 1s 4s linear forwards;
}

@keyframes title-blur {
  to {
    opacity: 1;
    filter: blur(0px);
  }
}
@keyframes title-vanish {
  to {
    opacity: 0;
    filter: blur(17px);
  }
}/*# sourceMappingURL=index.css.map */