html{height:100%;margin:0;font-family:system-ui,sans-serif;overflow-x:hidden}
.bg{position:absolute;inset:0;z-index:-1}
.bg img{width:100%;display:block}

body{
  margin: 0;
  min-height: 100vh;
  background-color: #e493d0;
  background-image: 
  radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)),
  radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)),
  radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)),
  radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)),
  radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));
  background-size: 
    130vmax 130vmax,
    80vmax 80vmax,
    90vmax, 90vmax,
    110vmax 110vmax,
    90vmax 90vmax;
  background-position: 
    -80vmax -80vmax,
    60vmax -30vmax,
    10vmax 30vmax,
    -30vmax -10vmax,
    50vmax 50vmax;
  background-repeat: no-repeat;
  animation: 15s movement linear infinite;
}
@keyframes movement{
0%, 100%{
  background-size: 
    130vmax 130vmax,
    80vmax 80vmax,
    90vmax, 90vmax,
    110vmax 110vmax,
    90vmax 90vmax;
  background-position: 
    -80vmax -80vmax,
    60vmax -30vmax,
    10vmax 30vmax,
    -30vmax -10vmax,
    50vmax 50vmax;
  }
25%{
  background-size: 
    100vmax 100vmax,
    90vmax 90vmax,
    100vmax, 100vmax,
    90vmax 90vmax,
    60vmax 60vmax;
  background-position: 
    -60vmax -90vmax,
    50vmax -40vmax,
    0vmax 20vmax,
    -40vmax -20vmax,
    40vmax 60vmax;
  }
50%{
  background-size: 
    80vmax 80vmax,
    110vmax 110vmax,
    80vmax, 80vmax,
    60vmax 60vmax,
    80vmax 80vmax;
  background-position: 
    -50vmax -70vmax,
    40vmax -30vmax,
    10vmax 0vmax,
    20vmax 10vmax,
    30vmax 70vmax;
  }
75%{
  background-size: 
    90vmax 90vmax,
    90vmax 90vmax,
    100vmax, 100vmax,
    90vmax 90vmax,
    70vmax 70vmax;
  background-position: 
    -50vmax -40vmax,
    50vmax -30vmax,
    20vmax 0vmax,
    -10vmax 10vmax,
    40vmax 60vmax;
  }
}
.glass{
  position:fixed;
  inset:92% auto auto 50%;
  transform:translate(-50%, -50%);
  width:600px;
  height:80px;
  padding: 5px 5px 5px 8px;
  border-radius:25px;
  background:rgba(0, 0, 0, 0.5);border:2px solid transparent;
  box-shadow:0 0 0 2px #ffffff99,0 0px 60px rgba(0,0,0,.8);
  backdrop-filter:url(#frosted);-webkit-backdrop-filter:url(#frosted);
  display:grid;place-items:center;outline:0;
  display: flex;
}


.glassbar{
  position:fixed;
  inset:8% auto auto auto;
  margin-left: 2%;
  padding: 0px 30px 30px 30px;
  width:210px;
  height: 80%; 
  border-radius: 30px;
  background:rgba(0,0,0,0.4);border:2px solid transparent;
  box-shadow:0 0 0 2px rgba(255,255,255,.6),0 0px 48px rgba(0,0,0,.5);
  backdrop-filter:url(#frosted-1);-webkit-backdrop-filter:url(#frosted-1);
  display:grid;place-items:center;outline:0;
}