@font-face {
   font-size: clamp(1rem, 0.9077rem + 0.4103vw, 1.2rem);
   font-family: 'bleeding_cowboys';
   src: url('./fonts/Bleeding_Cowboys.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}



.hidden-gameplay-screen {
   display: none !important;
}

.end-screen {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   background-image: url("img/10_design/wuste-sonnenuntergang.jpg");
   width: 100vw;
   height: 100vh;
   background-position: center;
   background-size: cover;
}

.game-over-container,
.win-container {
   font-size: 6rem;
   text-align: center;
   text-shadow: 5px 5px #ff0000;
}

.hidden-element {
   display: none !important;
}

.endscreen-hidden {
   display: none;
   z-index: 10;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

.pointer {
   cursor: pointer;
}

.flex-contain {
   display: flex;
   flex-direction: column;
   margin-left: 4rem;
   margin-right: 4rem;
}

.text-panel {
   font-size: 0.75rem;
   display: flex;
   align-items: center;

   flex-wrap: wrap;
}


canvas {
   background-color: black;

}

body {
   overflow: hidden;
   font-family: 'bleeding_cowboys', Arial, Helvetica, sans-serif;
   display: flex;
   flex-direction: column;
   align-items: center;
   overflow: hidden;
   padding: 0px;
   margin: 0px;
   color: #FDF359;
}

h1 {
   position: relative;
   text-align: center;
   color: #FDF359;
   text-shadow: 1px 1px 5px #FDF359;
   margin: 0;
   width: 100%;
}



.canvas-width-fullscreen {
   width: calc(100% - 0.5rem);
   height: calc(100% - 7rem);
}

.canvas-width-fullscreen-without-key {
   height: calc(100% - 3rem) !important;
}

.icon-contain-h1 {
   display: flex;
   align-items: center;
   margin-right: 2rem;

}

.icon-contain-h1-position {
   display: flex;
   align-items: center;
   justify-content: space-around;
   background-color: #994409;
   border-left: solid 0.25rem;
   border-right: solid 0.25rem;
   height: 2.5rem;
   border-color: rgb(218, 66, 1);


}

.icon-contain-h1-position-border {
   border-bottom-left-radius: 1rem;
   border-bottom: solid 0.25rem;
   box-shadow: 5px 1px 8px rgb(218 66 1 / 50%);
   border-bottom-right-radius: 1rem;
   border-color: rgb(218, 66, 1);
}

.h1-icon {
   z-index: 10;
   padding: 0.25rem;
   cursor: pointer;
   height: 1.25rem;
   width: 1.25rem;
   margin-right: 2rem;
   margin-bottom: 0.5rem;
}



.hover-mouse:hover {
   color: #FCFFBF;
}


.h1-icon:hover {
   background-color: #FCFFBF;

}

.exitFullscreenHidden {
   display: none !important;
}

#start_img_game_design {
   border-radius: 1rem;
   box-shadow: 5px 10px 8px rgba(218, 66, 1, 0.5);
   border: solid rgb(218, 66, 1) 0.25rem;
   width: 100%;
}


#startSide {
   position: relative;
   display: flex;
   justify-content: start;
   align-items: center;
   flex-direction: column;
   width: 100vw;
   height: 100vh;
   background-image: url("img/10_design/wuste-sonnenuntergang.jpg");
   background-position: center;
   background-size: cover;
}

.startScreen {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100vw;
   height: 100vh;
   background-color: aliceblue;
   background-image: url("img/10_design/wuste-sonnenuntergang.jpg");
   row-gap: 3rem;
   background-position: center;
   background-size: cover;
   overflow: hidden;
}

.contain-startscreen-elements {
   max-width: 710px;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.size2rem2rem {
   height: 2rem;
   width: 2rem;
   box-shadow: 5px 1px 8px #994409;
}

.control-btn-explanation-service {
   margin-top: 1rem;
   margin-bottom: 1rem;
   display: flex;
   justify-content: center;
   max-width: 44rem;
}

.contains-explanation {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   display: flex;
   align-items: center;

}

.flex {
   display: flex;
}

.explanation-text {
   font-size: 1rem;
   padding-left: 1rem
}

.explanation-service {
   display: flex;
   flex-direction: column;
   width: 25vw;

}

.button {

   height: 1.5rem;
   position: relative;
   display: inline-flex;
   padding: 0.75rem 1rem 0.75rem 1rem;
   border: 2px solid #BFC0C0;
   margin: 1.5rem 1.25rem 1.5rem 1.25rem;
   color: #FCFFBF;
   text-transform: uppercase;
   text-decoration: none;
   font-size: 0.8em;
   letter-spacing: 1.5px;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   cursor: pointer;
   border-radius: 1rem;
   box-shadow: 5px 1px 8px #994409;
   border: solid;
   border-color: black;
}

a {
   font-size: 1rem;
   color: #FDF359;
   text-align: center;
   text-decoration: none;
   letter-spacing: 1px;
}


#button-7 a {
   position: relative;
   left: 0;
   transition: all .35s ease-Out;
}

#dub-arrow {
   width: 100%;
   height: 100%;
   background: #FCFFBF;
   left: -200px;
   position: absolute;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all .35s ease-Out;
   bottom: 0;
}

#button-7 img {
   width: 20px;
   height: auto;
}

#button-7:hover #dub-arrow {
   left: 0;
   cursor: pointer;
}

#button-7:hover a {
   left: 150px;
}



.control-btn {
   height: 2.5rem;
   padding: 0.5rem 1rem 0.5rem 1rem;
   background-color: #994409;
   display: block;
   border-left: solid 0.25rem;
   border-right: solid 0.25rem;
   border-bottom: solid 0.25rem;
   border-color: rgb(218, 66, 1);
   box-shadow: 5px 1px 8px rgba(218, 66, 1, 0.5);
   border-bottom-left-radius: 1rem;
   border-bottom-right-radius: 1rem;
   color: #FDF359;
   display: flex;
   justify-content: space-between;
}

