Responsiveness-and-variables.css

:root{
    --red:crimson;
    --yellow: yellowgreen;
    --home:wheat;
    --link:rgb(236, 223, 213);
}
.grid{
    --column:200px 200px;
}

html, body {
    background:var(--home);
    color: var(--red);
}

h1, p {
    color:  var(--red);
}

#nav{
    --nav-color:rgb(5, 228, 72); /*Local Variable*/
}
#nav li{
    color: var(--nav-color);
}
.grid{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: var(--column);
    grid-template-rows: 140px;
  justify-content: center;
}
.item {
    --item-button:forestgreen;
    --red:#ff8e69; /*overriding variable*/
    background: var(--yellow);
}

button {
    background:  var(--red);
    color: var(--item-button);
}

.featured{
    --yellow: #ffe55b; /*overriding variable*/
    --red: #ff5564;
}

/* Responsiveness */
@media all and (max-width:600px){
    .grid{
        --column:200px;
    }
    footer{
        position: relative;
        margin-top: 20px;
    }
}