* {
    margin: 0;
    padding: 0;
    font-family: 'mktitle';
   
}


html{
   background-image: url(/images/bg.png);
   background-position:  2000px -500px;
   background-size: 3000px;
    margin:auto;
    max-width: 1000px;  
    zoom: 70%;
    touch-action: manipulation;
}

body{
    position:fixed;
    height: 950px;
    display: grid;
    grid-template-areas: 
    
    "header header header"
    "main main main"
    "footer footer footer"
    
    ;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: 100px
}

@font-face {
    font-family: 'MKtitle';
    src: url(font/MKtitle.otf);
}

.arkad img{
margin-left: 30px;
margin-top: 30px;
}

header {
  position: relative;
    grid-area: header;
    font-size: 35px;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    text-align: center;
    font-family: MKtitle;
    opacity: 1;
    height: 137px;
    border-bottom: solid 14px rgb(217, 0, 0);
    margin-top: 0px;
    margin-left: 0px;
    background-color: #262014;
    width: 100%;
}

header h1 {
  margin-top: 30px;
  font-size: 64px;
  color: rgb(255, 255, 255);
  animation: fadeIn 4s ease-in-out alternate infinite;
  z-index: 1000;
  text-align: center;
  font-family: MKtitle;
}

main{
    grid-area: main;
    min-height: 640px;
    margin-top: -45px;
    transition: filter 1s;
    z-index: -1;
}

.grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  z-index: -1;
}

.blur {
  position: absolute;
display: block;
  filter: blur(3px);
z-index: -100;
transition: 2s;
overflow: hidden;
}

.score-board {
  background-image: url(/images/fire.gif);
  background-position: left;
  border: 3px solid brown;
  border-radius: 10px;
  width: 150px;
  height: 100px;
  margin-top: -750px;
  margin-left: 420px;
  color: rgb(248, 238, 239);
  font-size: 30px;
  padding: 15px 20px;
} 

.score {
  margin-top: 60px;
}

footer{
    grid-area: footer;
    background-color: cadetblue;
    max-height: 250px;
    margin-top: -67px;
}

.ring{
  position: relative;
    margin-top: -100%;
    z-index: 1000000;
}

.ring img{
  position: relative;
    z-index: 1000000;

    width: 100%;
    margin-top: 5%;
    animation: ringfloat 37.5s infinite;
}

#winnerVideo {
    position: absolute;
    top: 53px; 
    left: -20px;
    z-index: 1000; /* Ställer in ett högt värde för att placera videon överst */
    opacity: 0.8;
}

#loserVideo {
  position: absolute;
  top: -50px; 
  left: -1200px;
  width: 220em;
  z-index: -2; /* Ställer in ett högt värde för att placera videon överst */
  opacity: 0.8;
}


  audio {
    display: none;
}

footer{
  position: relative;
    grid-area: footer;
    background-color: #3D3F61;
    margin-top: 3px;
}

.ring{
  margin-top: -100%;
  z-index: -1;
}

.ring img{
  width: 100%;
  margin-top: 5%;
  animation: ringfloat 37.5s infinite;
}



audio {
  display: none;
}

.joystick-container {
  position: relative;
  bottom: 290px;
  z-index: 3;
  position: absolute;
}
.joystick-1 {
  margin-left: 100px;
  position: absolute;
  z-index: 20;
}
.joystick-1 img {
margin-top: -10px;
width: 180px;
overflow-y: visible;
z-index: 20;
}

.joystick-shadow-1 {
  margin-left: -5px;
  position: absolute;
  width: 100%;
  height: 100%;  
  margin-top: -40px;
  background: url(/images/joystick-1-shadow.png) no-repeat center center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: scaleY(-1);
  opacity: 0.3;
  z-index: -20;
}

.joy-btn {
margin-top: 10px;
margin-left: -145px;
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
opacity: 0;
cursor: pointer;
}

.go {
position: absolute;
width: 140px;
top: 23px;
margin-left: 590px;
}

.duck {
  width: 100px;
  position: absolute;
  margin-left: 300px;
  margin-top: -115px;
}

.go img {
max-width: 100%;
max-height: 100%;
margin-top: -20px;
}

.go-text {
position: absolute;
margin-left: 600px;
top: 130px;
background-color: rgba(0, 0, 0, 0.629);
height: 30%;
width: 120px;
border: 5px solid black;
border-radius: 10px;
overflow: hidden;
margin-top: -20px;
}

