html,body {
    overflow: hidden;
}
body {
    padding: 0;
    margin: 0;
    width:100vw;
    height:100vh;
    position:relative;
}

/* Game Frame Elements */
.gameFrame {
    /*display: flex;
    flex-direction: column;*/
    position: relative;
    width: 100vw;
    height: 100vh;
    background:white;
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;
    user-select: none !important;
    -ms-user-select: none !important;
    -webkit-user-select: none !important;
}

.gameFrame * {
    user-select: none !important;
    -ms-user-select: none !important;
    -webkit-user-select: none !important;
}

.gameInfobar {
    position: absolute;
    width: 100%;
    height: 85px;
   /* background: yellow;*/
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: none;
    z-index: 9;
}

.gameInfobarElement {
   /* background:red;*/
    padding: 1vh;
}

#gameTimer {
    width: 85px;
    height: 25px;
    border-radius: 20px;
    background-color: #FC4322;
    text-align: center;
    vertical-align: middle;
    line-height: 25px;
    font-weight: bold;
    color: #ffffff;
    font-size: 175%;
}


/* Game Stars */
#gameStars {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.score_star {
    mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 512.01 512.01' style='enable-background:new 0 0 512.01 512.01;' xml:space='preserve' sodipodi:docname='stars-starry-svgrepo-com.svg' inkscape:version='1.0.2 (e86c8708, 2021-01-15)'%3E%3Cmetadata id='metadata241'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs239' /%3E%3Csodipodi:namedview pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1' objecttolerance='10' gridtolerance='10' guidetolerance='10' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:window-width='1755' inkscape:window-height='1096' id='namedview237' showgrid='false' inkscape:zoom='1.4355188' inkscape:cx='256.005' inkscape:cy='256.005' inkscape:window-x='0' inkscape:window-y='25' inkscape:window-maximized='0' inkscape:current-layer='Layer_1' /%3E%3Cg id='g234' transform='matrix(2,0,0,2,2.3214643e-4,-512.009)'%3E%3Cg id='g232'%3E%3Cg id='g230'%3E%3Cpath d='M 237.903,337.736 175.439,328.2 147.322,268.275 c -3.52,-7.488 -11.051,-12.267 -19.307,-12.267 -8.277,0 -15.808,4.779 -19.328,12.267 L 80.57,328.2 18.106,337.736 c -7.893,1.216 -14.443,6.741 -17.003,14.315 -2.539,7.595 -0.619,15.957 4.971,21.675 l 45.803,46.955 -10.859,66.56 c -1.301,8.064 2.112,16.171 8.789,20.864 6.677,4.715 15.488,5.184 22.592,1.237 l 55.616,-30.72 55.595,30.72 c 3.2,1.771 6.763,2.667 10.304,2.667 4.331,0 8.64,-1.323 12.309,-3.904 6.656,-4.693 10.069,-12.8 8.768,-20.864 l -10.859,-66.56 45.803,-46.955 c 5.589,-5.717 7.509,-14.08 4.971,-21.675 -2.539,-7.574 -9.11,-13.099 -17.003,-14.315 z' id='path228' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 512.01 512.01' style='enable-background:new 0 0 512.01 512.01;' xml:space='preserve' sodipodi:docname='stars-starry-svgrepo-com.svg' inkscape:version='1.0.2 (e86c8708, 2021-01-15)'%3E%3Cmetadata id='metadata241'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs239' /%3E%3Csodipodi:namedview pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1' objecttolerance='10' gridtolerance='10' guidetolerance='10' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:window-width='1755' inkscape:window-height='1096' id='namedview237' showgrid='false' inkscape:zoom='1.4355188' inkscape:cx='256.005' inkscape:cy='256.005' inkscape:window-x='0' inkscape:window-y='25' inkscape:window-maximized='0' inkscape:current-layer='Layer_1' /%3E%3Cg id='g234' transform='matrix(2,0,0,2,2.3214643e-4,-512.009)'%3E%3Cg id='g232'%3E%3Cg id='g230'%3E%3Cpath d='M 237.903,337.736 175.439,328.2 147.322,268.275 c -3.52,-7.488 -11.051,-12.267 -19.307,-12.267 -8.277,0 -15.808,4.779 -19.328,12.267 L 80.57,328.2 18.106,337.736 c -7.893,1.216 -14.443,6.741 -17.003,14.315 -2.539,7.595 -0.619,15.957 4.971,21.675 l 45.803,46.955 -10.859,66.56 c -1.301,8.064 2.112,16.171 8.789,20.864 6.677,4.715 15.488,5.184 22.592,1.237 l 55.616,-30.72 55.595,30.72 c 3.2,1.771 6.763,2.667 10.304,2.667 4.331,0 8.64,-1.323 12.309,-3.904 6.656,-4.693 10.069,-12.8 8.768,-20.864 l -10.859,-66.56 45.803,-46.955 c 5.589,-5.717 7.509,-14.08 4.971,-21.675 -2.539,-7.574 -9.11,-13.099 -17.003,-14.315 z' id='path228' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: rgba(198, 198, 198, 0.6);
    width:40px;
    height:40px;
    margin: 0 10px;
    transition: all 400ms;
}