.panel {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
   border: solid;
   border-color: black;
   padding: 0.5rem;
   background-color: #FE9C34;
   border-radius: 90%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.panel:hover {
   background-color: #FCFFBF;
   cursor: pointer;
}


.panel-contain {
   display: flex;
   justify-content: space-evenly;
}

.arrow-left {
   transform: scaleX(-1);
}

.arrow-up {
   transform: rotate(-90deg);
}

.arrow-jump {
   transform: scaleX(-1);
}


.icons-img {
   width: 100%;
   height: 100%;
}

#fullscreen {
   margin-top: 1rem;

   border-radius: 1rem;
   box-shadow: 5px 10px 8px rgba(218, 66, 1, 0.5);

}

canvas {
   display: block;
   border-left: solid 0.25rem;
   border-right: solid 0.25rem;
   border-top: solid 0.25rem;
   border-color: rgb(218, 66, 1);
   box-shadow: 5px 10px 8px rgba(218, 66, 1, 0.5);
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;

}





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


   #start_img_game_design {
      border-radius: 0;
      width: 100vw;
   }


   .hidden {
      display: none;
   }

   #fullscreen {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
   }

   .startScreen {
      width: 100%;
   }

   .control-btn {
      display: flex !important;
      margin-top: 0px;
      height: 3rem;
      border: none;
      border-radius: 0;
      justify-content: space-around;
   }



   .icon-contain-h1-position {
      display: none;
   }



   canvas {
      height: calc(100% - 4rem);
      width: 100%;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0rem;
   }


   #fullscreen {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
   }

   .h1-pollo-loco {
      display: none;
   }



   .size2rem2rem {
      width: 1rem;
      height: 1rem;
   }
}


@media only screen and (max-width: 550px) {
   .mid-panel-contain-hidden {
      display: none;
   }

   .text-panel {
      margin-left: 0.5rem;
      margin-right: 1rem;
   }
}

@media only screen and (max-width: 550px) {
   .flex-contain {
      margin: 1rem;
   }
}

@media only screen and (max-width: 400px) {
   .size2rem2rem {
      width: 0.5rem;
      height: 0.5rem;

   }

   .text-panel {
      display: none;
   }
}

@media only screen and (max-width: 350px) {
   .explanation-text {
      font-size: 0.8rem;
      padding-left: 0px;
   }

   .size2rem2rem {
      width: 0.5rem;
      height: 0.5rem;
   }
}




@media only screen and (max-height: 920px) {
   .startScreen {
      row-gap: 0 !important;

   }


   .size2rem2rem {
      width: 1rem;
      height: 1rem;
   }
}

@media only screen and (max-height: 740px) {
   .control-btn-explanation-service {
      flex-direction: column;
      margin-top: 1rem;
      margin-bottom: 0.5rem;
   }

   .flex-contain {
      flex-direction: row;
   }

   .contains-explanation {
      width: 200px;
   }
}


@media only screen and (max-height: 680px) {
   .button {
      position: absolute;
      right: 0;
      top: 4rem;
      background-color: #FC8429;
   }
}




@media only screen and (max-height: 580px) {


   #start_img_game_design {
      margin-top: 0.5rem;

   }

   .explanation-text {
      color: #FC8429;
   }

   .contain-startscreen-elements {
      margin: 0px;
      padding: 0px;
      height: 100vh;
      width: 150vh;
   }

   .control-btn-explanation-service {
      position: absolute;
      right: 1rem;
      flex-direction: row;
   }

   .flex-contain {
      flex-direction: column;
      margin-left: 0.5rem;
      margin-right: 0.5rem;
   }



   .h1-pollo-loco {
      display: none;
   }

   .size2rem2rem {
      width: 1rem;
      height: 1rem;
   }


   .hidden {
      display: none;
   }


   .button {
      bottom: 4rem;
      top: auto;
      right: 1rem;
   }

   .contains-explanation {
      width: 180px;
   }
}




@media only screen and (max-height: 550px) {
   .size2rem2rem {
      width: 0.5rem;
      height: 0.5rem;
   }

   .contains-explanation {
      width: auto;

   }



   .control-btn-explanation-service {
      margin: 0;
      right: 1rem;
   }

   .explanation-text {
      font-size: 0.8rem;
      color: #FC8429;
   }

   .game-over-container,
   .win-container {
      font-size: 3rem;
   }

   .control-btn {
      display: flex !important;
      margin-top: 0px;
      height: 3rem;
   }

   canvas {
      height: calc(100% - 4rem);
      width: 100%;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0rem;
   }


   #fullscreen {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
   }

   .icon-contain-h1-position {
      display: none;
   }


   #startSide {
      height: 100vh;
   }

}

@media only screen and (max-height: 500px) {
   h1 {
      position: absolute;
      top: 50px;
      right: 1rem;
      width: auto;
      color: #FC8429;
      right: 1rem;
   }

   .button {
      margin: 0px;
      height: 0.8rem;
      right: 1rem;
   }

   #start_img_game_design {
      width: 100vw;
      height: 100vh;
      margin: 0px;
   }
}

@media only screen and (max-height: 420px) {
   h1 {
      top: 8vh;
   }

   .button {
      bottom: 10vh;
      height: 0.5rem;
   }



   .panel {
      height: 0.5rem;
      width: 0.5rem;
   }

   .text-panel {
      font-size: 0.6rem
   }

   .panel-contain {
      align-items: center;

   }
}

@media only screen and (max-width: 350px) {
   .size2rem2rem {
      width: 0.5rem;
      height: 0.5rem;
   }
}