* {
    margin: 0;
    padding: 0;
}

html, body {
    position: absolute;
    /* display: flex;
    justify-items: center; */

    width: 100%;
    height: 640px;

    scrollbar-width: none;
    /* z-index: 0; */

    overflow: hidden;

    /* background-color: black; */
}

body {
    /* margin-top: 10vh; */
}

/* @media (prefers-color-scheme: light) {
    
    body {
        background-color: white;
    }

    #overlay_left {
        background-color: white;
    }

    #overlay_right {
        background-color: white;
    }
    

}

@media (prefers-color-scheme: dark) {
     
    body {
        background-color: black;
    }

    #overlay_left {
        background-color: black;
    }

    #overlay_right {
        background-color: black;
    }
} */

#UI {
    position: absolute;

    margin: 0.8vw 0vw 0vw 0vw;
    z-index: 8;

    left: 50%;

    height: 640px;
    width: 360px;

    transform: translate(-50%);
}

@font-face {
    font-family: '04b_19_Local';
    src: url('./fonts/04B_19__.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'flappy_bird_local';
    src: url('./fonts/Flappy-Bird.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

#score {
    position: absolute;
    left: 50%;
    transform: translate(-50%);


    font-family: '04b_19_Local', sans-serif;
    font-size: 190%;

    color: white;

    /* 2. A borda preta grossa (contorno em todas as direções) */
    text-shadow: 
        -3px -3px 0 #000,  
         3px -3px 0 #000,
        -3px  3px 0 #000,
         3px  3px 0 #000,
         0px  3px 0 #000,
         0px -3px 0 #000,
         3px  0px 0 #000,
        -3px  0px 0 #000;

    /* 3. Ajuste para não embaçar os pixels */
    image-rendering: pixelated;
    -webkit-font-smoothing: none;

    /* filter: drop-shadow(2px 2px 0px black); */
}

#game_over {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%);

    background-color: transparent;
    border: none;
    /* padding: 3%; */

    width: 80%;

    font-family: '04b_19_Local', sans-serif;
    font-size: 250%;
    
    color: #F8B520;

    /* -webkit-text-stroke: 2px white;
    paint-order: stroke fill; */

    /* 2. A borda preta grossa (contorno em todas as direções) */
    text-shadow: 
        -2px -2px 0 #000,  
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         0px  2px 0 #000,
         0px -2px 0 #000,
         2px  0px 0 #000,
        -2px  0px 0 #000,
        -4px -4px 0 #ffffff,  
         4px -4px 0 #ffffff,
        -4px  4px 0 #ffffff,
         4px  4px 0 #ffffff,
         0px  4px 0 #ffffff,
         0px -4px 0 #ffffff,
         4px  0px 0 #ffffff,
        -4px  0px 0 #ffffff;

    /* 3. Ajuste para não embaçar os pixels */
    image-rendering: pixelated;
    -webkit-font-smoothing: none;

    /* cursor: none; */
}

#restart {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%);

    background-color: #E1611A;

    border: 2px solid black;
    box-shadow: inset 0 0 0 3px white;
    
    padding: 2% 6%;

    
    font-family: '04b_19_Local', sans-serif;
    font-size: 160%;
    
    color: white;

    /* 2. A borda preta grossa (contorno em todas as direções) */
    text-shadow: 
        -2px -2px 0 #000,  
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         0px  2px 0 #000,
         0px -2px 0 #000,
         2px  0px 0 #000,
        -2px  0px 0 #000;

    /* 3. Ajuste para não embaçar os pixels */
    image-rendering: pixelated;
    -webkit-font-smoothing: none;

    /* filter: drop-shadow(2px 2px 0px black); */

    cursor: pointer;
}


#bird {
    position: relative;
    display: flex;

    top: 30%;
    left: 45%;
    transform: translate(-45%);
    z-index: 6;
}

#overlay_left {
    content: " ";
    
    position: absolute;

    width: 0px;
    height: 0px;

    z-index: 5;

    background-color: white;
    
    /* display: none; */
}

#overlay_right {
    content: " ";
    
    position: absolute;

    width: 0px;
    height: 0px;

    z-index: 5;

    background-color: white;

    /* display: none; */
}

#background {
    position: absolute;

    display: flex;
    flex-direction: column;
    /* align-items: center; Centraliza os filhos horizontalmente */

    width: 360px;
    left: 50%;

    margin-left: -180px; /* metade de 360px */

    /* z-index: 1; */
    overflow: hidden; /* Esconde o que sai fora */
}

#background_top {
    /* position: relative; */
    background-image: url("./img/background/flappybird_bg_top.png");
    z-index: 1;
}

#background_bottom {
    position: relative;
    z-index: 4;
    background-image: url("./img/background/flappybird_bg_bottom.png");
}

#pipes {
    position: absolute;
    display: flex;
    gap: 60px;

    left: 0vh;
}

#pipe {
    display: none;
    left: 63vw;
}

.pipes {
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 640px;
    left: 55%;
    top: -0%;
    gap: 0%;
    transform: translateX(-50%) translateY(-50%) scale(0.15);
    width: 360px;
    height: 576px;
    z-index: 1;
}

#pipe #pipe_top {
    position: relative;
    top: 0%;
}

#pipe #pipe_bottom {
    position: relative;
    top: 0%;
}

.hidden {
    display: none;
}