:root {
  --glitter: url("https://assets.codepen.io/13471/silver-glitter-background.png");
  --ratio-x: .5;
  --ratio-y: .75;
  --from-center: 2;
}

main {
  --bgoffsetx: calc( 2.9px * var(--ratio-x));
  --bgoffsety: calc( 4.3px * var(--ratio-y));
  --pointerx: calc( 100% * var(--ratio-x));
  --pointery: calc( 100% * var(--ratio-y));
  --h: calc( 360deg * var( --from-center ) );
  --s: calc( 90% * var( --from-center ) );
  background: linear-gradient(135deg, hsl(28deg, var(--s), 15%), hsl(198deg, var(--s), 15%)), var(--glitter), var(--glitter), radial-gradient(farthest-corner circle at var(--pointerx) var(--pointery), white 20px, rgba(237, 222, 222, 0.38) 150px, black 65%);
  background-position: calc( 70% + var(--bgoffsetx) ) calc( 70% + var(--bgoffsety) ), calc( 30% - var(--bgoffsetx) ) calc( 30% - var(--bgoffsety) );
  background-size: cover, 560px auto, 400px auto, cover;
  background-blend-mode: overlay, multiply, color, overlay;
  transition: opacity 4s ease-out;
}

main.loading {
  opacity: 0;
}

main {
  image-rendering: optimizeQuality;
  transform: translate3d(0, 0, 0.01px);
}

main * {
  pointer-events: none;
  text-anchor: middle;
  alignment-baseline: middle;
}

main svg {
  mix-blend-mode: overlay;
  fill: #d7b4a7;
  opacity: calc( 1.3 * var(--from-center) );
  filter: drop-shadow(0 0 30px black) drop-shadow(0 0 10px black) brightness(1.3);
}

body {
  color: black;
  background: black;
  font-family: "Cinzel", sans-serif;
}

html, body, main {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  grid-row: 1;
}

img {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.social-icon {
  stroke-width: 1.25;
  stroke: cyan;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  z-index: 10;
  -webkit-animation: iconsLoad 10s ease both 1s;
          animation: iconsLoad 10s ease both 1s;
}

.social-icon.twitter {
  right: 40px;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

@-webkit-keyframes iconsLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes iconsLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}