.blurred-box {
   padding: 0 3rem 1rem 3rem;
   position: relative;
   max-width: 450px;
   max-height: 550px;
   /* top: calc(44% - 175px); */
   background-color: rgba(245, 245, 245, 0.75);
   backdrop-filter: blur(10px);
   border-radius: 30px;
   overflow: hidden;
}

#svg {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   /* top: 0;
   left: 0; */
   width: 130%;
   height: 130%;
}

#path1 {
   fill: #ffcf4e;
   mix-blend-mode: multiply;
}

#path2 {
   fill: #FF00FF;
   mix-blend-mode: multiply;
}

#path3 {
   fill: #0ebeff;
   mix-blend-mode: multiply;
}

.controls {
   position: fixed;
   top: 0;
   left: 0;
   padding: 15px;
}

.dot {
   fill: #1a237e;
   fill-opacity: 0.3;
   stroke: #1a237e;
   stroke-width: 1;
   vector-effect: non-scaling-stroke;
}

.font-inika {
   font-family: 'Inika', serif;
}

.logo-container {
   margin-bottom: 0.5rem;
   margin-top: 2rem;
   margin-left: -48px;
   margin-right: -48px;
}

#logo {
   height: 60px;
   width: auto;
}