:root {
  --pink-dull: #a1216166;
  --pink-dark: #7e1248;
  --pink-mid: #cf0068;
  --pink: #e60073;
  --pink-light: #ff4da6;
}

.buttons {
  position: relative;
  /* width: 300px; */
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.btn, .btn:active {
  box-shadow: 0 0 20px #ffffffaa, 0 0 30px #ffffffaa, 0 0 30px var(--pink-dull), 0 0 40px var(--pink-dull), 0 0 50px var(--pink-dull), 0 0 60px var(--pink-dull), 0 0 70px var(--pink-dull);
  font-family: 'Roboto Condensed', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color: var(--pink-dark);
  padding: 6px 12px;
  margin: 0;
  border: none;
  border-radius: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 1px;
  pointer-events: none;
  cursor: default;
  outline: none;
	text-shadow: 0px 1px 0px #fff;
  opacity: 0.85;
  background: linear-gradient(180deg,#fff7fe 0%,#f1cdeb 49%,#e6b0d6 51%,#f1cdeb 100%);
  transition: all 0.2s ease;
  z-index: 1;
}

.btn:nth-child(1),
.btn:nth-child(2) {
  margin-right: 15px;
}

.btn.active {
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--pink), 0 0 40px var(--pink), 0 0 50px var(--pink), 0 0 60px var(--pink), 0 0 70px var(--pink);
  pointer-events: all;
  cursor: pointer;
  color: var(--pink);
  opacity: 1;
  background: linear-gradient(180deg,#fff7fe 0%,#f7d7f1 49%,#ecb7dc 51%,#f7d7f1 100%);
  transition: all 0.2s ease;
  z-index: 10;
}

.btn.active:hover {
  box-shadow: 0 0 20px #fff, 0 0 30px var(--pink-light), 0 0 40px var(--pink-light), 0 0 50px var(--pink-light), 0 0 60px var(--pink-light), 0 0 70px var(--pink-light), 0 0 80px var(--pink-light);
  color: var(--pink-mid);
  transition: all 0.2s ease;
}

.btn-green {
  border: none;
  border-radius: 5px;
  background-color: #a7b4a0;
  color: #386900;
  width: 50px;
  height: 50px;
  outline: none;
  box-shadow: 0 0 10px 2px #8fff0e;
  pointer-events: none;
  cursor: default;
  font-size: 1.5rem;
  transition: all 0.2s ease;
}

.btn-green.active:hover {
  box-shadow: 0 0 10px 5px #8fff0e;
  cursor: pointer;
}

.btn-green.active {
  color: #fff;
  background-color: #c9e6ba;
  pointer-events: all;
  text-shadow: 0 2px 5px grey;
  transition: all 0.2s ease;
}

.btn-green::after {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900;
  content: "\f04c";
}

.btn-green.active {
  transition: all 0.25s ease;
}

.btn-green.active::after {
  content: "\f04b";
  margin-left: 3px;
}