:root {
  --btn-bg: #ffffff;
  --btn-text: #d32f2f;
  --btn-hover-bg: #d32f2f;
  --btn-hover-text: #ffffff;
  --btn-radius: 499px;
  --btn-font-size: 16px;
  --btn-padding: 18px 40px;
  --btn-shadow: 0 14px 40px rgba(255,255,255,0.35);
  --btn-hover-shadow: 0 20px 55px rgba(211,47,47,0.45);
  --arrow-rotate: 360deg;
  --arrow-speed: 0.6s;
}

.StylableButton{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--btn-bg);
  color: var(--btn-text);
  text-decoration: none;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: var(--btn-shadow);
  transition: 
    background .25s ease,
    color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.StylableButton:hover{
  background: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  transform: translateY(-2px);
  box-shadow: var(--btn-hover-shadow);
}

.StylableButton .btn-arrow{
  font-size: 28px;
  display: inline-block;
  transition: transform var(--arrow-speed) ease;
}

.StylableButton:hover .btn-arrow{
  transform: rotate(var(--arrow-rotate));
}