body {
    background-color: #111;
  }
  
  .container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .header {
    font-size: 50px;
    text-transform: uppercase;
    font-family: 'Gambetta', serif;
    letter-spacing: -3px;
    transition: 700ms ease;
    font-variation-settings: "wght" 311;
    margin-bottom: 15rem;
    color: PaleGoldenRod;
    outline: none;
    text-align: center;
  }
  
  .header:hover {
    font-variation-settings: "wght" 582; 
    letter-spacing: 1px;
  }
  
  h2 {
    text-align: center;
    font-family: 'Mr Dafoe';
    margin: 0;
    font-size: 5.5em;
    margin-top: -0.6em;
    color: rgb(224, 224, 224);
    text-shadow: 0 0 0.05em #d45b5b, 0 0 0.2em #990488, 0 0 0.3em #fe05e1;
    transform: rotate(-7deg);
  }

  .outline {	
    text-align: center;
    font-size: 3rem;
    color: PaleGoldenRod;
	background-clip: text;
	color: #111;
	animation: outline 1s ease-in-out 1.5s forwards;
  }

  @keyframes outline {
	from {
		text-shadow: 0em -7em 10em #fff;
	}
	to {
		text-shadow: 0 0.02em #fff, 0.02em 0 #fff, -0.02em 0 #fff, 0 -0.02em #fff;
	}
  }