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

@mixin cover($top: 0, $left: 0, $width: 100%, $height: 100%) {
  position: absolute;
  top: $top;
  left: $left;
  width: $width;
  height: $height;
}

:root {
  --red-color-1: #770002;
  --red-grad-1: linear-gradient(0deg, #a70500 0%, #e7241d 100%),
    linear-gradient(#ffffff, #ffffff);
  --skin-grad-1: linear-gradient(90deg, #ffc274 18%, #f9e5c4 52%, #ffc274 0);
  --skin-grad-2: linear-gradient(90deg, #ffc274 18%, #f9e5c4 52%, #ffc274 100%),
    linear-gradient(#ffffff, #ffffff);
}

.bg-red-grad-1 {
  background: var(--red-grad-1);
}

.bg-skin-grad-1 {
  background-image: var(--skin-grad-1);
}

.rounded-special {
  border-radius: 50% 0% 50% 50% / 50% 50% 50% 50%;
}

.shadow-skin-grad-2 {
  position: relative;

  &::before {
    @include cover($top: 0.25rem, $left: 0.25rem);
    content: "";
    z-index: -1;
    background: var(--skin-grad-2);
    border-radius: inherit;
  }
}