.volume {
  box-shadow: -4px -4px 9px 4px #27497e, 4px 4px 9px 4px #030f20;
}

.full-quad {
  border-radius: var(--border-radius-medium);
}

.full-quad-small {
  border-radius: var(--border-radius-extra-medium);
}

.guad-top {
  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}

.guad-bottom {
  border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
}

.quad-right-top {
  border-radius: var(--border-radius-medium) var(--border-radius-small)
    var(--border-radius-medium) var(--border-radius-medium);
}

.quad-right-bottom {
  border-radius: var(--border-radius-medium) var(--border-radius-medium)
    var(--border-radius-small) var(--border-radius-medium);
}

.quad-left-bottom {
  border-radius: var(--border-radius-medium) var(--border-radius-medium)
    var(--border-radius-medium) var(--border-radius-small);
}

.quad-left-top {
  border-radius: var(--border-radius-small) var(--border-radius-medium)
    var(--border-radius-medium) var(--border-radius-medium);
}

.quad-left-bottom-small {
  border-radius: var(--border-radius-extra-medium)
    var(--border-radius-extra-medium) var(--border-radius-extra-medium)
    var(--border-radius-extra-small);
}

.quad-right-bottom-small {
  border-radius: var(--border-radius-extra-medium) var(--border-radius-extra-medium)
    var(--border-radius-small) var(--border-radius-extra-medium);
}

.quad-right-top-small {
  border-radius: var(--border-radius-extra-medium) var(--border-radius-small)
    var(--border-radius-extra-medium) var(--border-radius-extra-medium);
}

.quad-left-top-xl {
  border-radius: var(--border-radius-small) var(--border-radius-xl)
    var(--border-radius-xl) var(--border-radius-xl);
}

.pill{
   border-radius: 100px;
}