.score_filled {
    background-color:rgba(255, 238, 0, 1);
    transform: scale(1.2);
    
}


/* Scenes */
.scenes, .levels {
    position: absolute;
    width: 100vw;
    height: 100vh;
    
    cursor: none;
}

.levels {
    transform: translateY(-200vh);
    transition: transform 700ms;
}

#videoScene, #sceneIntro, #gameOver {
    transform: translateY(100vh);
    transition: transform 700ms;
    z-index: 10;
    cursor: initial !important;
}



.scenes .gameScene {
    position: relative;
    width: 100vw;
    height: 100vh;
    cursor: none;
    overflow: hidden;
}

.gameScene img {
    object-fit: cover;
    object-position: center center;
    -o-object-fit: cover;
    -o-object-position: center center;
}

.scene_levelCompleted,
.scene_textLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    text-shadow: 0 0 10px white;
    z-index: 5;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    background:rgba(95,95,95,0.3);
    
}

.scene_levelCompleted span,
.scene_textLayer span {
    background: white;
    font-weight: bold;
    text-align:center;
    padding: 25px;
    font-size: 155%;
    border-radius: 35px;
    max-width:76vw;
    line-height: 175%;
}

.scene_textLayer.visible {
    display: flex;
    animation:congratulation 5s;
}

.scene_levelCompleted.visible {
    display: flex;
    /*animation:congratulation2 1.2s;*/
}

/* Scene Background */
.sceneBackground {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

.sceneBackground img {
    width: 100%;
    height: 100%;
}

/* Scene Person */
.scenePerson {
    position: absolute;
    width: 100vw;
    height: 40vh;
    bottom: -4vh;
    left: 0;
    z-index: 2;
}

.scenePerson img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

/* scene_mouse */
.scene_mouse {
    position: absolute;
    width: 128px;
    height: 128px;
    z-index: 9;
}

.scene_mouse img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -o-object-fit: contain;
    object-position: top left;
    -o-object-position: top left;
}

.scene_mouse .cursor_active {
    display: none;
}

.cursor_hover .scene_mouse .cursor_active {
    display: initial;
}

.cursor_hover .scene_mouse .cursor_inactive {
    display: none;
}

/* Scene 1 */
.scene1_teddybear {
    position: absolute;
    top: 10vh;
    right: 10vw;
    width: 27vw;
    height: 40vh;
    z-index: 3;
    object-fit: contain !important;
    -o-object-fit: contain !important;
}

.scene1_teddybear:hover {
    animation: shake 1s;
    animation-iteration-count: 1;
}

.scene1_sink {
    position: absolute;
    top: 7vh;
    left: 8vw;
    width: 35vw;
    height: 56vh;
    z-index: 3;
    object-fit: contain !important;
    -o-object-fit: contain !important;
}

.scene1_sink img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    -o-object-fit: contain !important;
}

.scene1_sink .interact_off {
    display: none;
}

.scene1_sink:hover {
    animation: shake 1s;
  animation-iteration-count: 1;
}


/* Scene 2 Robert */
.scene2_tv {
    position: absolute;
    top: 10vh;
    left: 3vw;
    width: 55vw;
    height: 55vh;
    z-index: 3;
    object-fit: contain !important;
    -o-object-fit: contain !important;
}

.scene2_tv:hover {
    animation: shake 1s;
    animation-iteration-count: 1;
}


.scene2_power {
    position: absolute;
    top: 14vh;
    right: 7vw;
    width: 25vw;
    height: 60vh;
    z-index: 3;
    object-fit: contain !important;
    -o-object-fit: contain !important;
}

.scene2_power .interact_off {
    display: none;
}

.scene2_power img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    -o-object-fit: contain !important;
}

.scene2_power:hover {
    animation: shake 1s;
  animation-iteration-count: 1;
}

/* Scene 3 Andre */
.scene3_trashcan {
    position: absolute;
    top: 7vh;
    left: 9vw;
    width: 25vw;
    height: 80vh;
    z-index: 4;
    object-fit: contain !important;
    -o-object-fit: contain !important;
}

