@property --pulse {
  syntax: "<color>";
  inherits: false;
  initial-value: #333;
}

html {
  background: radial-gradient(circle, var(--pulse) 1px, #111 1px); /* from https://stackoverflow.com/a/32861765 */
  background-size: 20px 20px;
  font-family: sans-serif;
  animation: 5s linear pulse infinite;
  margin: 0;
}

@keyframes pulse {
  0% {
    --pulse: #555;
  }
  10% {
    --pulse: #333;
   }
}

body {
  margin: 0;
}

header {
  height: 15em;
  overflow: clip;
  margin-bottom: 2rem;
  background: linear-gradient(to bottom, #FFC15E, #F7934C);
  mask-image: repeating-linear-gradient(45deg, #ffff 0 6em, #0000 6em 12em); /* WHAT IS THAT */
  background-size: calc(12em/0.707106781) 100%;
  box-shadow: 0 0 1em #F7934C;
  mask-size: calc(12em/0.707106781) 100%; /* 0.7 thingy is sin(45°) */
  animation: 2s cubic-bezier(0, 0.55, 0.45, 1) slowdown 0s,
             2s linear stripe-move 2s infinite;
}

@keyframes slowdown {
  from {
    mask-position: calc((12em/0.707106781)*30);
  }
  to {
    mask-position-x: 0;
  }
}

@keyframes stripe-move {
  from {
    mask-position: calc(12em/0.707106781) 0;
  }
  to {
    mask-position: 0;
  }
}

header div.bloghtext {
  position: absolute;
  display: block;
  overflow-x: clip;
  width: 100%;
  height: 15rem;
  font-size: 12rem;
  font-weight: bolder;
  font-size-adjust: 1;
  text-align: center;
  color: chocolate;
  transform: translateY(-21rem);
  pointer-events: none;
}

header div.bloghtext:before {
    content: "";
    margin-left: -100%;
}
header div.bloghtext:after {
    content: "";
    margin-right: -100%;
}

header a {
  display: block;
  width: 100%;
  height: 100%;
}

div.hdiv {
  position: absolute;
  width: 100%;
  height: 15em;
  display: block;
  box-shadow: 0 0 5em #F7934C;
  transform: translateY(-17rem);
  pointer-events: none;
}

main {
  color: white;
  background: #111;
  margin: auto;
  padding: 1em;
  max-width: 60em;
  box-sizing: border-box;
  border: 2px solid white;
  border-radius: .5em;
  box-shadow: 0 0 5em #000;
  animation: 1s ease-out appear;
}

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

main *:first-child {
  margin-top: 0;
}

main *:last-child {
  margin-bottom: 0;
}