:root {
  --size1w: 1520px;
  --size1h: 855px;
  --size2w: 1320px;
  --size2h: 742.5px;
  --size3w: 1140px;
  --size3h: 641.25px;
  --size4w: 960px;
  --size4h: 540px;
}

body {
  background: url("../images/background.jpg") no-repeat center center fixed;
  background-size: cover;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

main {
  position: relative;
  display: grid;
  place-items: center;
  border: none;
  width: 1920px;
  height: 1080px;
}

.logo {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  height: 10%;
  width: calc(10% / 1.777777777777778);
  left: calc((-10% / 1.777777777777778) / 2);
  top: -5%;
  cursor: pointer;
}

.logo img {
  position: absolute;
  height: 60%;
  transition: 0.2s;
  animation: logoAnim 2s ease-in-out infinite alternate;
}

.logo:hover img {
  height: 65%;
}

@keyframes logoAnim {
  from {
    top: 15%;
  }

  to {
    top: 25%;
  }
}

.rooms {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.room {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40%;
  height: 100%;
}

.room .top {
  display: grid;
  place-items: center;
  width: 100%;
  height: 40%;
}

.room .top {
  font-size: 22pt;
  background: var(--color1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.4s;
  font-weight: 500;
  cursor: default;
}

.join {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 40%;
}

.room input {
  background: rgba(255, 255, 255, 0.4);
  height: 100%;
  width: 50%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  outline: none;
}

.room input:focus {
  background: rgba(255, 255, 255, 0.6);
  transition: 0.2s;
}

.joinBtn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 6vh;
  height: 6vh;
  right: 5%;
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
  transition: 0.2s;
}

.joinBtn:hover {
  background: var(--color1);
}

.joinBtn p {
  display: grid;
  place-content: center;
  background: var(--color1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 26pt;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: 0.2s;
}

.joinBtn p:hover {
  background: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media only screen and (max-width: 2110px) {
  main {
    width: var(--size1w);
    height: var(--size1h);
  }
}

@media only screen and (max-width: 1620px) {
  main {
    width: var(--size2w);
    height: var(--size2h);
  }
}

@media only screen and (max-width: 1420px) {
  main {
    width: var(--size3w);
    height: var(--size3h);
  }
}

@media only screen and (max-width: 1210px) {
  main {
    width: var(--size4w);
    height: var(--size4h);
  }
}