* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
html,
body {
  height: 100%;
  width: 100%;
}
:root {
  --color-body-bg: #f5f7fa;
  --color-text: #0a0e17;
  --color-info-bg: #ffffff;
  --color-info-text: #0a0e17;
  --color-info-border: #b8c4e0;
  --color-cell-border: #c9d2e8;
  --color-snake: #009e5c;
  --color-food: #e92463;
  --color-modal-bg: rgba(255, 255, 255, 0.55);
  --color-modal-text: #0a0e17;
  --color-modal-button-bg: #005cff;
  --color-modal-button-text: #ffffff;
  --color-modal-button-bg-hover: #0047c0;
}
body {
  background-color: var(--color-body-bg);
  color: var(--color-text);
}
body.dark {
  --color-body-bg: #0c0f1a;
  --color-text: #e8ecff;
  --color-info-bg: #141a2a;
  --color-info-text: #e8ecff;
  --color-info-border: #29324a;
  --color-cell-border: #2f3b55;
  --color-snake: #38ff9c;
  --color-food: #ff3f8e;
  --color-modal-bg: rgba(20, 26, 42, 0.45);
  --color-modal-text: #e8ecff;
  --color-modal-button-bg: #3f5bff;
  --color-modal-button-text: #ffffff;
  --color-modal-button-bg-hover: #2f46cc;
}
section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}
.infos {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.info {
  border: 1px solid var(--color-info-border);
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
  border-radius: 8px;
  padding: 4px 8px;
}
.board {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(30px, 1fr));
}
.block {
  border: 1px solid var(--color-cell-border);
  border-radius: 50%;
}
.snake {
  background-color: var(--color-snake);
}
.head {
  position: relative;
}
.head::before,
.head::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background-color: black;
  border-radius: 50%;
  top: 3px;
}
.head::before {
  left: 3px;
}
.head::after {
  right: 3px;
}
.food {
  background-color: var(--color-food);
}
.modal {
  position: fixed;
  inset: 0;
  background-color: var(--color-modal-bg);
  color: var(--color-modal-text);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  font-size: 1.4rem;
}
.modal > div p {
  font-size: 1.1rem;
}
.modal div button {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1.5rem;
  font-weight: bold;
  transition: 0.2s ease;
  background-color: var(--color-modal-button-bg);
  color: var(--color-modal-button-text);
  border: none;
}
.modal div button:hover {
  scale: 1.1;
  background-color: var(--color-modal-button-bg-hover);
  cursor: pointer;
}
.modal .restart-modal {
  display: none;
}
.input-wrapper {
  display: flex;
  gap: 1rem;
}
select {
  padding: 5px 1rem 6px;
  font-size: 1.1rem;
  border-radius: 6px;
  border: none;
  outline: none;
  font-weight: 400;
  background-color: #0c0f1a;
  color: #e8ecff;
}