:root {
   --pipe-height: 52px;
   /* Default value */
   --pipe-width: 26px;
   /* Default value */
}

@font-face {
   font-family: 'Questrial-Regular';
   src: url('../fonts/Questrial-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
}

@font-face {
   font-family: 'Flappypepe';
   src: url('../fonts/FloppyFont.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
}

* {
   font-family: 'Questrial-Regular', sans-serif;
}

.font {
   font-family: 'Flappypepe';
   font-size: 2em !important;
   color: #fff;
   /* Adjust color as needed */
   -webkit-text-stroke: 1px #000;
   /* Add outline for better readability */
}

.font-score {
   font-family: 'Flappypepe';
   font-size: 3.5em !important;
   color: #fff;
   /* Adjust color as needed */
   -webkit-text-stroke: 1px #000;
   /* Add outline for better readability */
}

.font-over {
   font-family: 'Flappypepe';
   font-size: 3.5em !important;
   color: #ffffff;
   /* Adjust color as needed */
   -webkit-text-stroke: 0.5px #000000 !important;
   /* Add outline for better readability */
   text-align: center;
   margin-top: 20px;
}

.font-number {
   font-family: 'Flappypepe';
   font-size: 2em;
   /* Ensure same size as text */
   color: #fff;
   /* Adjust color as needed */
   -webkit-text-stroke: 1px #000;
   /* Add outline for better readability */
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   /* Add text shadow for better readability */
}

@-webkit-keyframes animLand {
   0% {
      background-position: 0px 0px;
   }

   100% {
      background-position: -335px 0px;
   }
}

@-moz-keyframes animLand {
   0% {
      background-position: 0px 0px;
   }

   100% {
      background-position: -335px 0px;
   }
}

@-o-keyframes animLand {
   0% {
      background-position: 0px 0px;
   }

   100% {
      background-position: -335px 0px;
   }
}

@keyframes animLand {
   0% {
      background-position: 0px 0px;
   }

   100% {
      background-position: -335px 0px;
   }
}

@-webkit-keyframes animSky {
   0% {
      background-position: 0px 100%;
   }

   100% {
      background-position: -550px 100%;
   }
}

@-moz-keyframes animSky {
   0% {
      background-position: 0px 100%;
   }

   100% {
      background-position: -550px 100%;
   }
}

@-o-keyframes animSky {
   0% {
      background-position: 0px 100%;
   }

   100% {
      background-position: -550px 100%;
   }
}

@keyframes animSky {
   0% {
      background-position: 0px 100%;
   }

   100% {
      background-position: -550px 100%;
   }
}

@-webkit-keyframes animpepe {
   from {
      background-position: 0px 0px;
   }

   to {
      background-position: 0px -96px;
   }
}

@-moz-keyframes animpepe {
   from {
      background-position: 0px 0px;
   }

   to {
      background-position: 0px -96px;
   }
}

@-o-keyframes animpepe {
   from {
      background-position: 0px 0px;
   }

   to {
      background-position: 0px -96px;
   }
}

@keyframes animpepe {
   from {
      background-position: 0px 0px;
   }

   to {
      background-position: 0px -96px;
   }
}

@-webkit-keyframes animPipe {
   0% {
      left: 900px;
   }

   100% {
      left: -1000px;
   }
}

@-moz-keyframes animPipe {
   0% {
      left: 900px;
   }

   100% {
      left: -1000px;
   }
}

@-o-keyframes animPipe {
   0% {
      left: 900px;
   }

   100% {
      left: -1000px;
   }
}

@keyframes animPipe {
   0% {
      left: 900px;
   }

   100% {
      left: -1000px;
   }
}

@media (min-width: 1081px) and (max-width: 1980px) {
   @-webkit-keyframes animPipe {
      0% {
         left: 900px;
      }

      100% {
         left: -1000px;
      }
   }

   @-moz-keyframes animPipe {
      0% {
         left: 900px;
      }

      100% {
         left: -1000px;
      }
   }

   @-o-keyframes animPipe {
      0% {
         left: 900px;
      }

      100% {
         left: -1000px;
      }
   }

   @keyframes animPipe {
      0% {
         left: 900px;
      }

      100% {
         left: -1000px;
      }
   }
}

@media (min-width: 1981px) and (max-width: 2980px) {
   @-webkit-keyframes animPipe {
      0% {
         left: 1800px;
      }

      100% {
         left: -1000px;
      }
   }

   @-moz-keyframes animPipe {
      0% {
         left: 1800px;
      }

      100% {
         left: -1000px;
      }
   }

   @-o-keyframes animPipe {
      0% {
         left: 1800px;
      }

      100% {
         left: -1000px;
      }
   }

   @keyframes animPipe {
      0% {
         left: 1800px;
      }

      100% {
         left: -1000px;
      }
   }
}

@media (min-width: 2981px) and (max-width: 3980px) {
   @-webkit-keyframes animPipe {
      0% {
         left: 2700px;
      }

      100% {
         left: -1000px;
      }
   }

   @-moz-keyframes animPipe {
      0% {
         left: 2700px;
      }

      100% {
         left: -1000px;
      }
   }

   @-o-keyframes animPipe {
      0% {
         left: 2700px;
      }

      100% {
         left: -1000px;
      }
   }

   @keyframes animPipe {
      0% {
         left: 2700px;
      }

      100% {
         left: -1000px;
      }
   }
}

@media (min-width: 3981px) {
   @-webkit-keyframes animPipe {
      0% {
         left: 3600px;
      }

      100% {
         left: -1000px;
      }
   }

   @-moz-keyframes animPipe {
      0% {
         left: 3600px;
      }

      100% {
         left: -1000px;
      }
   }

   @-o-keyframes animPipe {
      0% {
         left: 3600px;
      }

      100% {
         left: -1000px;
      }
   }

   @keyframes animPipe {
      0% {
         left: 3600px;
      }

      100% {
         left: -1000px;
      }
   }
}


*,
*:before,
*:after {
   /* border box */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   /* gpu acceleration */
   -webkit-transition: translate3d(0, 0, 0);
   /* select disable */
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

html,
body {
   height: 100%;
   overflow: hidden;
   font-family: monospace;
   font-size: 12px;
   color: #fff;
}

#gamecontainer {
   position: relative;
   width: 100%;
   height: 100%;
}

/*
Screen - Game
*/
#gamescreen {
   position: absolute;
   width: 100%;
   height: 100%;
}

/* Media query for larger screens (PCs and tablets) */
@media (min-width: 768px) {
   #gamescreen {
      width: 70%;
      left: 0;
   }
}

