:root {
  --color-main: #77cfe3;
  --color-white: #fff;
  --color-black: #000;
  --color-gray: #666;
  --bg-gradient: linear-gradient(to top, rgb(36, 36, 36) 0%, rgb(48, 48, 48) 100%);
  --bg-gradient-active: linear-gradient(to top, rgb(20, 20, 20) 0%, rgb(30, 30, 30) 100%);
  --bg-gradient-hover: linear-gradient(90deg, rgba(48, 48, 48, 1) 0%, rgba(80, 80, 80, 1) 100%);
  --btn-shadow-active: inset 0 16px 14px -20px transparent, 0 0px 13px 0 rgba(0, 0, 0, 0.3), inset 0 0 7px 2px rgba(0, 0, 0, 0.4);
}


.tuner-wrapper {
  background-image: var(--bg-gradient);
  background-color: rgb(20, 20, 20);
  padding: 1rem;
}
.tuner-title {
  margin: 0 0 0.5rem;
  text-align: center;
  text-shadow: -1px -1px 1px var(--color-white), 1px 1px 1px var(--color-black);
  color: var(--color-gray);
  opacity: 0.3;
  font-size: 1.875rem;
}

.tuner-container {
  display: flex;
}

.tuner-button {
  position: relative;
  border: 1px solid var(--color-black);
  font-size: 1.25rem;
  background-image: var(--bg-gradient);
  background-color: rgb(20, 20, 20);
  color: var(--color-gray);
  line-height: 2.5rem;
  padding: 0;
  width: 100%;
  transition: all 0.2s ease-out;
}

.tuner-button:hover {
  cursor: pointer;
  color: var(--color-main);
  background-image:  var(--bg-gradient-hover);
  background: #303030;
}

.tuner-button:focus {
  outline: 0;
}
.tuner-button.active {
  background-image: var(--bg-gradient-active);
  color: var(--color-main);
  box-shadow: var(--btn-shadow-active);
}