:root {
    --pink: #e55d87;
    --blue: #5fc3e4;
    --background-color: #1a1a1a;
  }
  
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--background-color);
    font-family: 'Roboto Mono', monospace;
    text-transform: uppercase;
    text-align: center;
  }
 
  .center-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  
  @keyframes moving-gradient {
    0% {
      background-position: left bottom;
    }
    100% {
      background-position: right top;
    }
  }
  
  @-webkit-keyframes moving-gradient {
    0% {
      background-position: left bottom;
    }
    100% {
      background-position: right top;
    }
  }
  
  h1 {
    font-size: clamp(3rem, 10vw, 10rem);
  
    background: linear-gradient(to left, var(--pink), var(--blue), var(--pink))
        repeat;
    background-size: 50% 100%;
  
    /* Text gradient effect */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  
    -webkit-text-fill-color: transparent;
    -webkit-font-smoothing: antialiased;
  
    animation: moving-gradient 1s linear infinite;
    -webkit-animation: moving-gradient 1s linear infinite;
  
    margin: 0.5em;
  }