@media screen and (max-width: 500px) {
    body{
        background-color: rgb(14, 14, 14);
    }
    
    /* header */
    header{
        padding: 18px 30px;
    }
    h1{
        margin-right: 5px;
    }
    #but-grill{
        margin-left: 5px;
        padding: 6px 22px;
        border: 2px dotted rgb(0, 148, 0);
    }
    
    /* main */
    h2{
        padding: 0 50px;
        font-size: 24px;
        letter-spacing: -1px;
        animation-name: letter_space;
        animation-duration: 2s;
    }
    @keyframes letter_space {
        0% {letter-spacing: -1px;}
        25%  {letter-spacing: 5px;}
        50%  {letter-spacing: 5px;}
        100% {letter-spacing: -1px;}
    }
    h3{
        padding: 0 50px;
    }
    #grill{
        max-width: 54vh;
        height: 54vh;
    }
    .cell{
        font-size: 15px;
    }
    
    /* footer */
    footer{
        padding: 10px 30px;
        font-size: 10px;
    }
}

@media screen and (max-width: 361.60px) {
    @keyframes letter_space {
        0% {letter-spacing: -1px;}
        25%  {letter-spacing: 4px;}
        50%  {letter-spacing: 4px;}
        100% {letter-spacing: -1px;}
    }
}


@media screen and (max-width: 352px) {
    @keyframes letter_space {
        0% {letter-spacing: -1px;}
        25%  {letter-spacing: 3px;}
        50%  {letter-spacing: 3px;}
        100% {letter-spacing: -1px;}
    }
}