:root {
  --width: 20;
  --height: 20;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* height: 90vh; */
  row-gap: 1rem;
  background-color: rgb(0, 53, 122);
}

h1,
h2,
label {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
  padding: 0;
  color: #fffefe94;
}

h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
label {
  font-size: 1rem;
}

.board {
  display: grid;
  grid-template-columns: repeat(var(--width), 1.3rem);
  grid-template-rows: repeat(var(--height), 1.3rem);
  background-color: #afafaf69;
  border-radius: 10px;
  box-shadow: 1px 2px 3px white;
}

.board:focus {
  outline: none;
}

.dot {
  display: grid;
  grid-template-columns: 1.3rem;
  grid-template-rows: 1.3rem;
}

.food {
  /* background-color: rgb(255, 187, 0); */
  border-radius: 50%;
  margin: 5px;
  background: radial-gradient(circle at 30% 30%, #ffffff, #fbff00);
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
}

.snake {
  background-color: rgb(33, 238, 26);
  border-radius: 1rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.snake-lost {
  background-color: rgb(255, 106, 106);
}

.snake-head-left {
  width: 2px;
  height: 2px;
  border: 2px solid black;
  border-radius: 50%;
  background-color: rgb(200, 255, 0);
  box-shadow: 0px 7px 0 -2px rgb(200, 255, 0), 0px 7px 0 0px rgb(0, 0, 0);
  transform: translate(-100%, -50%);
}
.snake-head-up {
  width: 2px;
  height: 2px;
  border: 2px solid black;
  border-radius: 50%;
  background-color: rgb(200, 255, 0);
  box-shadow: 7px 0px 0 -2px rgb(200, 255, 0), 7px 0px 0 0px rgb(0, 0, 0);
  transform: translate(-80%, -100%);
}
.snake-head-right {
  width: 2px;
  height: 2px;
  border: 2px solid black;
  border-radius: 50%;
  background-color: rgb(200, 255, 0);
  box-shadow: 0px 7px 0 -2px rgb(200, 255, 0), 0px 7px 0 0px rgb(0, 0, 0);
  transform: translate(100%, -50%);
}

.snake-head-down {
  width: 2px;
  height: 2px;
  border: 2px solid black;
  border-radius: 50%;
  background-color: rgb(200, 255, 0);
  box-shadow: 7px 0px 0 -2px rgb(200, 255, 0), 7px 0px 0 0px rgb(0, 0, 0);
  transform: translate(-50%, 100%);
}

.snake-head {
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.blank {
  background-color: transparent;
}

.controllers {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-radius: 3px;
  background-color: #838383;
  /* align-items: center; */
}

.dificulty {
  /* background-color: #0000002c; */
  padding: 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}

.size {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1rem;
  row-gap: 1rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  /* border: 1px sol; */
}

.size-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  column-gap: 1rem;
}

input {
  text-align: right;
  border: 0;
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,
    rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}

.btn {
  /* margin: 1rem; */
  padding: 0.5rem 1rem;
  border: none;
  background-color: #838383;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
    rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.score {
  padding: 0 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
.score > h2 {
  padding: 0;
  margin: 0;
  font-size: 1rem;
}

.controller-keys {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.3rem;
}

.controller-keys-2nd-line {
  display: flex;
  flex-direction: row;
  column-gap: 0.3rem;
}

.btn-arrow {
  width: 5rem;
  height: 5rem;
  background-color: #486790;
  fill: #fff;
  font-size: 1rem;
  border: none;
}

.btn-arrow > svg {
  width: 2rem;
}

.controllers-columns {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  align-items: center;
  justify-content: center;
}

.controllers-col-right {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  row-gap: 1rem;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}