:root {
    /* --main-color: rgb(216, 216, 216); */
    --main-color: rgb(253, 247, 208);
    --secondary-color: rgb(32, 32, 32);
    
    /* --main-background-color: rgb(49, 49, 49); */
    /* --main-background-color: rgb(192, 188, 226); */
    --main-background-color: rgb(109, 105, 146);

    --secondary-background-color: rgb(41, 41, 41);
    --header-footer-background: rgb(32, 32, 32);
}

body {
    color: var(--main-color);
    background-color: var(--main-background-color);
    font-family: Helvetica, Georgia;
    margin: 0;
}

#navbar {
    /* position: relative;
    top: 0rem; */
    justify-content: center;
    text-align: center;
    color: var(--main-color);
    background-color: var(--header-footer-background);
    margin: 0 0 1rem 0;
    padding: 0.1rem;
    font-size: 1.5rem;
}
#footer {
    justify-content: center;
    text-align: center;
    color: var(--main-color);
    background-color: var(--header-footer-background);
    margin: 2rem 0 0 0;
    padding: 0.5rem;
}
#home-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 0.4rem;
    text-align: center;
    justify-content: center;
}
#home-grid > h1 {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    font-size: 2rem;
    color: var(--main-color);
    /* color: var(--secondary-color); */
}
#home-left {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.5rem;
    align-items: start;
    /* justify-items: center; */
    justify-content: center;

}
#home-center {
    grid-column: 2 / 4;
    grid-row: 2 / 7;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 1rem;
}
#home-right {
    grid-column: 4 / 5;
    grid-row: 2 / 7;
}
/* #play-button {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    border: 0.1rem solid black;
    box-shadow: 0.2rem 0.2rem 0.2rem black;
    color: var(--main-color);
    background-color: var(--secondary-background-color);
    transition: box-shadow 0.07s;
}
#play-button:hover {
    box-shadow: 0.1rem 0.1rem 0.1rem black;
} */
#replay-button {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    border: 0.1rem solid black;
    box-shadow: 0.2rem 0.2rem 0.2rem black;
    color: var(--main-color);
    background-color: var(--secondary-background-color);
    transition: box-shadow 0.07s, background-color .2;
}
#replay-button:hover {
    box-shadow: 0.1rem 0.1rem 0.1rem black;
    background-color: rgb(43, 43, 43);
    transition: background-color .2s;
}
#replay-button:active {
    background-color: rgba(49, 42, 54, 0.991);
}
#solution-div {
    grid-column: 2 /4;
    grid-row: 2 / 7;
    text-align: center;
    justify-content: center;
    border: 0.1rem solid black;
    box-shadow: 0.2rem 0.2rem 0.2rem black;
    color: var(--main-color);
    background-color: var(--secondary-background-color);
}
/* #solution-text {
    
} */

@media only screen and (max-width: 600px) {

}

@media only screen and (min-width: 600px) {
    
}

@media only screen and (min-width: 768px) {
    
}

@media only screen and (min-width: 992px) {
    
}

@media only screen and (min-width: 1200px) {
    
}