let {
    font-size: 40px;
    color: var(--primary-color);
    transform: translateY(-600px);
    animation:1.2s slideIn ease-in-out forwards 1s;
    z-index: 10;
    opacity: 0;
    position: relative;
    height: 50vh;
    width: 300px;
    height: 10;
    background-color: var(--complimentary-color);
    justify-content: center;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'italic', sans-serif;
    
   
    --primary-color: #6CD9CE;
    --secondary-color: #D93BA1;
    --complimentary-color: #2E2473;
  }
  
  let::before {
      content: '';
      width: 0%;
      height: 76px;
      background-color: var(--secondary-color);
      position: absolute;
      bottom: -10px;
      animation: 1s underline ease-in-out forwards 2s;
      mix-blend-mode: screen;
  }
  
  .overlay {
      position: absolute;
      width: 100%;
      top: 0;
      bottom: 0;
      opacity: 0;
      left: 0;
      right: 0;
      background-color: var(--secondary-color);
      transform: scale(.5);
      animation: .5s slideIn ease-in-out forwards, 1s skewBg ease-in-out;
  }
  
  @keyframes skewBg {
    0% {
      transform: scale(.5);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes underline {
    100% {
      width: 100%;
    }
  }
  
  @keyframes slideIn {
    100% {
      transform: translateY(0px);
      opacity: 1;
    }
  }