.go-text img{
position: absolute;
width: 100%;
height: auto;
animation: changeImage 5s linear infinite;
}

.go-text img.active {
opacity: 1;
}

.go-btn {
position: absolute;
width: 120px;
height: 70px;
margin-left: 15px;
border-radius: 50%;
opacity: 0;
cursor: pointer;
}

@keyframes changeImage {
  0%, 20%, 40%, 60%, 80%, 100% {
      display: none;
  }
  10%, 30%, 50%, 70%, 90% {
      display: block;
  }
}
.reset-btn {
  opacity: 0;
}
.reset {
position: absolute;
width: 130px;
margin-left: 812px;
top: 15px;
cursor: pointer;
}

.reset img {
max-width: 100%;
max-height: 100%;
margin-top: -20px;
}

.reset-text {
position: absolute;
margin-left: 800px;
margin-top: -20px;
top: 130px;
background-color: rgba(0, 0, 0, 0.436);
height: 30%;
width: 170px;
border: 5px solid black;
border-radius: 10px;
overflow: hidden;
}

.reset-text img{
position: absolute;
width: 100%;
height: 100%;
}

.musikspelare{
  margin-top: 5%;
  display: flex;
  background-color: rgb(26, 255, 0);
  width: 100px;
  height: 30px;
  cursor: pointer;
  border-radius: 30px;
  padding-left: 25px;
}

#volumeControl{
  width: 8%;
  cursor: pointer;
}

.animated-background {
  position: relative;
    width: 100%;          
    height: 100%;        
    background-image: url('/images/level1.jfif'); 
    background-repeat: repeat-x;
    display: flex; 
    flex-wrap: wrap;
    align-content: center;
    overflow: hidden;
    margin-top: 5%;
    z-index: -5 ;
    animation: slideshowPanY 37.5s infinite , slideshow 75s infinite ;
}

@keyframes slideshow {
  0%,  25%, 100% {background-image: url("images/level1.jfif" )}
  30%, 35%, 45%, 50% {background-image: url("images/level2.jfif") }
  50%, 55%, 70%, 75% {background-image: url("images/level3.jfif") }
  75%, 80%, 95% {background-image: url("images/level4.jfif") }
  
}
@keyframes slideshowPanY {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-200px);
  }
}

 @keyframes ringfloat {
    0%, 100% {
      transform: translateY(40px) rotate3d(1, 0, 0, 45deg);
    }
    50% {
      transform: translateY(-40px);
    }
  }

.bag {
    top: 38%;
    left: 15%;
    z-index: 0;
    position: absolute;
    animation: bag-animation 1.5s ease-in-out infinite alternate;
    border-radius: 50px;
    display: none;
}

.bag img {
    width: 35%;
    height: 35%;
    filter: contrast(100%);
    filter:saturate(90%);
}


*/


.choices {
  position: relative;
  margin-top: -550px;
  display: block;
  z-index: 10;
}

.hands {
  position: relative;
  z-index: -10;
}

#displayValue {
  font-size: x-large;
  color: white;
  position: absolute;
  opacity: 0;
}

.scissor{
    top: 43%;
    left: 15%;
    position: absolute;
    animation: stone-animation 2s ease-in-out infinite alternate;
    display: none;
}

.scissor img {
    width: 40%;
    height: 40%;
    filter: contrast(100%);
    filter:saturate(90%);
}
  @keyframes scissor-animation {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
}

.stone{
    top: 40%;
    left: 15%;
    position: absolute;
    animation: stone-animation 2s ease-in-out infinite alternate;
    display: block;
}

.stone img {
    width: 40%;
    height: 40%;
    filter: contrast(100%);
    filter:saturate(90%);
}

.moveHumanContainer {
  position: absolute;
  width: 25%;
  height: 85%;
  margin-top: 20px;
  border: 4px solid white;
  margin-left: 200px;
  margin-bottom: 100px;
  border-radius: 50px;
}

.moveHumanContainer img {
  width: 150px;
  margin-top: -50px;
}

.humanScreen {
  position: absolute;
  margin-top: -500px;
  margin-left: 270px;
  transform: rotate(10deg);
}

.humanScreen img {
width: 150px;
}

.exit-sign {
  position: absolute;
  z-index: 100;
}

.exit-sign img {
  width: 100px;
  transform: scaleX(-1);
}

.robotScreen {
  position: absolute;
  margin-top: -550px;
  margin-left: 650px;
  transform: rotate(-10deg);
  rotate: -85deg;
}

