html, body{
    margin:0;
    padding:0;
  }

  canvas{
    display:block;
  }

  h1{
    position:absolute;
    display:block;
    left:0;
    top:calc(50vh - 265px);
    width:100vw;
    height:530px;
    text-align:center;
    color:white;
    font-family:"neue-haas-grotesk-display", sans-serif;
    font-weight:600;
    font-style:normal;
    line-height:260px;
    letter-spacing:-.025em;
    font-size:340px;
    margin:0;
    filter:blur(5px);
    user-select:none;
    z-index:-1;
  }

  p{
    font-family:"neue-haas-grotesk-display", sans-serif;
    font-weight:600;
    font-style:normal;
    font-size:12px;
    line-height:1em;
    margin-top:0;
    color:gray;
  }

  #colorControlCont{
    position:absolute;
    left:20px;
    bottom:20px;
    background:white;
    padding:20px;
    width:200px;
    border-radius:5px;
  }

  button{
    width:30px;
    height:30px;
    margin-right:10px;
    border:none;
    border-radius:50%;
  }

  #purpleBtn{
    background:radial-gradient(#9678F0, #D2C8F0);
    cursor:pointer;
  }

  #orangeBtn{
    background:radial-gradient(#FAA44E, #FFDCBA);
    cursor:pointer;
  }

  #yellowBtn{
    background:radial-gradient(rgb(255, 213, 74), rgb(255, 234, 166));
    cursor:pointer;
  }

  #pinkBtn{
    background:radial-gradient(rgb(255, 117, 186), rgb(253, 168, 211));
    cursor:pointer;
  }
  
  .gradientBG{
    position:absolute;
    width:100vw;
    height:100vh;
    left:0;
    top:0;
    background:linear-gradient(rgb(150, 120, 240) 0%, rgb(150, 120, 240) 33.3333%, rgb(150, 120, 240) 41.666%, rgb(255, 150, 30) 58.333%, rgb(255, 150, 30) 66.666%, rgb(255, 150, 30) 100%);
    rotate:180deg;
    opacity:33%;
    z-index:-2;
  }