@media (max-width: 767px) {
   #gamescreen {
      height: 100%;
   }
}

#sky {
   position: absolute;
   top: 0;
   width: 100%;
   height: 90%;
   background-image: url('../assets/sky.png');
   background-repeat: repeat-x;
   background-position: 0px 100%;
   background-color: #1b3247;

   -webkit-animation: animSky 7s linear infinite;
   animation: animSky 7s linear infinite;
}

#flyarea {
   position: absolute;
   bottom: 0;
   height: 93.5%;
   width: 100%;
}

#ceiling {
   position: fixed;
   top: 0;
   height: 6.2%;
   width: 100%;
   background-image: url('../assets/ceiling.png');
   background-repeat: repeat;
   background-size: contain;
   z-index: 11;

   -webkit-animation: animCeiling 40s linear infinite;
   animation: animCeiling 40s linear infinite;
   will-change: background-position;
}

@keyframes animCeiling {
   0% {
      background-position: 0 0;
   }

   100% {
      background-position: -6400px 0;
   }
}

#land {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 10%;
   background-image: url('../assets/land.png');
   background-repeat: repeat;
   background-position: 0px 0px;
   background-color: #233d4f;

   -webkit-animation: animLand 2516ms linear infinite;
   animation: animLand 2516ms linear infinite;
}

#bigscore {
   position: absolute;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 100;
}

#splash {
   position: absolute;
   opacity: 0;
   top: 75px;
   left: 50%;
   transform: translateX(-50%);
   width: 376px;
   /* 188px * 2 */
   height: 340px;
   /* 170px * 2 */
   background-image: url('../assets/splash.png');
   background-repeat: no-repeat;
   background-size: contain;
   /* Ensure the image fits within the element */
}

#scoreboard {
   position: absolute;
   display: none;
   opacity: 0;
   left: 50% !important;
   transform: translateX(-50%) !important;
   z-index: 1000;
}

#scoreboard h1 {
   margin-bottom: 20px;
}

.card {
   display: inline-block;
   padding: 20px;
   border: none;
   border-radius: 18px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   background-color: #000000;
   width: 400px;
   /* Default width */
   color: #fff;
   /* Adjust color as needed */
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto auto auto auto auto;
   gap: 10px;
}

#pepe-label {
   grid-column: 1;
   grid-row: 1;
   text-align: center;
}

#pepe-number {
   grid-column: 1;
   grid-row: 2;
   text-align: center;
}

#score-label {
   grid-column: 1;
   grid-row: 1;
   text-align: center;
}

