*,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  .rainbow {
    border-radius: 10px;
    display: inline-block;    
  
    --border-size: 0.3rem;
    border: var(--border-size) solid transparent;
  
    /* Paint an image in the border */
    border-image: conic-gradient(
        from var(--angle),
        #e7f1f7 0deg 180deg,
        #dba400 180deg 360deg
      )2;
    background: rgb(255 255 255 / var(--opacity));
  }
  
  /* Animate when Houdini is available */
  @supports (background: paint(houdini)) {
    @property --opacity {
      syntax: "<number>";
      initial-value: 0.5;
      inherits: false;
    }
  
    @property --angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }
  
    @keyframes opacityChange {
      to {
        --opacity: 1;
      }
    }
  
    @keyframes rotate {
      to {
        --angle: 360deg;
      }
    }
  
    .rainbow {
      animation: rotate 5s linear infinite, opacityChange 5s infinite alternate;
    }
  }