@font-face {
  font-family: 'open sans,sans-serif';
}

body {
  background: rgb(0, 0, 0);
}

.background {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}

/* Title page */
.title-div {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 47%;
  width: 100%;
  transform: translate(-50%, -43%);
}
.title {
  font-family: open sans,sans-serif;
  font-weight: bold;
  color: rgb(241, 242, 243);
  font-size: 120px;
  cursor: default;
  margin: 0;
}
.copyStatus {
  font-family: open sans,sans-serif;
  font-weight: bold;
  color: rgb(241, 242, 243);
  font-size: 30px;
  cursor: default;
  margin: 0;
  opacity: 0;
}

/* Block with error description */
.error-description {
  font-family: open sans,sans-serif;
  font-weight: bold;
  color: rgb(241, 242, 243);
  margin: 0;
}

/* Links (and more) block with icons (Twitter, Telegram, etc.) */
.title-div > .links > * {
  color: rgb(204,204,204);
  cursor: pointer;
  transition: .4s;
}
.fab, .fa, .far {
  margin: .1em .25em 0 .25em;
  transition: .4s;
  animation: click-effect 2s ease-in-out;
}
.telegram:hover {
  color: rgb(55, 160, 242);
}
.github:hover {
  color: rgb(128, 128, 128);
}
.mail:hover {
  color: rgb(212, 70, 55);
}
.vk:hover {
  color: rgb(76, 117, 163);
}
.discord:hover {
  color: rgb(114, 137, 218);
}
.twitter:hover {
  color: rgb(29, 161, 242);
}
.steam:hover {
  color: rgb(10, 32, 81);
}
.youtube:hover {
  color: rgb(230, 33, 23);
}
.twitch:hover {
  color: rgb(100, 65, 164);
}
.instagram:hover {
  color: rgb(213, 40, 152);
}

@keyframes click-effect {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

/* Screen with width 320px */
@media (max-width: 359px) {
  .fa-4x {
    font-size: 2.5em;
  }
  .title {
    font-size: 52px;
  }
  #playButton {
    height: 52px;
  }
  .error-description {
    font-size: 35px;
  }
}
/* Screen with width 360px */
@media (min-width: 360px) and (max-width: 479px) {
  .fa-4x {
    font-size: 3.5em;
  }
  .title {
    font-size: 60px;
  }
  #playButton {
    height: 60px;
  }
  .error-description {
    font-size: 43px;
  }
}
/* Screen with width 480px */
@media (min-width: 480px) and (max-width: 639px) {
  .fa-4x {
    font-size: 3.6em;
  }
  .title {
    font-size: 80px;
  }
  #playButton {
    height: 80px;
  }
  .error-description {
    font-size: 45px;
  }
}
/* Screen with width 640px */
@media (min-width: 640px) and (max-width: 767px) {
  .title {
    font-size: 110px;
  }
  #playButton {
    height: 110px;
  }
  .error-description {
    font-size: 50px;
  }
}
/* Screen with width 768px */
@media (min-width: 768px) and (max-width: 1919px) {
  .title {
    font-size: 135px;
  }
  #playButton {
    height: 135px;
  }
  .error-description {
    font-size: 58px;
  }
}
/* Screen with width 1920px */
@media (min-width: 1920px) and (max-width: 3840px) {
  .title {
    font-size: 220px;
  }
  #playButton {
    height: 220px;
  }
  .fa-4x {
    font-size: 6em;
  }
  .error-description {
    font-size: 90px;
  }
}