body {
    background-color: rgb(254, 194, 189);
    font-family: 'Nerko One', cursive;
}

main {
    height: 95vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer{
    font-size: 20px;
    text-align: center;
    color: #C792FA;
    text-shadow: 1px 1px #fff, 2px 2px 3px #F257FF;
}



h1{
    flex: 1;
    text-align: center;
    font-size: 150px;
    color: #C792FA;
    text-shadow: 2px 2px #fff, 5px 5px #F257FF, 5px 5px 10px #F257FF;
}
    

#canvas {
    border: 5px solid white;
    animation: fadeIn 1s ease-in-out .5s;
    animation-fill-mode: backwards;
}

#bird{
    object-fit: none;
    object-position: -640px -170px;
    width: 50px;
    height: 40px;
    position: absolute;
    top: 39%;
    left: 8%;
}

#cutie_text{
    animation: moveRight 1s ease-in-out;
}

#bird_text{
    animation: moveLeft 1s ease-in-out;

}

@keyframes moveRight {
    0% {
        transform: translateX(-150px);

    }
    60%{
        transform: translateX(25px);
    }
    100% {
        transform: translateX(0);
    }
}


@keyframes moveLeft {
    0% {
        transform: translateX(150px);
    }
    60%{
        transform: translateX(-25px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes fadeIn{
    0% {
        opacity: 0;

    }
    80%{
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
       
    }
}

@media(max-width: 1000px){
    h1 {
        display: none;
    }
    #bird{
        display: none;
    }
}