body {
    background-color: rgb(46, 46, 46);
}
p {
    color: rgb(135, 135, 135);
    size:  24pt;
}
h1 {
    color: rgb(164, 164, 164);
}


#player {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em
}
main {
    padding: 1em 0.5em;
}
@media (min-width: 350px) {
    main {
        padding: 0.5em 3em;
    }
    img {
        width: 300px;
        display: block;
            margin-left: auto;
            margin-right: auto;
    }
}

/* For screens that are 600px or wider */
@media (min-width: 600px) {
    main {
        padding: 1em 5em;
    }
    img {
        width: 435px;
        display: block;
            margin-left: auto;
            margin-right: auto;
    }
}

/* For screens that are 1024px or wider (e.g., desktops) */
@media (min-width: 1024px) {
    main {
        padding: 1em 10em;
    }
    img {
        padding-top: 1em;
        width: 750px;
        
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    }