.robot-hand {
  display: block;
  top: 40%;
  margin-left: 650px;
  rotate: -90deg;
  animation: robot-hand-animation 3s ease-in-out infinite;
  position: absolute;
}
.robot-hand img {
  width: 120%;
}
.robot-hand1 img {
  width: 120%;
}
.robot-hand2 img {
  width: 120%;
}

.robot-hand1 {
  display: block;
  position: absolute;
  top: 35%;
  margin-left: 650px;
 rotate: -90deg;
  animation: robot-hand-animation 3s ease-in-out infinite;
  display: none;
}

.robot-hand2 {
  position: absolute;
  display: block;
  top: 36%;
  margin-left: 650px;
  rotate: -90deg;
  animation: robot-hand-animation 3s ease-in-out infinite;
  display: none;
}

.arkad {
  position: absolute;
z-index: -300;
width: 1500px;
margin-left: -268px;
margin-top: -92px;
}


.gameboy {
  display: none;
  }

.tamagotchi {
  display: none;
}

  #flash-overlay {
  margin-left: -0px;
  margin-top: 95px;
  position: absolute;
  z-index: 2;
  opacity: 1;
  width: 100%;
    width: 100  0px;
    height: 610px;
    background-color: white;
    opacity: 0;
    pointer-events: none; 
    transition: opacity 0.3s;
    z-index: 1; 
  }

  #dark-overlay {
    margin-left: -0px;
    margin-top: 95px;
    position: absolute;
    z-index: -1;
    opacity: 1;
    width: 100%;
      width: 100  0px;
      height: 610px;
      background-color: rgb(3, 3, 3);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.1s;
    }
    

.screen {
  margin-left: -0px;
  margin-top: 95px;
  position: absolute;
  z-index: 2;
    opacity: 1;
  width: 100%;
  
}

/* .screen::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 435%;
  width: 103%;
  margin-left: -20px;
  margin-right: 450px;
  margin-bottom: 10px;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 10;
    background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}   */

  @keyframes fadeIn {
    0% {
      opacity: 0.4;
    }
    50% {
      opacity: 1;
    }
  }

  .life-bar-container {
    display: flex;
    justify-content: space-between;
    margin: 20px auto;
    width: 95%;
}

.life-bar-left {
    width: 200px;
    height: 20px;
    border: 7px solid;
    border-image: linear-gradient(to right, white, grey, white, grey);
    border-image-slice: 1;
    display: flex;
    padding: 5px;
    margin-right: 250px;
    background-color: rgb(176, 208, 203);
    transform: skewX(30deg);
}

.life-bar-right {
    width: 200px;
    height: 20px;
    border: 7px solid;
    border-image: linear-gradient(to right,  grey, white,  grey, white);
    border-image-slice: 1;
    display: flex;
    padding: 5px;
    background-color: rgb(176, 208, 203);
    transform: skewX(-30deg);
}

.life-item {
    width: 380px;
    height: 20px;
    background-color: brown;
    border: 2px solid rgb(255, 195, 30);
   
}

.text-right {
    float: right;
}

.text-right, .text-left {
text-transform: uppercase;
color: rgb(151, 96, 0);
font-size: x-large;
font-weight: bold;
}
.nameblock {
    margin: 20px auto;
    width: 90%;
}

.img1 {
    width: 5%;
    border-radius: 50%;
    margin-right: -80px;
    border: 2px solid rgb(147, 58, 32);
}
.img2 {
    width: 5%;
    border-radius: 50%;
    margin-left: -80px;
    border: 2px solid rgb(147, 58, 32);
}

.life-bars-block {
  margin-top: -620px;
  margin-left: 0px;
}
.explosion{
  position: relative;
  display: none;
  z-index: -1; 
}
.explosion img{
  height: 750px;
width: 1000px;
  position: relative;
  margin-left: 20px;
  margin-top: -250px;
  opacity: 1;
  z-index: 100000;
}

#endGameMessage {
  display: none;
  color: white; 
  font-size: 25px;
  width: 340px;
  height: 50px;
  font-family: fantasy;
  position: absolute;
  top: 35%; 
  left: 50%;
  transform: translate(-50%, -50%); 
  z-index: 1000; 
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  opacity: 0.4;
}


.humanScreen {
  margin-top: -560px;
  margin-left: 200px;
  transform-origin: left;
  animation: shakeHuman 0.9s ease infinite;
}
.humanScreen img {
  width: 120%;
}
@keyframes shakeHuman {
 50% {

  transform: translateY(10px); 
}

}

