html, body{
  text-align: center;
  padding:0;
  margin: 0;

}

#startbild {
  background-color: black;
  display: block;
  height: 100vh;
  background-image: url("./candle.png");
  background-position:bottom;
  background-repeat: no-repeat;
}

#spelbild {
   /*background-image: linear-gradient(45deg, black, #320);*/
   background-image: linear-gradient(225deg, black, #320);
  height: 100vh;
  display: none;
  position: relative;
  overflow-y: hidden;
  overflow-x: hidden;

}

#slutbild {
  background-color: red;
  display: none;
  background-image: linear-gradient(0deg, black, #320);
 height: 100vh;
 width: 100vw;

 position: relative;
 overflow-y: hidden;
 overflow-x: hidden;
}
#idiot {
  background-color: black;

  height: 100vh;
  width: 100vw;

  display:block;
  z-index: 2000;
  position:fixed;
  top:0;
  left:0;
  text-align: center;
  margin: auto;
  color :red;
  font-family: sans-serif;
  font-size: 4em;
}

#tärnrad  {
  margin-top: -20px;
}

#luciarad {
  margin-top: -30px;
}
#skräprad {
  margin-top: -20px;
}

.synlig {
  display: block;
}

.puff{

  opacity:0;

}

.sansSerif {
    font-family: sans-serif;
}

.röd {
  color:red;
}
.stor {
  font-size: 5em;
}
.vit {
  color: white;
}
.unifrakturmaguntia-regular {
  font-family: "UnifrakturMaguntia", serif;
  font-weight: 400;
  font-style: normal;
}

h1{
  font-size: 5em;
  color: #6f4414;
}


#startknapp {

  font-family: sans-serif;

  color: #c28450;

  text-align: center;


  font-size: 2em;
}




.blink_me {
  animation: blinker 10s linear infinite;
}

.blink_me2 {
  animation: blinker3 5s linear infinite;
}


.blink_me3 {
  animation: blinker3 2s linear infinite;
}






@keyframes blinker3 {
  25% {

    color: white;
  }
}







#poäng {
  z-index:1000;
    position: fixed;

    left:0.5em;
    top:0.5em;

    color: #6f4414;

    font-size: 2em;


}

.bleknaBort {
  -webkit-animation: blekna 4s linear;
  -moz-animation: blekna 4s linear;
  -ms-animation: blekna 4s linear;
  -o-animation: blekna 4s linear;
  animation: blekna 4s linear;
}

@keyframes blekna {
  from {
    opacity: 100;
  }
  to {
    opacity: 0;
  }
}




@keyframes glidNedåt {
  from {
    right: -7%;
    top: -7%;
  }
  to {
    right: 120%;
    top: 120%;
  }
}

.svävaNedåt {
  transition: opacity 1s;
  display: inline-block;
  position: absolute;
  -webkit-animation: glidNedåt 40s linear , wobbla 2.8s infinite, växa 40s linear;
  -moz-animation: glidNedåt 40s linear , wobbla 2.8s infinite, växa 40s linear;
  -ms-animation: glidNedåt 40s linear, wobbla 2.8s infinite, växa 40s linear;
  -o-animation: glidNedåt 40s linear, wobbla 2.8s infinite, växa 40s linear;
  animation: glidNedåt 40s linear, wobbla 2.8s infinite, växa 40s linear;
}

.ejSynlig {
  display:none !important;
}

@keyframes wobbla {
    0% {
      transform: rotate(-3deg);
    }
    50% {
      transform: rotate(3deg);
    }
    100% {
      transform: rotate(-3deg);
    }

}


@keyframes växa {
    0% {
        width: 50px;
}

    100% {
      width: 300px;
    }

}


.speglad {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}


.sjunkande {
    display: block;
    position: absolute;

    /*transition: bottom 0.05s;*/

    top: 95%;
    }



#snygg {
  font-family: Arial, Helvetica, sans-serif;

    font-size: 1.7em;
    color:white;
}