/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face { 
	font-family: "ByteBounce"; 
	src: url("./fonts/ByteBounce.woff") format("woff");
}

@font-face {
  font-family: "Karma Suture";
  src: url("./fonts/Karma Suture.woff") format("woff");
}

* {
    cursor: url('angler.png'), auto !important;
}

/* CRT */

  .crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.12), rgba(0, 255, 0, 0.04), rgba(0, 0, 255, 0.12));
  z-index: 2;
  background-size: 100% 6px, 9px 100%;
  pointer-events: none;
}

@keyframes flicker {
  0% {
  opacity: 0.13930;
  }
  5% {
  opacity: 0.17385;
  }
  10% {
  opacity: 0.11802;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  animation: flicker .20s infinite;
  pointer-events: none;
}

body {
  background-color: #8BA6B0;
  color: white;
  font-family: ByteBounce;
  font-size: 40px;
  background-image: url("./lobby/lobby2.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.container{
  position: relative;
  background-image: url('./lobby/lobby2.png');
  background-size: cover;
  background-position: center;
  width: 100vw;
  height: 100vh;
}

.container img {
  display: block;
  padding: 0;
  margin: 0;
  border-radius: 0;
  width: 100vw;
  height: 100vh;
}

.computer {
  content:url("./lobby/computer.png");
  position: absolute;
  width: 15%;
  height: auto;
  right: 26%;
  bottom:51.5%;
}

@keyframes screenflicker {
  0% {
  opacity: 0.27861;
  }
  5% {
  opacity: 0.34769;
  }
  10% {
  opacity: 0.23604;
  }
  15% {
  opacity: 0.56626;
  }
  20% {
  opacity: 0.18128;
  }
  25% {
  opacity: 0.48891;
  }
  30% {
  opacity: 0.65583;
  }
  35% {
  opacity: 0.67807;
  }
  40% {
  opacity: 0.26559;
  }
  45% {
  opacity: 0.48693;
  }
  50% {
  opacity: 0.56019;
  }
  55% {
  opacity: 0.08594;
  }
  60% {
  opacity: 0.20313;
  }
  65% {
  opacity: 0.41988;
  }
  70% {
  opacity: 0.53455;
  }
  75% {
  opacity: 0.37288;
  }
  80% {
  opacity: 0.44649;
  }
  85% {
  opacity: 0.43922;
  }
  90% {
  opacity: 0.45734;
  }
  95% {
  opacity: 0.36108;
  }
  100% {
  opacity: 0.24387;
  }
}

.computerlight {
  content:url("./lobby/computerlight.png");
  position: absolute;
  width: 22%;
  height: auto;
  right: 9.5%;
  bottom:53%;
  animation: screenflicker 10s infinite;
  animation-timing-function: linear;
  pointer-events: none;
}

@keyframes swing {
  0%   {transform: rotate(0deg);}
  25%  {transform: rotate(-2deg);}
  50%  {transform: rotate(0deg);}
  75%  {transform: rotate(2deg);}
  100% {transform: rotate(0deg);}
}

.hanginglamp{
  content:url("./lobby/lamp2.png");
  position: absolute;
  width: 75%;
  height: auto;
  left: -10%;
  top:-13%;
  transform-origin: 50% 0;
  animation: swing 12s infinite;
  animation-timing-function: linear;
  pointer-events: none;
}

.fishtank{
  content:url("./lobby/fishtank2.gif");
  position: absolute;
  width: 28%;
  height: auto;
  left: 14%;
  bottom:27%;
}


.sleep {
  position: absolute;
  width: 19%;
  height: auto;
  bottom: 52%;
  right: 6.5%;
  content:url("./lobby/sleep1.gif");
}

.sleep:hover {
  content:url("./lobby/sleep2.gif");
}


.brochure{
  content:url("./lobby/brochure.png");
  position: absolute;
  width: 3.2%;
  height: auto;
  transform: rotate(4deg);
  right: 1.5%;
  bottom:52.5%;
}