body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: var(--red-grad-1) 0 0 / 6vw 100%;
}

@mixin inset($inset: 0) {
  position: absolute;
  top: $inset;
  left: $inset;
  right: $inset;
  bottom: $inset;
}

@mixin flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

:root {
  --red-color-1: #af2222;
  --red-color-2: #c1423e;
  --red-color-3: #c62a2a;
  --red-color-4: #951110;
  --green-color-1: #486433;
  --green-color-2: #2b361a;
  --red-grad-1: linear-gradient(
    to right,
    var(--red-color-1) 50%,
    var(--red-color-2) 0
  );
}

.embossed {
  --emboss-radius: 1rem;
  --emboss-out: 6px;
  --emboss-out-minus: calc(var(--emboss-out) * -1);
  --emboss-inset: 2px;
  --emboss-inset-minus: calc(var(--emboss-inset) * -1);
  --emboss-blur: 1px;
  --emboss-bg-1: var(--red-color-3);
  --emboss-bg-2: var(--green-color-1);
  --emboss-color-1: white;
  --emboss-color-2: var(--red-color-4);
  --emboss-color-3: var(--green-color-2);

  position: relative;
  box-sizing: border-box;
  white-space: nowrap;

  &::before {
    @include inset(var(--emboss-out-minus));
    content: "";
    background: var(--emboss-bg-1);
    box-shadow: inset var(--emboss-inset-minus) var(--emboss-inset-minus)
        var(--emboss-blur) var(--emboss-color-1),
      inset var(--emboss-inset) var(--emboss-inset) var(--emboss-blur)
        var(--emboss-color-2);
    border-radius: calc(var(--emboss-radius) + var(--emboss-out));
  }

  &::after {
    @include inset;
    @include flex-center;
    content: attr(data-text);
    color: white;
    font-weight: bold;
    background: var(--emboss-bg-2);
    box-shadow: inset var(--emboss-inset) var(--emboss-inset) var(--emboss-blur)
        var(--emboss-color-1),
      inset var(--emboss-inset-minus) var(--emboss-inset-minus)
        var(--emboss-blur) var(--emboss-color-3);
    border-radius: var(--emboss-radius);
  }
}