.robotScreen {
  margin-top: -515px;
  transform-origin: left;
  animation: shakeRobot 0.9s ease infinite;
}
.robotScreen img {
  width: 140%;
}
@keyframes shakeRobot {
50% {
  transform: translateX(10px);
}
}

#gameover {
  height: 50px;   
  margin-left: 290px;
  margin-top: -660px;
  opacity: 0;
  margin-right: 380px;
    position: absolute;
    opacity:0;
    display: block;
    z-index: 10;
    }
  

#pressreset{
  position: absolute;
  height: 50px;   
  margin-left: 290px;
  margin-top: -400px;
  opacity: 0;
  margin-right: 380px;
    position: absolute;
    display: block;
    z-index: 10;
    }

    @keyframes pressreset1 {
      0%, 49%  {
        opacity: 1
      }
      50%, 100% {
        opacity: 0
      }
    }
  

#result {
  height: 50px;
  margin-top: -800px;
  margin-left: 550px;
  margin-right: 380px;
  position: absolute;
  opacity:0;
  display: block;
  z-index: 10;
  }

  @keyframes result1 {
    0%, 24%  {
      margin-left: 290px;
      margin-top: -660px;
      opacity: 0
    }
    25%, 30%  {
      margin-left: 290px;
      margin-top: -660px;
      opacity: 0.5;
    }
    31%, 84% {
      opacity: 1;
      margin-left: 290px;
      margin-top: -660px;
    }
    
    85%,91% {
      font-size: 130px;
      opacity: 0.66;
      margin-left: 290px;
      margin-top: -660px;
    }
   92%, 100% {
      font-size: 130px;
      opacity: 0.33;
      margin-left: 290px;
      margin-top: -660px;
    }
  
  }


/* 

  __i
 |---|    
 |[_]|    
 |:::|    
 |:::|    
 `\   \   
   \_=_\ 
 

MINDRE DEVAJSES>>>>>>>  */
  
#mario {
  position: absolute;
  margin-top: 120px;
  display: none;
}

#mario img {
  width: 80px;
}

#bigMario {
  position: absolute;
  margin-top: -800px;
  z-index: 2;
  display: none;
}

#bigMario img{
  width: 200px;
  visibility: hidden;
}

@media (max-width: 750px ) {
html { 
  margin-top: 50px;
  zoom: 70%;
  width: 100rem;
  background-image: url(/images/bg.png);
  background-position:  2000px -500px;
  background-size: 3000px;
  


 }
header {
  position: relative;
    grid-area: header;
    font-size: 35px;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    text-align: center;
    font-family: MKtitle;
    opacity: 1;
    height: 237px;
    border-bottom: solid 14px rgb(217, 0, 0);
    margin-top: -100px;
    margin-left: 0px;
    background-color: #262014;
    width: 100%;
    z-index: 10;
}
header h1 {
margin-top: 100px;
}
}

/* 
 _n_________________
|_|_______________|_|
|  ,-------------.  |
| |  .---------.  | |
| |  |         |  | |
| |  |         |  | |
| |  |         |  | |
| |  |         |  | |
| |  `---------'  | |
| `---------------' |
|   _ GAME BOY      |
| _| |_         ,-. |
||_ O _|   ,-. "._,"|
|  |_|    "._,"   A | hjw
|    _  _    B      | `97
|   // //           |
|  // //    \\\\\\  |
|  `  `      \\\\\\ ,
|________...______,"

GEJMBOY!!!!!!!!!!!!!!!!!!!!>>>>>>>>>>>>>>>>>>
*/
@media (max-width: 550px ) {
  html {
    margin:auto;
    margin-top: 10%;
    zoom: 40%;
    width: 200em;
    background-image: none;
   background-color: black;
  }

main .screen{
    width: 64rem;
}

header {
  width: 10000px;
  
}

footer {
  margin:auto;
  margin-top: 500px; 
  width: 64rem;
z-index: 1000;
opacity: 0;
}

@keyframes slideshowPanY {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-100px);
  }
}

.ring img{
  width: 100%;
  margin-top: 20%;
  animation: ringfloat 37.5s infinite;
}

.joy-btn {
  margin-top: 200px;
  margin-left: -300px;
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  opacity: 0;
  }

.go-btn {
    position: absolute;
    margin-top: -50px;
    width: 200px;
    height: 200px;
    margin-left: 50px;
    border-radius: 50%;
    opacity: 0;
    }

