@keyframes opacity_switch {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes jump_anim {
  0% {
    transform: translateY(0%);
  }
  40% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes monologAppear {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes waiting_anim_one {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes waiting_anim_two {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  26% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  76% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes sky_cycle {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 100% center;
  }
}
@keyframes transitEngineStart {
  33% {
    transform: translateY(0%);
  }
  66% {
    transform: translateY(0.5%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes transitRide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes pressE {
  0% {
    background-image: url(../PNG/PressE.png);
  }
  49% {
    background-image: url(../PNG/PressE.png);
  }
  50% {
    background-image: url(../PNG/PressE2.png);
  }
  100% {
    background-image: url(../PNG/PressE2.png);
  }
}
@keyframes train_ride {
  0% {
    transform: translateY(1%);
  }
  50% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(1%);
  }
}
@keyframes gameTransition {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}
@keyframes controlsFade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@font-face {
  font-family: "Jersey";
  src: url(../Font/Jersey15-Regular.ttf);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 0.6em;
  font-family: "Verdana", "Arial", sans-serif;
  line-height: 1.3;
  color: #373737;
  font-family: "Jersey";
}

.game {
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: #373737;
}
.game .sound {
  position: absolute;
  width: auto;
  height: auto;
  bottom: 6%;
  right: 5vw;
  direction: rtl;
  z-index: 15;
}
.game .sound .sound-icon {
  width: 6vh;
  position: absolute;
  inset: 0;
  margin: auto;
}
.game .sound .sound-off {
  display: none;
}
.game .frame {
  width: 90%;
  height: 85%;
  margin: 30px auto auto auto;
  border: 5px solid rgb(85, 85, 85);
  overflow: hidden;
  overflow-x: hidden;
  background-color: #373737;
}
.game .frame .controls {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  opacity: 0;
  animation: controlsFade 5s 13s forwards;
  z-index: 5;
}
.game .frame .controls img {
  margin: auto;
  margin-top: 10%;
  height: 10%;
}
.game .frame .background {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.game .frame .background .grass {
  position: absolute;
  bottom: 0%;
  width: 100%;
  height: 300px;
  background-image: url(../PNG/Ground\ -\ experiment.png);
  background-position: 0% 100%;
  background-size: auto 95%;
  background-repeat: no-repeat;
  z-index: 3;
}
.game .frame .background .train {
  position: absolute;
  bottom: 0%;
  width: 100%;
  height: 490px;
  background-image: url(../PNG/Train\ -\ test.png);
  background-position: 0% 100%;
  background-size: auto 88%;
  background-repeat: no-repeat;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 4;
}
.game .frame .background .transit {
  position: absolute;
  bottom: 0%;
  width: 100%;
  height: 400px;
  background-image: url(../PNG/Transit\ -\ test.png);
  background-position: 31% 140%;
  background-size: auto 80%;
  background-repeat: no-repeat;
  z-index: 3;
  animation-duration: 0.1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.game .frame .background .surroundings {
  position: absolute;
  bottom: 0%;
  width: 100%;
  min-height: 100vh;
  background-image: url(../PNG/surroundings\ -\ main.png);
  background-position: 0% 40%;
  background-size: auto;
  background-repeat: no-repeat;
  z-index: 2;
}
.game .frame .background .sky {
  position: absolute;
  top: 0px;
  width: 100%;
  min-height: 65vh;
  background-image: url(../PNG/Sky.png);
  background-position: 0% center;
  background-size: auto;
  background-repeat: repeat x;
  z-index: 1;
}
.game .frame .background .announcement_box {
  position: absolute;
  display: none;
  top: 0px;
  left: 0px;
  width: 90%;
  height: 85%;
  z-index: 5;
}
.game .frame .background .announcement_box .announcement_field {
  display: flex;
  height: 150px;
  width: 150px;
  margin: 8% auto;
}
.game .frame .background .announcement_box .announcement_field .announcement_text {
  margin: auto;
  background-image: url(../PNG/PressE.png);
  background-size: auto;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
  animation-name: pressE;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.game .frame .character {
  position: absolute;
  min-width: 150px;
  min-height: 300px;
  bottom: 22%;
  left: 10%;
  z-index: 4;
}
.game .frame .character .monologField {
  position: absolute;
  bottom: 80%;
  left: 85%;
}
.game .frame .character .monologField p {
  font-size: clamp(1rem, 3vw, 2rem);
}
.game .frame .character .monologField .monolog {
  position: absolute;
  bottom: 0%;
  width: 200px;
  height: auto;
  background-color: rgba(255, 255, 255, 0.875);
  border: 3px solid rgb(52, 52, 52);
  text-align: center;
  opacity: 0;
}
.game .frame .character .monologField .monologOne {
  animation: monologAppear 2s 1s 1 forwards;
}
.game .frame .character .monologField .monologTwo {
  animation: monologAppear 5s 4s 1 forwards;
}
.game .frame .character .monologField .monologThree {
  animation: monologAppear 3s 9s 1 forwards;
}
.game .frame .character .image_position {
  margin: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
}
.game .frame .character .standing_opacity {
  opacity: 1;
}
.game .frame .character .waiting_one_on {
  animation-name: waiting_anim_one;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.game .frame .character .waiting_two_on {
  animation-name: waiting_anim_two;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.game .frame .character .waiting_three_on {
  animation-name: waiting_anim_one;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-delay: 0.5s;
}
.game .frame .character .walking_one_on {
  animation-name: opacity_switch;
  animation-duration: 0.35s;
  animation-iteration-count: infinite;
}
.game .frame .character .walking_two_on {
  animation-name: opacity_switch;
  animation-duration: 0.35s;
  animation-delay: 0.175s;
  animation-iteration-count: infinite;
}
.game .frame .character .jumping_up_on {
  animation-name: opacity_switch;
  animation-duration: 0.6s;
}
.game .frame .character .jumping_down_on {
  animation-name: opacity_switch;
  animation-duration: 0.6s;
  animation-delay: 0.3s;
}
.game .frame .transform_anim {
  animation-name: jump_anim;
  animation-duration: 0.6s;
}

/*

@media screen and (max-height:1350px) {
    .game {

        .frame {

            .background {

                .grass {
                    bottom:-2%;
                }

                .train {
                    bottom:-2%;
                }

            }
        }
    }
}


@media screen and (max-height:1200px) {
    .game {

        .frame {

            .background {

                .grass {
                    bottom:-4%;
                }

                .train {
                    bottom:-4%;
                }

            }
        }
    }
}


@media screen and (max-height:850px) {
    .game {

        .frame {

            .background {

                .grass {
                    bottom:-10%;
                }

                .train {
                    bottom:-10%;
                }

            }
        }
    }
}

@media screen and (max-height:500px) {
    .game {

        .frame {

            .background {

                .grass {
                    bottom:-22%;
                }

                .train {
                    bottom:-22%;
                }

            }
        }
    }
}

*//*# sourceMappingURL=styleMain.css.map */