@font-face {
    font-family: firaCode;
    src: url(../lib/fira-code/FiraCode-VariableFont_wght.ttf);
}
body
{
    background-image: url("../img/bg.png");
    background-repeat: repeat;
    background-size: 8vh;
    font-family: firaCode, 'Courier New', Courier, monospace;
    color: rgb(25,25,25);
}
.wan
{
    background-image: url("../img/wan.png");
    background-repeat: repeat;
    display: block;
    background-position-x: center;
    background-position-y: center;
    background-size: contain;
    margin: auto;
    width: 33vh;
    height: 33vh;
    margin-top: 33vh;
  transition: transform 0.1s;
    cursor: pointer;
}
.wan.dead
{
    transform: rotate(180deg);
}
.wan.bounce {
  animation: bounce 0.5s both;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0) }
    40% {transform: translateY(-30px)}
    60% {transform: translateY(-15px)}
}

.counter {
  text-align: center;
  font-size: 5vh;
  font-weight: bold;
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
}
.bounces-0 .counter
{
    opacity: 1;
}


a
{
    text-decoration: none;
    color: inherit;
}

.links {
  position: absolute;
  bottom: 5px;
  text-align: center;
  left: 0;
  right: 0;
  font-size: 4vh;
  transition: opacity 1s;
  opacity: 0;
  pointer-events: none;
}

.bounces-1 .links
{
  pointer-events: initial;
    opacity: 1;
    transition: opacity 1s;
}
.timer {
	position: absolute;
	width: 0;
	background-color: #4cb7ab;
	height: 10px;
    display: none;
	width: 20vh;

    margin-top: 10px;
    
	left: 50%;
	transform: translateX(-50%);
    animation: none;

}
.countdown .timer
{
    animation: timer 1s linear forwards;
}
.bounces-2 .timer
{
    display: initial;
}

@keyframes timer {
    100% {width: 0;}
}