@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap');

:root {
  --color-carolina-blue: #74B3CE;
  --color-blue: #508991;
  --color-prussian-blue: #172A3A;
  --color-midnight-green: #004346;
  --color-mint: #09BC8A;
  --color-body-text: rgba(255, 255, 255, 0.85);
  --color-prominent-text: rgba(255, 255, 255, 1.0);
}

body {
  font-display: swap;
  font-weight: 300;
}

main p {
  margin-bottom: 1rem;
}

.rays {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ray {
  position: absolute;
  width: 10%;
  height: 100%;
  top: 0;
  left: 50px;
  animation: ray-movement-loop 120s ease-in-out infinite;
}

.ray::before {
  content: "";

  position: absolute;
  width: 100%;
  height: 200%;
  top: -50%;
  transform: rotate(20deg);

  background-color: white;
  filter: opacity(0.1);
  mix-blend-mode: lighten;
}

/*
 Can this be done dynamically by passing attributes on the element?
 */

.ray:nth-child(1) {
  animation-delay: -60s;
  animation-duration: 120s;
  left: 30%;
  width: 10%;
}
.ray:nth-child(2) {
  animation-delay: 0s;
  animation-duration: 90s;
  left: 25%;
  width: 5%;
}
.ray:nth-child(3) {
  animation-delay: -20s;
  animation-duration: 70s;
  left: 30%;
  width: 15%;
}
.ray:nth-child(4) {
  animation-delay: -30s;
  animation-duration: 100s;
  left: 35%;
  width: 12%;
}

@keyframes ray-movement-loop {
  0% {
    filter: blur(2px);
    transform: translate3d(0vw,0,0);
  }
  50% { 
    filter: blur(10px);
    transform: translate3d(30vw,0,0);
  }
  100% {
    filter: blur(2px);
    transform: translate3d(0vw,0,0);
  }
}

.name {
  text-shadow: 1px 1px 2px rgba(100,100,100,0.3);
}

.pronounce {
  text-decoration: underline dotted rgba(255, 255, 255, 0.5);
}