:root {
  --off-white: #fff5d6;
  --off-white-darker: #bfb8a3;
  --off-black: #241c18;
  --blue: #3396ee;
  --dark-blue: #004482;
}

body {
  padding: 50px 40px 20px;
  background-color: var(--off-white);
}

section.links {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

section.links > a {
  font-family: Riesling;
  font-size: 60px;
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1px;
  color: var(--off-black);

  width: 200px;
  height: 200px;
  border-radius: 8px;
  margin: 40px;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  transition: all 400ms;
}

section.links > a:hover,
section.links > a.touching {
  color: var(--off-white);
  letter-spacing: 4px;
  background-color: var(--off-white-darker);

  --blur-radius: 10px;

  --displace-1: 100px;
  --neg-displace-1: -100px;
  --displace-2: 70px;
  --neg-displace-2: -50px;
  --displace-3: 50px;
  --neg-displace-3: -70px;
  --displace-4: 0px;
  --neg-displace-4: -20px;
  --displace-5: 30px;
  --neg-displace-5: 0px;

  text-shadow:
               var(--dark-blue) var(--displace-1) var(--displace-1) var(--blur-radius),
               var(--dark-blue) var(--neg-displace-1) var(--displace-1) var(--blur-radius),
               var(--dark-blue) var(--displace-1) var(--neg-displace-1) var(--blur-radius),
               var(--dark-blue) var(--neg-displace-1) var(--neg-displace-1) var(--blur-radius),

               var(--dark-blue) var(--displace-2) var(--displace-2) var(--blur-radius),
               var(--dark-blue) var(--neg-displace-2) var(--displace-2) var(--blur-radius),
               var(--dark-blue) var(--displace-2) var(--neg-displace-2) var(--blur-radius),
               var(--dark-blue) var(--neg-displace-2) var(--neg-displace-2) var(--blur-radius),

               var(--dark-blue) var(--displace-4) var(--displace-4) var(--blur-radius),
               var(--dark-blue) var(--neg-displace-4) var(--displace-4) var(--blur-radius),
               var(--dark-blue) var(--displace-4) var(--neg-displace-4) var(--blur-radius),
               var(--dark-blue) var(--neg-displace-4) var(--neg-displace-4) var(--blur-radius),

               var(--dark-blue) var(--displace-5) var(--displace-5) var(--blur-radius),
               var(--dark-blue) var(--neg-displace-5) var(--displace-5) var(--blur-radius),
               var(--dark-blue) var(--displace-5) var(--neg-displace-5) var(--blur-radius),
               var(--dark-blue) var(--neg-displace-5) var(--neg-displace-5) var(--blur-radius),

               var(--dark-blue) var(--displace-3) var(--displace-3) var(--blur-radius),
               var(--dark-blue) var(--neg-displace-3) var(--displace-3) var(--blur-radius),
               var(--dark-blue) var(--displace-3) var(--neg-displace-3) var(--blur-radius),
               var(--dark-blue) var(--neg-displace-3) var(--neg-displace-3) var(--blur-radius),

               var(--dark-blue) 50px 0 var(--blur-radius),
               var(--dark-blue) -50px 0 var(--blur-radius)
               ;
}

section.links > a.touch-end {
  color: var(--off-black);
  letter-spacing: 1px;
  background-color: transparent;
  text-shadow: unset;
}