html{
    top: 0px;
    max-height: 500px;
    max-width: 400px;
     align-items: center;
    background-color: #FFFFFF;
    overflow: hidden;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 650px;
    width: 400px;
    margin: 0px;
    background-color: #FFFFFF;

}
.dark-mode {
background-color: #000000;
    
}
.darkMode {
    display: block;
}
#game-container {
    display: grid;
    grid-template-columns: repeat(2, 150px);
    grid-template-rows: repeat(2, 150px);
    gap: 20px;
    margin-bottom: 20px;
}

.block {
    width: 150px;
    height: 150px;
    background-color: gray;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: background-color 0.0s;
}

#start-button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: rgba(0,250,0,0.5);
    border: solid white 2px;
    color: white;
}
#start-button:active{
        background-color: rgba(0,250,0,1);
    }
#start-button:hover{
cursor: pointer;
}

    #restart-button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
        background-color: rgba(250,0,0,0.5);
        border: solid white 2px;
        color: white;
}
   #restart-button:active {
       background-color: rgba(250,0,0,1);
   }
   #restart-button:hover {
cursor: pointer;
   }
.muted-red { background-color: #ff9999; }
.muted-blue { background-color: #9999ff; }
.muted-green { background-color: #99ff99; }
.muted-yellow { background-color: #ffff99; }

.bright-red { background-color: #ff0000; }
.bright-blue { background-color: #0000ff; }
.bright-green { background-color: #00ff00; }
.bright-yellow { background-color: #ffff00; }
span {
    color: black;
    border: black solid 3px;
    }
.spanDarkMode {
    color: white;
    border: white solid 3px;
}
.lightMode {
    display: none;
}
footer {
border: solid gray 3px;
text-decoration: underline;
color: rgba(250,0,0,1);
}