body {
    background-color: #000032;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    min-height: 100vh;
    font-family: 'Press Start 2P';
}
body::-webkit-scrollbar {
    width: 1px; /* Set the width of the scrollbar */
}
body::-webkit-scrollbar-thumb {
    background-color: #88888800; /* Set the color of the scrollbar thumb */
    border-radius: 6px; /* Set the border-radius of the scrollbar thumb */
}
body::-webkit-scrollbar-thumb:hover {
    background-color: #55555500; /* Set the color of the scrollbar thumb on hover */
}
body::-webkit-scrollbar-track {
    background-color: rgba(241, 241, 241, 0); /* Set the color of the scrollbar track */
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('./metadata/PressStart2P-Regular.ttf') format('truetype');
  font-display: swap;
}

#mainContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: -50;
    padding: 20px;
}
#header {
    width: 550px;
    height: auto;
    padding: 0px;
    margin-bottom: 20px;
    margin-top: 20px;
}
#flashingHeader {
    display: block;
    width: 100%;
    height: 100%;
    animation: arcadeBlink 1s steps(2, start) infinite;
}
#flashingHeader img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps the aspect ratio of the image */
}
#hole_in_wall_container{
    width: 600px;
    height: 600px;
    padding: 0px;
    margin-bottom: 20px;
}
#hole_in_wall {
    display: block;
    width: 100%;
    height: 100%;
}
#hole_in_wall img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps the aspect ratio of the image */
}
#contract_container {
    width: 600px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}
#contract {
    font-size: 12px;
    word-break: break-word;
}
#copy_btn {
    font-size: 16px;
    align-self: center;
}
#buttons {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 600px;
    height: auto;
    padding: 10px;
    align-items: center;
}
#telegram_btn,
#twitter_btn {
    flex: 1;
    margin:  10px;
    font-size: 16px;
}
#buy_btn {
    flex: 1;
    margin:  10px;
    font-size: 16px;
    padding: 0px
}


/* Styles for screens with a maximum width of 400px - mobile */

@media (max-width: 600px) {
    #mainContainer {
        width: 100%;
        height: auto;
        padding: 10%;
    }
    #header {
        width: 250px;
        height: auto;
        padding: 0px;
        margin-bottom: 20px;
        margin-top: 10px;
    }
    #hole_in_wall_container{
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }
    #hole_in_wall {
        display: block;
        width: 100%;
        height: 100%;
    }
    #hole_in_wall img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Keeps the aspect ratio of the image */
    }
    #contract_container {
        width: 100%;
        margin-bottom: 20px;
    }
    #contract {
        font-size: 10px;
        word-break: break-word;
    }
    #copy_btn {
        font-size: 12px;
        align-self: center;
    }
    #buttons {
        width: 200px;
        height: auto;
        flex-direction: column;
        justify-content: center;
    }
    #telegram_btn,
    #twitter_btn {
        width: 140px;
        font-size: 14px;
    }
    #buy_btn {
        width: 140px;
        font-size: 14px;
    }
}


/* CRT */
@keyframes flicker {
    0% {
      opacity: 0.27861;
    }
    5% {
      opacity: 0.34769;
    }
    10% {
      opacity: 0.23604;
    }
    15% {
      opacity: 0.90626;
    }
    20% {
      opacity: 0.18128;
    }
    25% {
      opacity: 0.83891;
    }
    30% {
      opacity: 0.65583;
    }
    35% {
      opacity: 0.67807;
    }
    40% {
      opacity: 0.26559;
    }
    45% {
      opacity: 0.84693;
    }
    50% {
      opacity: 0.96019;
    }
    55% {
      opacity: 0.08594;
    }
    60% {
      opacity: 0.20313;
    }
    65% {
      opacity: 0.71988;
    }
    70% {
      opacity: 0.53455;
    }
    75% {
      opacity: 0.37288;
    }
    80% {
      opacity: 0.71428;
    }
    85% {
      opacity: 0.70419;
    }
    90% {
      opacity: 0.7003;
    }
    95% {
      opacity: 0.36108;
    }
    100% {
      opacity: 0.24387;
    }
  }
  @keyframes textShadow {
    0% {
      text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    5% {
      text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    10% {
      text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    15% {
      text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    20% {
      text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    25% {
      text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    30% {
      text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    35% {
      text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    40% {
      text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    45% {
      text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    50% {
      text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    55% {
      text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    60% {
      text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    65% {
      text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    70% {
      text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    75% {
      text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    80% {
      text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    85% {
      text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    90% {
      text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    95% {
      text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    100% {
      text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
  }
  .crt::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 100;
    pointer-events: none;
    animation: flicker 0.15s infinite;
  }
  .crt::before {
    content: " ";
    display: block;
    position: f;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    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: 100;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
  }
  .crt {
    z-index: 10;
    animation: textShadow 1.6s infinite;
  }
  .scanline {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99; /* Set a lower z-index so that scanlines are below the CRT effect */
    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 100% 10px, 10px 100%; /* Adjust the '8px' value to control the scanline spacing */
    opacity: 0.5; /* Adjust the opacity to make the scanlines more or less visible */
    pointer-events: none;
  }


@keyframes arcadeBlink {
    to {
        visibility: hidden;
    }
}

/* Money Bags */
.lights {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -99;
}
.light {
    position: absolute;
    border-radius: 50%;
    animation: float 16s infinite;
}
@keyframes float {
    0% {
        opacity: 0;
        transform: scale(0.3);
        bottom: -10%;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
        bottom: 120%;
    }
}