.scene3_box {
    position: absolute;
    top: 27vh;
    right: 2vw;
    width: 37vw;
    height: 40vh;
    z-index: 4;
    object-fit: contain !important;
    -o-object-fit: contain !important;
}



.scene3_batteries {
    position: absolute;
    top: 27vh;
    left: 35vw;
    width: 30vw;
    height: 30vh;
    z-index: 4;
    object-fit: contain !important;
    -o-object-fit: contain !important;
    user-select: all !important;
    -ms-user-select: all !important;
    -webkit-user-select: all !important;
}

.scene3_batteries:hover {
    animation: drag 2s;
    animation-iteration-count: 3;
}

.scene3_wrong:hover,
.scene3_droparea:hover {
    animation: shake 1s;
    animation-iteration-count: 1;
}


/* Scene 4 */
#scene4 .scenePerson {
    bottom: -17vh;
}

.scene4_pan {
    position: absolute;
    top: 20vh;
    width: 30vw;
    height: 30vh;
    z-index: 4;
    object-fit: contain !important;
    -o-object-fit: contain !important;
    transition: transform 500ms;
}

.scene4_greasepan_left {
    left: 7vh;
}

.scene4_greasepan_left:hover {
    transform: rotate(8deg);
}

.scene4_greasepan_right {
    right: 7vh;
    z-index: 3;
}
.scene4_greasepan_right:hover {
    transform: rotate(-8deg);
}

.scene4_sink {
    position: absolute;
    left: 10vw;
    top: 32vh;
    width: 32vw;
    height: 32vh;
    z-index: 3;
    object-fit: contain !important;
    -o-object-fit: contain !important;
}

.scene4_sink:hover {
     animation: shake 1s;
  animation-iteration-count: 1;
}

.scene4_jar {
    position: absolute;
    right: 17vw;
    top: 45vh;
    width: 22vw;
    height: 22vh;
    z-index: 3;
    object-fit: contain !important;
    -o-object-fit: contain !important;
}

.scene4_jar:hover {
     animation: shake 1s;
  animation-iteration-count: 1;
}

.scene4_sink:hover,
.scene4_jar:hover {
    /*animation: nudge 2s;*/
    /*-o-animation-iteration-count: 3;*/
}

#scene4 .scene_mouse {
    width:285px;
    height: 285px;
}

/* Video Scene */
#videoscene {
    background: #0071c2;
    transform: translateY(-100vh);
    transition: none !important;
}

#videoscene.visible {
    transform: translateY(0);
}

#game_videoplayer {
    width: 90vw;
    height: auto;
    min-height: 100vh;
    margin-left: 5vw;
}

/* Intro Scene */
#sceneIntro {
    background-color: #0071c2;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-basis: auto;
    flex-direction: column;
    align-items: center;
    transition: none;
}

.intro_textLayer {
    position: absolute;
    top: 7vh;
    max-width: 80vw;
    background:white;
    border-radius: 35px;
    padding: 25px;
    font-size:175%;
    line-height: 205%;
    text-align: center;
    font-weight: bold;
}

#startGameButton {
    display: inline;
    width: 250px;
    height: auto;
    background: white;
    border-radius: 25px;
    padding: 15px 40px;
    text-decoration: none;
    font-weight: bold;
    font-size: 220%;
    text-align: center;
    z-index: 9;
    position: absolute;
    top: 31vh;
    color: #FC4322;
    transition: transform 700ms;
}

#startGameButton:hover {
    transform: scale(1.1);
}

#sceneIntro.visible {
    transform: translateY(-100vh);
}

.startSceneTrucks {
    width: 100vw;
    height: 50vh;
    object-fit: contain !important;
    -o-object-fit: contain !important;
    position: absolute;
    left: 0;
    bottom: 0;
}

/* Game over */
#gameOver {
    background-color:#8acf25;
}

#go_infoText {
    font-size: 7vw;
    background: white;
    border-radius: 50px;
    padding: 25px;
    width: 80vw;
    min-height: 25vh;
    line-height: 25vh;
    text-align: center;
    margin: 0 auto;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 8vh;
    color: #FC4322;
}

.go_buttons {
    margin-top: 3vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

#go_actionButton2,
#go_actionButton {
    margin: 20px;
    min-width: 10vw;
    max-width: max-content;
    padding: 15px;
    text-align: center;
    background: #FC4322;
    border-radius: 25px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 2.3vh;
}

#go_actionButton2:hover,
#go_actionButton:hover {
    animation:nudge 700ms;
    transform: scale(1.1);
}

.go_leftImage {
    position: absolute;
    left: -45vw;
    bottom: 0;
    width: 45vw;
    height: 40vh;
    transition: all 1900ms;
}