#score-number {
   grid-column: 1;
   grid-row: 2;
   text-align: center;
}

#highscore-label {
   grid-column: 2;
   grid-row: 1;
   text-align: center;
}

#highscore-number {
   grid-column: 2;
   grid-row: 2;
   text-align: center;
}

#replay {
   grid-column: 1 / span 2;
   grid-row: 5;
   margin-top: 20px;
   text-align: center;
}

#replay img {
   cursor: pointer;
   width: 15em;
}

.boundingbox {
   position: absolute;
   display: none;
   top: 0;
   left: 0;
   width: 0;
   height: 0;
   border: 1px solid red;
}

#player {
   left: 60px;
   top: 200px;
}

.pepe {
   position: absolute;
   background-size: cover;
}

/* 4K and up */
@media (min-width: 4000px) {
   .pepe {
      background-image: url('../assets/pep-4K.apng');
   }
}

/* 2K to <4K */
@media (min-width: 2560px) and (max-width: 3999px) {
   .pepe {
      background-image: url('../assets/pep-2K.apng');
   }
}

/* FHD to <2K */
@media (min-width: 1920px) and (max-width: 2559px) {
   .pepe {
      background-image: url('../assets/pep-FHD.apng');
   }
}

/* <FHD (e.g. HD) */
@media (max-width: 1919px) {
   .pepe {
      background-image: url('../assets/pep-HD.apng');
   }
}

@keyframes growBottom {
   0% {
      transform: scaleY(0);
      transform-origin: bottom;
   }

   90% {
      transform: scaleY(1);
      transform-origin: bottom;
   }

   100% {
      transform: scaleY(0.95);
      transform-origin: bottom;
   }

   105% {
      transform: scaleY(1);
      transform-origin: bottom;
   }
}

@keyframes growTop {
   0% {
      transform: scaleY(0);
      transform-origin: top;
   }

   90% {
      transform: scaleY(1);
      transform-origin: top;
   }

   100% {
      transform: scaleY(1.05);
      transform-origin: top;
   }

   105% {
      transform: scaleY(1);
      transform-origin: top;
   }
}

.pipe {
   position: absolute;
   left: 100px;
   background-image: none !important;
   width: 52px;
   height: 100%;
   z-index: 10;

   -webkit-animation: animPipe 7500ms linear, popIn 0.3s ease-out;
   animation: animPipe 7500ms linear, popIn 0.3s ease-out;
}

.pipe_upper {
   position: absolute;
   top: 0;
   width: 52px;
   background-image: url('../assets/pipe.png');
   background-repeat: repeat-y;
   background-position: center;
   background-size: contain;
   animation: growTop 0.5s ease-out;
}

.pipe_upper:after {
   content: "";
   position: absolute;
   bottom: 0;
   height: var(--pipe-height);
   width: var(--pipe-width);
   background-size: cover;
   background-image: url('../assets/pipe-down.png');
}

.pipe_lower {
   position: absolute;
   bottom: 0;
   width: 52px;
   background-image: url('../assets/pipe.png');
   background-repeat: repeat-y;
   background-position: center;
   background-size: contain;
   animation: growBottom 0.5s ease-out;
}

.pipe_lower:after {
   content: "";
   position: absolute;
   top: 0;
   height: var(--pipe-height);
   width: var(--pipe-width);
   background-size: cover;
   background-image: url('../assets/pipe-up.png');
}

#footer {
   position: absolute;
   bottom: 3px;
   left: 3px;
}

#footer a,
#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active {
   display: block;
   padding: 2px;
   text-decoration: none;
   color: #fff;
}

/* Media query for small screens */
@media (max-width: 400px) {
   .card {
      width: 350px !important;
   }

   .font {
      font-size: 2em !important;
   }

   .font-score {
      font-size: 2.5em !important;
   }

   .font-over {
      font-size: 3em !important;
   }

   .font-number {
      font-size: 2em !important;
   }

   #splash {
      width: 188px !important;
      height: 170px !important;
   }

   form {
      width: 100% !important;
   }

   h1 {
      font-size: 2em !important;
   }

   h2 {
      font-size: 1.75em !important;
   }

   h3 {
      font-size: 1.5em !important;
   }

   h4 {
      font-size: 1.25em !important;
   }

   h5 {
      font-size: 1em !important;
   }

   p,
   span,
   label,
   .volume,
   input,
   button {
      font-size: 1.5em !important;
   }

   .volume #volume-value {
      font-size: 1em !important;
   }
}

