body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgb(19, 19, 19);
}
h1 {
    color: rgb(255, 255, 255);
    font-family:'Impact'
}
h2 {
    color: rgb(255, 255, 255);
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

hr.dashed {
    border: none;
    border-top: 2px dashed #ffffff;
    width: 32rem;
}

.vignette {
  position: relative; /* required so ::after is positioned inside */
    height: 100vh;   /* make it fill the screen */
  width: 100vw;    /* full width */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.vignette::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgb(0, 0, 0) 75%);
    z-index: 0;
  }

.vignette > * {
  position: relative;
  z-index: 1; /* make children (h1, h2, .cooking) appear above overlay */
}

@keyframes glowPulse {
  0%   { filter: drop-shadow(0 0 15px rgba(179, 255, 217, 0.5)); }
  50%  { filter: drop-shadow(0 0 25px rgba(179, 255, 217, 0.5)); }
  100% { filter: drop-shadow(0 0 15px rgba(179, 255, 217, 0.5)); }
}

.cooking {
  width: 32rem;
  height: 32rem;
  background: url('assets/cooking.png') center/cover no-repeat;
  position: relative;
  margin: 2rem;

  /* fade out bottom */

  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  mask-repeat: no-repeat;
  mask-size: cover;

  animation: glowPulse 2.5s infinite ease-in-out;
}