.go_rightImage {
    position: absolute;
    right: -45vw;
    bottom: 0;
    width: 45vw;
    height: 40vh;
    transition: all 1500ms;
}

.go_image {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    -o-object-fit: contain !important;
}

#gameOver.visible {
    transform: translateY(-200vh);
}

#gameOver.visible .go_leftImage {
    left: 0;
}

#gameOver.visible .go_rightImage {
    right: 0;
}

/* Level up */
.gameCongratulation {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    background: transparent;
    width: 100vw;
    height: 100vh;
    animation:none;
    text-align: center;
    font-size: 150%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: default !important;
    background:rgba(95,95,95,0.3);
}

.gameCongratulation span {
    background: white;
    font-weight: bold;
    padding: 25px;
    border-radius: 35px;
    max-width:75wv;
}

.gameCongratulation.visible {
    animation:congratulation2 1.2s;
    animation-fill-mode: forwards;
    display: flex;
    
}

.go_nextLevel {
    display:block;
    margin: 20px auto;
    min-width: 10vw;
    max-width: max-content;
    padding: 15px;
    text-align: center;
    background: #FC4322;
    border-radius: 25px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 2.3vh;
}

.go_nextLevel:hover {
    animation:nudge 700ms;
    transform: scale(1.1);
}


/* Game Wrong Answer */
.gameWrongAnswer {
    position: absolute;
    top: 0;
    left: 0;
    width: 15vw;
    height: 15vw;
    z-index: 7;
    display:none;
    cursor: none !important;
}

.gameWrongAnswer.visible {
    animation:nudge 0.25s;
    animation-iteration-count: 10;
    display: flex;
}

.gameWrongAnswer img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    -o-object-fit: contain !important;

}

/* Game Certificate */
.gameCertificate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 21;
    display: none;
    background: white;
}

.gameCertificate.visible {
    display: block;
}

.certificate {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -o-object-fit: contain;
}

.certificate_name {
    position: absolute;
    top: 47vh;
    width: 50vw;
    left: 26vw;
    text-align: center;
    display: block;
    background: transparent;
    border: none;
    font-size: 225%;
    outline: none;
    z-index: 999;
    -webkit-user-select: initial !important;
    user-select: initial !important;
    
}

.gameCertificate a {
    background-color: white;
    color: #FC4322;
    font-weight: bold;
    font-size: 175%;
    padding: 10px 25px;
    position: absolute;
    bottom: 2vh;
    border-radius: 10px;
    text-decoration: none;
}

#certificatePrintButton {
    left: 2vw;
}

#certificateClose {
    right: 2vw;
}



/* Animation Keyframes */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

  @keyframes drag {
      0% { transform: translateX(0); }
      33% { transform: translateX(-25px); }
      66% { transform: translateX(25px); }
      100% { transform: translateX(0) }
  }

  @keyframes nudge {
      0% { transform: rotate(0);}
      33% { transform: rotate(5deg);}
      66% { transform: rotate(-5deg);}
      100% { transform: rotate(0);}
  }

  @keyframes congratulation {
      0% { opacity: 0; transform: scale(0);}
      10% { opacity: 1; transform: scale(1); }
      75% { opacity: 1; transform:scale(1);}
      100% { opacity: 0; transform: scale(2.5);}
  }

  @keyframes congratulation2 {
    0% { opacity: 0; transform: scale(0);} 
    100% { opacity: 1; transform: scale(1);}
}


  /* Print Certificate */
  @media print { 
    html, body 
    { width:11in !important; 
    height: 8.5in !important;
overflow:visible !important;}
    body * {
      visibility: hidden !important;
    }
    .gameCertificate,
    .gameCertificate * {
      visibility: visible !important;
    }
    .gameCertificate {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      display: block !important;
      width:100% !important;
      height:100% !important;
    }

    .gameCertificate img {
        height: 100% !important;
        
    }

    .gameCertificate a {
        visibility: hidden !important;
    }
  }

  @page {
    size: A4 landscape;
  }


  /* responsive */
  @media screen and ( max-width: 1366px) {

    .intro_textLayer {
        font-size:125%;
    }

  }

  @media screen and ( max-width: 1220px) {

    .intro_textLayer {
        font-size: 95%;
        padding: 15px;
    }
    .scene_levelCompleted span, .scene_textLayer span {
        font-size: 110%;
    }

    .gameInfobar {
        scale:.7;
    }

    .scene3_batteries:hover {
        animation:none;
    }


  }

  @media screen and (orientation:portrait) {
      /*.scene4_sink {
          top:45vh;
      }*/
  }