@font-face {
  font-family: Doto;
  src: url('./fonts/Doto/Doto-VariableFont_ROND\,wght.ttf') format('truetype');
}

@font-face {
  font-family: Roboto;
  src: url('./fonts/Roboto/Roboto-VariableFont_wdth\,wght.ttf') format('truetype');
}

:root {
  --purple-color: #463e6c;
  --game-background: #e8cea8;
  --second-purple: #2c0f2b;
  --border-top-size: 25px;
}

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

body {
  text-align: center;
  background-color: #ccc;
  overflow: hidden;
}

canvas {
  font-family: "Doto";
  border: 2px solid black;
  border-radius: 2%;
}

.main-title {
  margin-top: 0.5rem;
  font-size: 3rem;
  color: var(--purple-color);
  position: relative;
  left: 2.5%;
}

.snake-unicode {
  position: relative;
  left: -2.5%;
}

.start-game {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.start-game-btn {
  background-color: rgba(45, 5, 243, 0.959);
  color: rgb(247, 247, 111);
  width: 80px;
  height: 80px;
  font-size: 3rem;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid black;
  cursor: pointer;
  padding-left: 10px;
}

.menu {
  position: absolute;
  background-color: var(--second-purple);
  border: 20px solid;
  border-top: 30px solid;

  border-image: repeating-linear-gradient(30deg,
      var(--purple-color) 0,
      var(--purple-color) 10px,
      var(--second-purple) 10px,
      var(--second-purple) 20px) 15;
}

.settings {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  left: 10%;
  width: 250px;
  height: 500px;
}

.settings::before {
  content: "Settings";
  color: whitesmoke;
  font-size: 25px;
  position: relative;
  top: -14.5%;
  left: +25%;
}

.option-btn {
  width: 80px;
  height: 80px;
  font-size: 3rem;
  border-radius: 50%;
  background-color: crimson;
  color: whitesmoke;
  cursor: pointer;
  margin: .2rem 0;
}

.option-btn:hover {
  background-color: rgb(160, 13, 43);
}

.sound-options::after {
  content: "Sound";
  font-size: 1.5rem;
  color: whitesmoke;
  padding: 0 2rem;
  margin: 0;
}

.tiles-options::after {
  content: "Tiles";
  font-size: 1.5rem;
  color: whitesmoke;
  display: block;
  padding: 0 2rem;
}


.theme-options::after {
  content: "Themes";
  font-size: 1.5rem;
  color: whitesmoke;
  padding: 0 2rem;
}

.keybindings {
  right: 5%;
  width: 350px;
  height: 350px;
}

.keybindings::before {
  content: "Control";
  color: whitesmoke;
  font-size: 25px;
  position: relative;
  top: -9.7%;
  left: +25%;
}

.group-key {
  display: grid;
  margin: 10% 0;
  grid-template-columns: repeat(3, 25%);
  grid-template-rows: repeat(2, 60%);
  align-items: center;
  justify-content: center;
  gap: 10px 10px;
  grid-template-areas:
    ". arrowUp ."
    "arrowLeft arrowDown arrowRight";
}

.arrowUp {
  grid-area: arrowUp;
}

.arrowUp span {
  transform: rotate(90deg);
}

.arrowDown {
  grid-area: arrowDown;
}

.arrowDown span {
  transform: rotate(90deg);
}

.arrowLeft {
  grid-area: arrowLeft;
}

.arrowRight {
  grid-area: arrowRight;
}

.key {
  background-color: #efdfdf;
  height: 70px;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10%;
  box-shadow: 4px 4px #008080;
}

.theme-selection {
  width: 150px;
  height: 80px;
  position: absolute;
  left: 10%;
  bottom: 30%;
  z-index: 30;
  background-color: black;
  color: whitesmoke;
  text-align: left;
  cursor: pointer;
  border: 5px dotted white;
  padding: .5rem;
}

.theme-selection p:hover {
  text-decoration: underline;
}

.theme-selection p:hover::before {
  content: "* ";
  vertical-align: middle;
}

.scores {
  color: white;
  padding: 1.5rem;
  width: 350px;
  height: 350px;
  right: 5%;
  top: 50%;
}

.score {
  background-color: rgba(134, 119, 166, 0.3);
  border-radius: 5px;
  padding: .5rem;
  margin: .5rem;
  display: grid;
  grid-template-columns: 10% 45% 45%; 
  grid-template-rows: 1fr 1fr; 
  grid-template-areas:
    ". . ."
    "score-date score-date score-date";
}

.score-date {
  grid-area: score-date;
}

.score-list {
  padding: 1.5rem;
  max-height: 250px;
  overflow-y: auto;
  color: white;
  display: grid;
}

.score-position {
  color: rgb(169, 202, 231)
}

.score-points {
  color: goldenrod
}

.score-saver {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.save-score {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
  color: rgb(105, 105, 105);
  background-color: rgba(255, 255, 255, .9);
  border-radius: 20px;
  justify-content: center;
  padding: 2rem;
  gap: 1rem;
}

.save-score label {
  font-family: inherit;
  font-size: 1.75rem;
}

#name {
  padding: .25rem;
}

#submitscore {
  background-color: crimson;
  border: none;
  font-size: 1rem;
  font-weight: bolder;
  color: white;
  padding: .5rem;
  border-radius: 10px;
}

#submitscore:hover {
  cursor: pointer;
  background-color: rgb(165, 19, 48);
}

.fetch-err {
  color: red;
}


@media (max-width: 1366px) {
  .main-title {
    display: none;
  }

  .score-list {
    padding: 0;
  }

  canvas {
    height: 600px;
  }

  .settings {
    left: 0%;
    width: 200px;
  }

  .keybindings,
  .scores {
    right: 0%;
    width: 250px;
  }
}