styles.css

body,
html {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    overflow: hidden;
    background-color: #1c1c1b;
}

h1 {
    color: orange;
    font-family: 'Roboto', sans-serif;
    font-size: 5vmin;
    margin-bottom: 1vmin;
    margin-left: 5vmin;
    margin-right: 5vmin;
    text-align: center;
}

h2 {
    color: orange;
    font-family: 'Roboto', sans-serif;
    font-size: 3vmin;
    margin-bottom: 5vmin;
    margin-left: 5vmin;
    margin-right: 5vmin;
    text-align: center;
}

#matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 5px;
    width: 80vmin;
    height: 80vmin;
    padding: 2vmin;
}

button {
    border: 2px solid orange;
    color: orange;
    background-color: #1c1c1b;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    color: #1c1c1b;
    background-color: orange;
}

.square {
    background-color: #ddd;
    width: 100%;
    height: 100%;
}

.ball {
    width: 100px;
    height: 100px;
    /* background-color: white; */
    position: absolute;
    cursor: pointer;
    text-align: center;
    font-size: 50px;
    /* Make sure positioning doesn't affect the flexbox */
}

#ballhome {
    width: 50vmin;
    height: 1vmin;
    margin-top: 8vh;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.fx {
    font-size: 50px;
    display: flex;
    justify-content: space-between;
    margin-top: 10vh;
}

.fxspacer {
    width: 60vmin;
}

/* Keyframes for the spinner shown at load time */
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.spinner {
    width: 5vmin;
    height: 5vmin;
    /* border-radius: 50%; */
    background-color: orange;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

progress {
    margin-top: 5vmin;
    width: 50 vw;
    height: 2.5vmin;
    background-color: orange;
    color: orange;
}

progress::-webkit-progress-bar {
    background-color: black;
}

progress::-webkit-progress-value {
    background-color: orange;
}

progress::-moz-progress-bar {
    background-color: orange;
}