@import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap");
body {
  font-family: "Varela Round", sans-serif;
  overflow: hidden;
}
body main {
  display: flex;
}
body main #goback {
  position: absolute;
  top: 20px;
  left: 20px;
  color: aqua;
  mix-blend-mode: difference;
  cursor: pointer;
  z-index: 200;
}
body main .link {
  color: aqua;
  mix-blend-mode: difference;
}
body main div {
  height: 100vh;
  background-position: center;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  line-break: auto;
  transition: width 0.5s, transform 0.5s ease-in-out;
  width: 33.3333%;
}
body main div a {
  text-decoration: none;
  color: inherit;
}
body main div img {
  width: 250px;
}
body main div#codia {
  background-color: #82bfb5;
  background-image: url("../media/images/codia.jpg");
  color: white;
}
body main div#codia ::selection {
  color: white;
  background: #82bfb5;
}
body main div#pbuw {
  background-color: #FA7119;
  background-image: url("../media/images/pbuw.jpg");
}
body main div#pbuw ::selection {
  color: white;
  background: #FA7119;
}
body main div#hosttime {
  background-color: #94c949;
  background-image: url("../media/images/hosttime.jpg");
  color: white;
}
body main div#hosttime ::selection {
  color: white;
  background: #94c949;
}
body main div:hover {
  width: 40%;
  transition: width 0.5s;
}
body main div .text {
  padding: 0 20px;
}
@media screen and (max-width: 800px) {
  body {
    overflow: auto;
  }
  body main {
    flex-direction: column;
  }
  body main div {
    width: 100%;
  }
  body main div:hover {
    width: 100%;
  }
}

/*# sourceMappingURL=style.css.map */