/* ----------------------------------------------------- */
/* SIMON */
:root {
  --drop-shadow: 7px -7px 15px white, -7px 7px 15px black;
  --inset-shadow: 7px -7px 15px white inset, -7px 7px 15px black inset;
}

body {
  background: linear-gradient(to bottom left, whitesmoke, lightgray);
  height: 100vh;
  /* display: flex;
  justify-content: center; */
  padding-left: 35vw;
}

#board {
  position: relative;
}

/* SCORE */
#round-display {
  position: absolute;
  top: 39.5vmin;
  left: 12.5vmin;
  font-size: 6vmin;
  transition: opacity 0.5s;
  color: gray;
  text-shadow: 2px -2px 2px white, -2px 2px 2px black;
}

/* BOUTONS */
.losange {
  width: 30vmin;
  height: 30vmin;
  transform: rotate(45deg);
  border-radius: 6px;

  box-shadow: var(--drop-shadow);

  position: absolute;

  transition: 0.5s;
}

.losange:not(.disabled) {
  cursor: pointer;
}

#blue {
  background-color: blue;
  top: 6.5vmin;
}
#blue:hover {
  box-shadow: var(--drop-shadow), 0px 0px 5px 5px rgb(185, 185, 255) inset;
}
#blue.active {
  box-shadow: var(--drop-shadow), 0px 0px 5px 15px rgb(185, 185, 255) inset;
}

#green {
  background-color: green;
  top: 60.5vmin;
}
#green:hover {
  box-shadow: var(--drop-shadow), 0px 0px 5px 5px rgb(197, 255, 197) inset;
}
#green.active {
  box-shadow: var(--drop-shadow), 0px 0px 5px 15px rgb(197, 255, 197) inset;
}

#yellow {
  background-color: yellow;
  top: 33.5vmin;
  left: -28vmin;
}
#yellow:hover {
  box-shadow: var(--drop-shadow), 0px 0px 5px 5px rgb(255, 255, 241) inset;
}
#yellow.active {
  box-shadow: var(--drop-shadow), 0px 0px 5px 15px rgb(255, 255, 241) inset;
}

#red {
  background-color: red;
  top: 33.5vmin;
  left: 27vmin;
}
#red:hover {
  box-shadow: var(--drop-shadow), 0px 0px 5px 5px rgb(255, 196, 196) inset;
}
#red.active {
  box-shadow: var(--drop-shadow), 0px 0px 5px 15px rgb(255, 196, 196) inset;
}

.losange:active:not(.disabled),
.losange.pressed {
  box-shadow: var(--inset-shadow) !important;
}

/* ANIMATIONS */
.fade {
  opacity: 0;
  transition: opacity 0.5s;
}

.shaking {
  animation-name: shakes;
  animation-duration: 0.07s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes shakes {
  from {
    transform: rotate(40deg);
  }
  to {
    transform: rotate(50deg);
  }
}