@font-face {
  font-family: "Poppins";
  font-weight: 900;
  font-style: normal;
  src: url('/fonts/Poppins-Black.ttf');
}

@font-face {
  font-family: "Poppins";
  font-weight: 900;
  font-style: italic;
  src: url('/fonts/Poppins-BlackItalic.ttf');
}

@font-face {
  font-family: "Poppins";
  font-weight: 500;
  font-style: normal;
  src: url('/fonts/Poppins-Medium.ttf');
}

@font-face {
  font-family: "Poppins";
  font-weight: 500;
  font-style: italic;
  src: url('/fonts/Poppins-MediumItalic.ttf');
}

:root {
  --background-color: snow;
  --size: 50px;
  --small-size: 40px;
}

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

body {
  padding: 10px;
  background-color: var(--background-color);
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h2 {
  text-transform: uppercase;
  font-style: italic;
}

.board {
  display: flex;
  flex-direction: column;
  gap: var(--board-gap);
  position: relative;
}

.selection {
  display: flex;
  display: none;
  gap: var(--gap);
}

.pin {
  width: var(--size);
  height: var(--size);
  border-radius: 100%;
  box-sizing: border-box;
  box-shadow: inset 0px -5px 5px rgba(0, 0, 0, 0.25);
  &[data-color="color0"] {
    background-color: #7bc5cd;
  }
  &[data-color="color1"] {
    background-color: tan;
  }
  &[data-color="color2"] {
    background-color: #fe88b1;
  }
  &[data-color="color3"] {
    background-color: #f6cf71;
  }
  &[data-color="color4"] {
    background-color: indianred;
  }
  &[data-color="color5"] {
    background-color: #b497e7;
  }
  &[data-color="color6"] {
    background-color: papayawhip;
  }
  &[data-color="color7"] {
    background-color: rgb(74, 242, 186);
  }
  &[data-color="color8"] {
    background-color: cornflowerblue;
  }
  &[data-color="color9"] {
    background-color: #87c55f;
  }
  &[data-state="empty"] {
    background-color: gainsboro;
    box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.2);
  }
  &[data-state="correct"],
  &[data-state="wrong-spot"],
  &[data-state="incorrect"] {
    border: solid 3px white;
    outline: solid 4px grey;
  }
  &[data-state="correct"] {
    outline-color: rgb(57, 218, 25);
  }
  &[data-state="wrong-spot"] {
    outline-color: darkorange;
  }
  &[data-state="incorrect"] {
    outline-color: rgb(237, 12, 12);
  }
  &.small {
    width: var(--small-size);
    height: var(--small-size);
  }
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  .button {
    cursor: pointer;
    &[data-state="disabled"] {
      pointer-events: none;
      background-color: gainsboro;
      box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.2);
    }
    &:active {
      transform: scale(0.9);
    }
  }
}

.attempts {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.attempt {
  display: flex;
  gap: var(--gap);
}

.controls {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.foot {
  text-align: center;
  font-size: 32px;
  color: var(--background-color);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
  font-weight: 900;
  font-style: italic;
}

.game-over {
  position: absolute;
  inset: -5px;
  display: flex;
  justify-content: center;
  padding: 100px 10px;
  text-align: center;

  .game-over-body {
    display: flex;
    pointer-events: none;
    flex-direction: column;
    gap: 50px;
  }

  &[data-show="false"] {
    display: none;
  }

  .gameover-selection {
    display: flex;
    gap: var(--gap);
    justify-content: center;
  }
  
}

[data-gameover="true"] {
  opacity: 0.1;
}

main {
  max-width: 550px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.example {
  display: flex;
  align-items: center;
  gap: 20px;
}

.examples {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;
}