@import url('https://fonts.googleapis.com/css2?family=Bakbak+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&family=Unbounded:wght@300;400;500;600;700;800&display=swap');

* {
  margin: 0;
  padding: 0;
  letter-spacing: 0.2vmin;
  font-family: 'Poppins', sans-serif;
  color: rgb(252, 243, 184);
}
body {
  background-color: rgb(27, 27, 28);
}

#main-header {
  background-color: rgb(243, 255, 193);
  width: 100%;
  text-align: center;
}
#main-header h2 {
  color: rgb(52, 49, 57);
  letter-spacing: 1vmin;
  font-family: 'Unbounded', cursive;
  padding: 1vmin;
}

.main-container {
  margin-top: 7vmin;
}
.flex-c {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex-r {
  display: flex;
  flex-direction: row;
  align-items: center;
}
header {
  padding: 2vmin;
  margin-bottom: 4vmin;
}
header h2 {
  letter-spacing: 1vmin;
  text-transform: uppercase;
  color:rgb(255, 249, 178);
  font-size: 7vmin;
  font-family: 'Unbounded', cursive;
  line-height: 6vmin;
}
#winning-message {
  color: white;
  visibility: hidden;
}
#blueberry-text {
  color: rgb(163, 163, 255);
}
#popup-roll-dice {
  background-color: #5042bc;
  border: 2px solid rgb(237, 238, 244);
  width: 30vmin;
  height: 39vmin;
  position: absolute;
  top: 48vmin;
  padding: 10vmin 10vmin 9vmin 10vmin;
  border-radius: 50px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.background {
  background-color: #d9d3f3cb;
  border: 1px solid rgb(255, 233, 233);
  width: 30vmin;
  height: 39vmin;
  position: absolute;
  bottom: -3vmin;
  right: -3vmin;
  z-index: -1;
  justify-content: center;
  padding: 10vmin 10vmin 9vmin 10vmin;
  border-radius: 50px;
}
#popup-roll-dice h3 {
  font-size: 4vmin;
  text-align: center;
  color: rgb(255, 255, 255);
    font-family: 'Unbounded', cursive;
}
#popup-roll-dice h4 {
  font-size: 4vmin;
}
#popup-roll-dice h2 {
  font-size: 7vmin;
}
#gameboard .square {
  background-color: #d1cbff;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.3vmin solid rgba(238, 227, 140, 0.511);
  border-radius: 0.2vmin;
}
#roll-dice-btn {
  background-color: #574acf;
  font-size: 5vmin;
  border-radius: 50px;
  margin: 2vmin;
  width: 10vmin;
  height: 10vmin;
  border: none;
  box-shadow: rgba(240, 248, 86, 0.919) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
#roll-dice-btn:hover {
  cursor: pointer;
  background-color: #2a2556;
}
#start-game-btn {
  padding: 2vmin;
  background-color: #c4cf4a;
  border-radius: 20px;
  border: none;
  color:rgba(0, 0, 0, 0.928);
  font-size: 2.4vmin;
  font-family: 'Unbounded', cursive;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  position: relative;
  bottom: -1vmin;
  font-weight: 700;
}
#start-game-btn:hover {
  cursor: pointer;
  background-color: #c34bfa;
  color: white;
}
#gameboard 
.moveable-square {
  background-color: #312e2d;
  box-shadow: rgba(175, 125, 182, 0.782) 0px 4px 2px;
  border: 0.8vmin solid rgba(255, 255, 255, 0);
  z-index: 5;
}
#gameboard 
.moveable-square:hover {
  cursor: pointer;
  transition: all 500ms ease-in-out;
  background-color: #aa8abf72;
  box-shadow: none;
}
#gameboard {
  justify-content: center;
  border: 0.4vmin solid #ffffff;;
  width: fit-content;
  display: grid;
  grid-template-columns: repeat(8, 10vmin);
  grid-template-rows: repeat(8, 10vmin);
  box-shadow: rgba(148, 148, 180, 0.853) 0px 7px 29px 0px;
}
.checker-piece {
  width: 9vmin;
  height: 9vmin;
  border-radius: 50px;
  box-shadow: rgba(0, 0, 0, 0.489) 0px 3px 3px, rgba(0, 0, 0, 0.24) 0px 3px 2px;
  animation: bounceIn;
  animation-duration: 1s;
  z-index: 3;
}
.piece-icon {
  width: 9vmin;
  border-radius: 50px;
}
#gameboard 
.moveable-square:hover 
.lemon-icon {
  transition: filter 0.5s linear;
  filter: blur(0);
  animation: jello;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.lemon-icon {
  box-shadow: rgba(241, 146, 13, 0.851) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  filter: blur(1px);
  z-index: 5;
}
#gameboard
.square 
.lemon-piece {
  background: rgb(184, 160, 248);
  border: 1vmin solid rgba(164, 124, 244, 0.984);
}
#gameboard
.square 
.lemon-piece:hover {
  border: 1vmin solid rgba(249, 213, 105, 0.984);
}
.blueberry-img {
  width: 20vmin;
  position: absolute;
  top: -13vmin;
  left: 15vmin;
}
#gameboard 
.moveable-square:hover 
.checker-piece {
  transform: translate(0px, 0.5vmin) rotate(1turn) ;
  box-shadow:
  inset 0 0 50px #fff,      /* inner white */
  inset 20px 0 80px rgba(255, 213, 0, 0.197),   /* inner left magenta short */
  inset -20px 0 80px rgb(249, 246, 22),  /* inner right cyan short */
  inset 20px 0 300px #f0f,  /* inner left magenta broad */
  inset -20px 0 300px #0ff, /* inner right cyan broad */
  0 0 50px #fff426,            /* outer white */
  -10px 0 80px #f0f,        /* outer left magenta */
  10px 0 80px #0ff;         /* outer right cyan */
  transition: all 0.8s linear;
}

#gameboard
.square 
.blueberry-piece {
  border: 1.1vmin solid rgba(53, 54, 52, 0.932);
  background: linear-gradient(309deg, #bbccff, #9887f67c);
  box-shadow: rgba(92, 86, 86, 0.967) 0px 25px 20px -20px;
}

.blueberry-icon {
  border-radius: 0px;
}
#gameboard 
.moveable-square:hover 
.blueberry-icon {
  filter: blur(0);
  animation: swing;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  z-index: 3;
}
footer {
  margin-top: 16vmin;
  width: 100%;
}
.names {
  padding: 2vmin;
}
#credit-link {
  color:rgb(108, 252, 132);
  font-weight: 900;
  text-decoration: none;
}
#credit-link:hover {
  color:rgb(6, 199, 151);
}

#made-by {
  background-color: #dbc92d;
  width: 100%;
  text-align: center;
  color: black;
  font-weight: 900;
}