.reset {
  margin-top: -90px;
  width: 300px;
  height: 200px;
  opacity: 1;
}

#endGameMessage {
  margin-top: 85px;
}

header {
  margin:auto;
  display: none;
}
 

.arkad img{
  opacity: 0;
  } 

.gameboy {
  display: block;
  position: absolute;
z-index: -300;
width: 100%;
margin-left: -280px;
margin-top: -92px;
z-index: 100;
width: 72em;
}

.gameboy img{
    
    margin-left: 30px;
    margin-top: 30px;
  } 
}

/* 
          __O__
        .'     '.
      .'         '.
     .  _________  .
     : |   .-.   | :
    :  |  ( - )  |  :
    :  |   " "   |  :
    :  |_________|  :
     |             |
     '   O     O   '
      ',    O    ,'
        '.......'

Tamagotchi
 */

@media (max-width: 350px ) {
  html {
    margin:auto;
    margin-top: 30%;
    zoom: 25%;
    width: 250em;
    background-image: none;
   background-color: rgb(0, 0, 0);
  }

main .screen{
  margin-top: 110px;
}

header {
  width: 10000px;
  
}

footer {
  margin:auto;
  margin-top: 500px; 
  width: 64rem;
z-index: 1000;
opacity: 0;
}

.ring img{
  width: 100%;
  margin-top: 20%;
  animation: ringfloat 37.5s infinite;
}

#joystickImage {
  display: none;
}

.joy-btn {
  margin-top: -70px;
  margin-left: 200px;
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 1;
  }

.go-btn {
    position: absolute;
    margin-top: -240px;
    width: 100px;
    height: 100px;
    margin-left: -100px;
    border-radius: 50%;
    opacity: 1;
    z-index: 10000000;
    color: red;
    background-color: red;
    }

.reset {
  position: absolute;
  margin-top: -280px;
  margin-left: 640px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

header {
  margin:auto;
  display: none;
}
 

.arkad img{
  opacity: 0;
  } 

  .text-left{
    margin-left: 70px;
    font-size: 2rem;
  }

  .text-right{
    margin-right: 70px;
    font-size: 2rem;
  }

  .img1 {
    margin-left: 60px;
    margin-top: -10px;
  }

  .img2 {
    margin-right: 50px;
    margin-top: -10px;
  }

  .life-bar-left {
    margin-left: 70px;
    margin-top: 10px;
  }

  .life-bar-right {
    margin-right: 65px;
    margin-top: 5px;
  }

.gameboy {
  opacity: 0;
}

#endGameMessage {
  margin-top: 80px;
}

.gameboy img{
opacity: 0;
  } 

.tamagotchi {
    display: block;
    position: absolute;
    z-index: -300;
    width: 100%;
    margin-left: -280px;
    margin-top: -92px;
    z-index: 100;
    width: 115em;
    opacity: 1;
}

.tamagotchi img {
  margin-top: -14em;
  margin-left: 13em;
  width: 75em;
}}

.ufot {
  background: url(/images/ufo.png);
  background-size: cover;
  position: absolute;
  margin-top: 250px;
  z-index: 30;
  Display: none;
  height: 100px;
  width: 200px;
  animation: skuttande 5s linear infinite;


}

.ufot:hover{
cursor: crosshair;
}


@keyframes skuttande {
  0%, 100% { transform: translateX(0) translateY(0); }
  5% { transform: translateX(90px) translateY(-200px); }
  10% { transform: translateX(180px) translateY(0); }
  15% { transform: translateX(270px) translateY(-100px); }
  20% { transform: translateX(360px) translateY(0); }
  25% { transform: translateX(450px) translateY(200px); }
  30% { transform: translateX(540px) translateY(0); }
  35% { transform: translateX(630px) translateY(100px); }
  40% { transform: translateX(720px) translateY(0); }
  45% { transform: translateX(810px) translateY(250px); }
  50% { transform: translateX(900px) translateY(0); }
  55% { transform: translateX(810px) translateY(150px); }
  60% { transform: translateX(720px) translateY(0); }
  65% { transform: translateX(630px) translateY(200px); }
  70% { transform: translateX(540px) translateY(0); }
  75% { transform: translateX(450px) translateY(200px); }
  80% { transform: translateX(360px) translateY(0); }
  85% { transform: translateX(270px) translateY(100px); }
  90% { transform: translateX(180px) translateY(0); }
  95% { transform: translateX(90px) translateY(300px); }
}