body.dark-theme {
    background-color: hsl(0, 0%, 0%);
    color: hsl(0, 0%, 100%);
}

h1.dark-theme {
    color: hsl(0, 0%, 100%);
    text-shadow: none;
}

button.dark-theme {
    background-image: 
    linear-gradient(to bottom right, hsl(200, 0%, 10%), hsl(200, 0%, 30%));
    border: 3px solid hsl(0, 0%, 90%);
    box-shadow: 3px 3px 3px hsl(100, 0%, 10%);
    color: hsl(0, 0%, 90%);
    font-weight: bold;
}

button.dark-theme:hover {
    font-weight: normal;
}

/* STYLERS FOR LARGER SCREEN SIZES */

@media only screen and (min-width: 450px) {
    body.dark-theme {
        background-image: 
        linear-gradient(to bottom right, hsl(0, 0%, 0%), hsl(0, 0%, 15%));
    }

    main.dark-theme {
        background-color: hsl(0, 0%, 20%);
        border: 3px solid hsl(0, 0%, 90%);
        box-shadow: 3px 3px 3px hsl(100, 0%, 10%);
    }
}