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

}



/*.vansterpil {*/
#stängknapp{
    color:white;
    margin:2px;
    position: absolute;
    top:0;
    left:0px;
    font-size: 2em;
    background-color: black;
    padding-left:10px;
    padding-right:10px;
    border-radius: 20px;
    font-family: sans-serif;
}

#startknapp {

  font-family: 'Childish', sans-serif;

  color: #E03;

  text-align: center;


  font-size: 2em;
}

#sluttext {
    text-align: center;
    width:100%;
    margin: auto;
}

.utrotade {
    position: absolute;
    top: 200px;
    font-size: 1.5em;
}

.utrotade-anim {
    -webkit-animation: utrotade-key 4s linear forwards;
    -moz-animation: utrotade-key 4s linear forwards;
    -ms-animation: utrotade-key 4s linear forwards;
    -o-animation: utrotade-key 4s linear forwards;
    animation: utrotade-key 4s linear forwards;
    }


@keyframes utrotade-key {
  0% {right: -300px; color:black; }
  40% {right: -300px; color:black; }
  50% {right: 30px; color: grey;}
  65% {right: 30px; color: white;}
  90% {right: 30px; color:grey;}
  100% {right: -300px; color:black; }

}




.havet {


    height: 100vh;
    position: relative;
    overflow: hidden;
    transition: background-image;
}

.grontHav {
    background-image: linear-gradient(to bottom, blue, rgb(0,200,0));
    /*background-image: linear-gradient(to bottom, blue, green);*/


    /*opacity: 0;*/
    z-index: 5;
}

.rottHav {

    background-image: linear-gradient(to bottom, blue, red);

}


.farobild {
    background-image: url("./faroarna.jpg");
    background-size: cover;
}

.förstorad {
    font-size:2.5em;
    color: white;
}

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

.blink_me2 {
  animation: blinker 2s linear infinite;
}


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


.vit {
    color: white;
}

.bla {
    color: blue;
}

.rod {
    color: red;
}

.storre {
    font-size: 1.2em;
}
.svart {
    color: black;
}

@keyframes blinker {
  50% {
    /*opacity: 0.5;*/
    color: black;
  }
}




@keyframes blinker3 {
  25% {

    color: white;
  }
}


#pris{
    width: 200px;
    margin: auto;
}

.center {

display: inline-block;

}

#slakten{
    max-width: 90%;
}
#stenar {
    position: absolute;
    width: 50%;
    bottom: 100px;
    left: 100px;
}
.ejSynlig {
    display: none;
}

.stigande {
    -webkit-animation: stigning 3s linear forwards;
    -moz-animation: stigning 3s linear forwards;
    -ms-animation: stigning 3s linear forwards;
    -o-animation: stigning 3s linear forwards;
    animation: stigning 3s linear forwards;
    }


.stigande2 {
    -webkit-animation: stigning2 8s linear forwards;
    -moz-animation: stigning2 8s linear forwards;
    -ms-animation: stigning2 8s linear forwards;
    -o-animation: stigning2 8s linear forwards;
    animation: stigning2 8s linear forwards;
    }


#sluttext {
    color:white;
    position: absolute;
    font-size: 1em;
    margin-left: auto;


}

.luft {

    height: 15px;
    width: 15px;
    border: solid black 1px;
    border-radius: 40px;
    display: inline-block;
    opacity: 0.3;



}

#poäng {

    position: absolute;

    left:0.5em;
    top:0.5em;


    color:white;
    font-size: 2em;
    font-family: "Audiowide", sans-serif;
}

.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;
  }
}

.raka {
    position: relative;
    margin: 5px;
}

.fuckad {
    transform: rotate(48deg);
}

@keyframes stigning {
  from {
    bottom: -40px;
  }
  to {
    bottom: 102vh;
  }
}


@keyframes stigning2 {
  from {
    top: calc(100vw + 30em);
  }
  40% {
    top: calc(100vw + 30em);
  }

  to {
    top: 2.5em; /*-20em*/
  }
}


@keyframes glidHoger {
  from {
    left: -40px;
  }
  to {
    left: 102vw;
  }
}

@keyframes glidVanster {
  from {
    right: -40px;
  }
  to {
    right: 102vw;
  }
}

#flagga {
    width: 150px;
}
.tillHoger {
    -webkit-animation: glidHoger 4s linear forwards;
    -moz-animation: glidHoger 4s linear forwards;
    -ms-animation: glidHoger 4s linear forwards;
    -o-animation: glidHoger 4s linear forwards;
    animation: glidHoger 4s linear forwards;
    }

.tillVanster {
    -webkit-animation: glidVanster 4s linear forwards;
    -moz-animation: glidVanster 4s linear forwards;
    -ms-animation: glidVanster 4s linear forwards;
    -o-animation: glidVanster 4s linear forwards;
    animation: glidVanster 4s linear forwards;
    }

.wobblande {
    /*background-color: #222;*/
    animation-name: wobbla;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

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

}

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

.relativBredd {
    width: 20vw;
}


.sjunkande {
    display: block;
    position: absolute;

    /*transition: bottom 0.05s;*/

    top: 95%;
    }



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

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

#titeltext {
   font-family: "Audiowide", sans-serif;
}

/*@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;

    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;



  }

  .relativBredd {
      width: 20vh;
  }
  .havet {
      height: 100vw;

  }

}*/