canvas#snakeCanvas { margin: 15px; box-sizing: border-box; border: 2px solid var(--secondary-background-color); border-radius: 10px; } form { display: flex; flex-direction: column; width: min-content; gap: 1rem; padding: 15px; } form input[type="text"] { padding: 10px; box-sizing: border-box; border: 1px solid var(--secondary-background-color); border-radius: 6px; background-color: var(--secondary-background-color-but-slightly-transparent); color: var(--text-color); } form button[type="submit"] { padding: 10px; box-sizing: border-box; border: 1px solid var(--secondary-background-color); border-radius: 6px; background-color: var(--secondary-background-color-but-slightly-transparent); color: var(--text-color); font-weight: bold; cursor: pointer; } .flex-row { display: flex; flex-direction: row; gap: 1rem; } .min-width { width: min-content; } .max-width { width: 100%; } #snakeLeaderboardSection { display: flex; flex-direction: column; align-items: center; padding: 0; max-height: 272px ; } #snakeLeaderboard { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; width: 100%; overflow-y: scroll; } #snakeLeaderboard li { padding: 5px 20px; background-color: var(--secondary-background-color-but-slightly-transparent); color: var(--text-color); font-size: 1rem; display: flex; justify-content: space-between; align-items: center; } #snakeLeaderboard li:nth-child(even) { background-color: var(--secondary-background-color); } dialog { width: 90%; max-width: 500px; padding: 20px; background-color: var(--background-color); color: var(--text-color); border: 2px solid var(--secondary-background-color); border-radius: 8px; } dialog button { padding: 10px; width: 100%; box-sizing: border-box; border: 2px solid var(--secondary-background-color); border-radius: 6px; background-color: var(--secondary-background-color-but-slightly-transparent); color: var(--text-color); font-weight: bold; cursor: pointer; margin-top: 10px; } dialog h2 { margin: 0; font-size: 1.5rem; } dialog p { margin: 0; font-size: 1rem; }