body {
  margin: 0;
  padding: 0;
}

.root {
  height: 100vh;
  background-color: #000;
  transition: background-color 0.2s linear;
}
.party {
  background-color: #befec7;
}

.party-container {
  height: 100vh;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}

.party-button {
  display: inline-block;
  box-sizing: content-box;
  width: 200px;
  height: 200px;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #018dc4;
  border-radius: 50%;
  font: normal normal bold 50px / 0 Arial, Helvetica, sans-serif;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  text-overflow: clip;
  text-transform: uppercase;
  background-color: #ff0000;
  box-shadow:
    10px 10px 37px 9px rgba(0, 0, 0, 0.5) inset, -5px -5px 37px 9px rgba(
      255,
      191,
      191,
      0.49
    ) inset, 0 0 0 0 rgba(0, 0, 0, 0.5) inset, 2px 2px 2px 3px rgba(
      107,
      107,
      107,
      1
    ), 6px 6px 3px 7px rgba(173, 173, 173, 1), 6px 6px 2px 10px rgba(
      124,
      124,
      124,
      1
    );
  text-shadow: 1px 1px 1px rgba(196, 29, 29, 1), -1px -1px 1px
    rgba(0, 0, 0, 0.51);
  transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  outline: none;
}

.party-button:active {
  outline: none;
}

.party .party-button {
  padding: 12px 9px 8px 11px;
  background-color: #00aa00;
  box-shadow:
    10px 10px 37px 9px rgba(0, 0, 0, 0.5) inset, -5px -7px 37px 9px rgba(
      159,
      252,
      185,
      0.49
    ) inset, -3px -5px 4px 0 rgba(0, 0, 0, 0.5) inset, 0 0 2px 3px rgba(
      107,
      107,
      107,
      1
    ), 4px 4px 3px 7px rgba(173, 173, 173, 1), 4px 4px 2px 10px rgba(
      124,
      124,
      124,
      1
    );
  text-shadow: 1px 1px 1px #00aa00, -1px -1px 1px rgba(0, 0, 0, 0.51);
  transform: translateX(2px) translateY(2px);
}