/* Media query for medium screens */
@media (min-width: 401px) and (max-width: 1920px) {
   .card {
      width: 400px !important;
   }

   .font {
      font-size: 2em !important;
   }

   .font-score {
      font-size: 3.5em !important;
   }

   .font-over {
      font-size: 3.5em !important;
   }

   .font-number {
      font-size: 2em !important;
   }

   #splash {
      width: 376px !important;
      height: 340px !important;
   }

   form {
      width: 80% !important;
   }

   h1 {
      font-size: 2em !important;
   }

   h2 {
      font-size: 1.75em !important;
   }

   h3 {
      font-size: 1.5em !important;
   }

   h4 {
      font-size: 1.25em !important;
   }

   h5 {
      font-size: 1em !important;
   }

   p,
   span,
   label,
   .volume,
   input,
   button {
      font-size: 1.5em !important;
   }

   .volume #volume-value {
      font-size: 1em !important;
   }
}

/* Media query for large screens */
@media (min-width: 1921px) and (max-width: 2400px) {
   .card {
      width: 800px !important;
   }

   .font {
      font-size: 3.5em !important;
   }

   .font-score {
      font-size: 5em !important;
   }

   .font-over {
      font-size: 5em !important;
   }

   .font-number {
      font-size: 3.5em !important;
   }

   #splash {
      width: 752px !important;
      height: 680px !important;
   }

   form {
      width: 60% !important;
   }

   h1 {
      font-size: 3em !important;
   }

   h2 {
      font-size: 2.75em !important;
   }

   h3 {
      font-size: 2.5em !important;
   }

   h4 {
      font-size: 2em !important;
   }

   h5 {
      font-size: 1.5em !important;
   }

   p,
   span,
   label,
   .volume,
   input,
   button {
      font-size: 1.5em !important;
   }

   .volume #volume-value {
      font-size: 1em !important;
   }
}

/* Media query for ultra-large screens */
@media (min-width: 2401px) and (max-width: 4000px) {
   .card {
      width: 1400px !important;
   }

   .font {
      font-size: 6em !important;
   }

   .font-score {
      font-size: 8em !important;
   }

   .font-over {
      font-size: 8em !important;
   }

   .font-number {
      font-size: 5em !important;
   }

   #splash {
      width: 752px !important;
      height: 680px !important;
   }

   form {
      width: 50% !important;
   }

   h1 {
      font-size: 4em !important;
   }

   h2 {
      font-size: 3.5em !important;
   }

   h3 {
      font-size: 3em !important;
   }

   h4 {
      font-size: 2.5em !important;
   }

   h5 {
      font-size: 2em !important;
   }

   p,
   span,
   label,
   .volume,
   input,
   button {
      font-size: 2em !important;
   }

   .volume #volume-value {
      font-size: 1em !important;
   }
}

/* Media query for extra-large screens */
@media (min-width: 4001px) {
   .card {
      width: 1400px !important;
   }

   .font {
      font-size: 6em !important;
   }

   .font-score {
      font-size: 8em !important;
   }

   .font-over {
      font-size: 8em !important;
   }

   .font-number {
      font-size: 5em !important;
   }

   #splash {
      width: 752px !important;
      height: 680px !important;
   }

   form {
      width: 40% !important;
   }

   h1 {
      font-size: 4em !important;
   }

   h2 {
      font-size: 3.5em !important;
   }

   h3 {
      font-size: 3em !important;
   }

   h4 {
      font-size: 2.5em !important;
   }

   h5 {
      font-size: 2em !important;
   }

   p,
   span,
   label,
   .volume,
   input,
   button {
      font-size: 2em !important;
   }

   .volume #volume-value {
      font-size: 1em !important;
   }
}

a {
   color: #2ec05f !important;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

hr {
   border-top: 1px solid #ddd;
   margin: 2rem 0;
}

.error {
   color: red;
   display: none;
   margin-top: 0.5em;
}

.event-time {
   font-size: 2em;
}

.ad-frame {
   width: 100%;
   height: 100%;
}

.ad-data1 {
   border: 20px;
   padding: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   background-color: transparent;
}

.ad-data2 {
   display: block;
   text-align: right;
   font-size: 12px;
}

.donate-link {
   background-color: #8B0000;
   /* dark red */
   color: white;
   padding: 1em;
   border-radius: 24px;
   text-align: center;
   width: fit-content;
   margin: 20px auto;
}

.donate-link a {
   color: white !important;
   text-decoration: none !important;
   font-weight: bold !important;
}

.donate-link a:hover {
   text-decoration: underline;
}

.cc-revoke.cc-bottom {
   top: 0.4em !important;
   left: 0.4em !important;
   height: 2.2em !important;
   border-radius: 24px !important;
}