*{
     box-sizing: border-box;
 }
 @font-face{
     font-family: 'Pixel';
     src: url('../fonts/Pixel.ttf')
 }

 [wm-flappy]{
     position: relative;
     border: 5px solid dodgerblue;
     height: 700px;
     width: 1200px;
     margin: 15px;
     background-color: black;
     overflow: hidden;
 }

 .passaro{
     position: absolute;
     width: 60px;
     left: calc(50% - 30px);
     border-radius: 40%;
   
 }

 .par-de-barreiras{
     position: absolute;
     top:0;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between; /*espaço entre as barreiras*/
    }

    .barreira{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .barreira .borda{
        height: 30px;
        width: 130px;
        background: linear-gradient(90deg, brown, #a5e82e);
        border: 2px solid #000;
    }

    .barreira .corpo{
        height: 150px;
        width: 110px;
        background: linear-gradient(90deg,brown, #a5e82e);
        border-left: 2px solid #000;
        border: 2px solid #000;
        
    }

    .progresso{
        position: absolute;
        top: 10px;
        right: 10px;
        font-family: Pixel;
        font-size: 50px;
        z-index: 100;
    }