body {
  background: #224941 url("atmen.png");
  position: relative;
}
.main {
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 7rem;
  left: 30%;
  color: aliceblue;

  font-size: 2rem;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  text-decoration: none;
}
.here {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 2rem;
  font-weight: bold;
  color: rgb(245, 245, 123);
}
.wrong {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 2rem;
  font-weight: bold;
  color: rgb(224, 77, 14);
}
.yellow {
  text-decoration: none;
  color: rgb(245, 245, 123);
}
.green {
  display: none;
}
.small {
  display: none;
}
@media screen and (max-width: 800px) {
  .wrong {
    display: none;
  }
  .yellow {
    display: none;
  }
  .green {
    display: grid;
    text-decoration: none;
    color: rgb(14, 46, 55);
  }
  body {
    margin: 15px;
    background: #81ccb8 url("atmen.png");
    background-position: 5% -15%;
    background-repeat: no-repeat;
  }
  .main {
    background: rgba(0, 0, 0, 0);
    font-size: 1.2rem;
    padding-left: 25px;
  }
  .here {
    font-family: "Times New Roman", Times, serif;
  }
  .small {
    display: inline-block;
  }
  .big {
    display: none;
  }
}