@font-face {
  font-family: kollektif;
  src: url('../fonts/Kollektif.ttf');
}

body, html {
    height: 100%;
    margin: 0;
    font-family: kollektif, helvetica, arial, sans-serif;
}

.hero-image {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #333333;
  position: relative;
}
.wait-time-title {
  position: absolute;
  top: 88%;
  left: 8%;
  width: 40%;
}
.fish-wait-time {
  position: absolute;
  top: 94%;
  left: 8%;
  width: 40%;
}
.notice-1 {
  position: absolute;
  top: 88%;
  left: 58%;
  width: 40%;
}
.notice-2 {
  position: absolute;
  top: 94%;
  left: 58%;
  width: 40%;
}
.dynamic-text {
  color: #dec08d;
  font-size: 28pt;
}
.static-text {
  color: #dec08d;
  font-size: 21pt;
}
@keyframes fade-in {
  0% {opacity: 0;}
  33% {opacity: 0; top: 100;}
  100% {opacity: 1; top: 0;}
}
@keyframes shift-right {
  0% {left: -100;}
  100% {left: 0;}
}
@keyframes fade-out {
  0% {opacity: 1; left: -100;}
  100% {opacity: 0; left: 0;}
}
@keyframes flashing {
  0% {opacity: 1;}
  50% {opacity: 0.5;}
  100% {opacity: 1;}
}
.greentext {
  color: #28b21b;
}
.yellowtext {
  color: #ffce00;
  animation-name: flashing;
  animation-play-state: running;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.redtext {
  color: #e30000;
  animation-name: flashing;
  animation-play-state: running;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.order {
  height: 100;
  width: 100;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  float:left;
  color: #dec08d;
  font-size: 30;
  background-image: url('ring.svg');
}
.order.fade-in {
  animation: fade-in 1s ease-out;
}
.order.shift-right {
  animation: shift-right 1s ease-out;
}
.order.fade-out {
  opacity: 0;
  animation: fade-out 1s ease-out;
}
.order-pos {
  top: 85%;
  left: 52%;
  height: 100;
  right: 0%;
  position: absolute;
}
.order-title {
  height: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  float: left;
  margin-right: 1%;
}