* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Bitcount Grid Double", sans-serif;
}

:root {
   --header-color: #530000;
   --body-color: #932525;
   --h1-color: #ff0000;
}

body {
   background-color: var(--body-color);
}

header {
   text-align: center;
   padding: 30px;
   background-color: var(--header-color);
   font-size: 30px;
   color: var(--h1-color);
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

header + div {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 25px;
}

.button-container > div {
   margin: 20px;
   display: flex;
   justify-content: space-between;
}

.button-container > div > *:not(.labels) {
   margin-right: 20px;
   width: 150px;
   height: 100px;
   background-color: var(--header-color);
   color: var(--h1-color);
   font-size: 25px;
   cursor: pointer;
}

.button-container > div > .labels {
   padding: 8px;
   margin-right: 20px;
   text-align: center;
   width: 250px;
   height: 100px;
   background-color: var(--header-color);
   color: var(--h1-color);
   font-size: 25px;
   cursor: pointer;
}

#grid-size-input {
   margin-right: 20px;
   width: 200px;
   cursor: pointer;
}

.grid-container {
   background-color: #ff0000;
   width: 700px;
   height: 700px;
   margin: 30px auto;
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(20px, 50px));
}