@font-face {
    font-family: ArcadeClassic;
    src: url(img/ARCADECLASSIC.ttf);
}
body {
    margin: 0;
    padding: 2rem;
    text-align: center;
    line-height: 0.5rem;
    font-family: ArcadeClassic;
    font-size: 2rem;
    letter-spacing: 1px;
    word-spacing: 5px;
    background-color: #71c6cf;
}
.logo{
    width: 200px;
}

.coming_text{
    transition: font-size 1.5s ease-in-out;
}

.coming_text.animated{
    font-size: 1rem;
}


#board {
    background-image: url("./flappybirdbg.png");
    opacity: 0;
    transform: translateX(-1.5rem);
    transition: transform 2s ease, opacity 0.6s ease;
}
#board.visible {
    opacity: 1;
    transform: translateX(0); 
}



@media (max-width:550px){
    body {
        margin: 0;
        padding: 1rem;
        font-size: .2rem;
        /* line-height: 1.5rem; */
    }
    .logo{
        width: 100px;
    }
    .heading h1{
        font-size: 2.5rem;      
    }
    .heading h2{
        font-size: 1.5rem;      
    }
    .coming_text.animated{
        font-size: .7rem;
    }
    canvas {
    touch-action: none;
    -webkit-user-select: none;
    -ms-touch-action: manipulation;
    user-select: none;
}
}