body {
  background-color: white;
  font-family: monospace;
  color: black;
}
#container{
  position:relative;
  width:95%;
  margin-left:auto;
  margin-right:auto;
  height:100%;
  overflow:hidden;

}
#upper{
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-image: url("/static/img/smokes.png");
  transform-origin: bottom;
  animation: smokes 8s ease-in-out 0s infinite;
  opacity:0;
  height:40%;
}
#lower{
  position:relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  background-image: url("/static/img/coffeecup3.png");
  height:60%;
}
#scale{
  position:absolute;
  top:80%;
  width:90%;
  height:10%;
  margin: 0% 5% 0% 5%;
  background: lightgrey;
  border-radius: 10px;
  overflow:hidden;
}
#scale2{
  width: 0%;
  transition: width 2s;
  height:100%;
  background: green;
  border-radius: 10px;
}
#brewtime{
  text-align:right;
  position:absolute;
  right:0px;
  z-index:5;
  font-size:10vw;
}
#address{
  text-align:left;
  position:absolute;
  left:0px;
  z-index:5;
  font-size:4vw;
  color: #333;
}
noscript{
  color:red;
}
#text{
  color:green;
  position:absolute;
  top:50%;
  left:50%;
}
.brewing{
  animation: brewing 5s ease-in-out 0s infinite;
}
.hurry{
  color:red !important;
}
.unknown{
  color:orange !important;
  animation: unknown 5s ease-in-out 0s infinite;
}
.friday{
  animation: friday 20s ease-in-out 0s infinite;
}
.normal{
  animation: normal 1000s ease-in-out 0s infinite;
}
.coffeeready{
  animation: coffeeready 10s ease-in-out 0s;
}
@keyframes smokes {
    0% {transform: skewX(-10deg);}
    50% {transform: skewX(10deg);}
    100% {transform: skewX(-10deg);}
}
@keyframes brewing {
    0% {color:green;}
    50% {color: transparent;}
    100% {color:green;}
}
@keyframes coffeeready {
    0% {background-color:white;}
    25% {background-color:green;}
    50% {background-color:white;}
    75% {background-color:green;}
    100% {background-color:white;}
}
@keyframes unknown {
    0%,40% {transform: rotate(0deg);}
    60%,100% {transform: rotate(360deg);}
}
@keyframes friday {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@keyframes normal {
    0%,49% {transform: rotate(0deg);}
    50%,100% {transform: rotate(360deg);}
}