/* Switch your OS theme between light and dark :) */

.bol::before {
    position: absolute;
    z-index: 1;
  content: '';
  display: block;
  min-height: 200px;
  min-width: 200px;
  width: 40vh;
  height: 40vh;  
  background-color: var(--blob3);  
  box-shadow: var(--shades3);
  background-size: 1600% 1600%;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  perspective: 100px;
  animation: 
    transform 10s ease-in-out infinite both alternate,
    movement 10s ease-in-out infinite both;
}

.bol::after {
    position: absolute;
    z-index: 2;
    content: '';
    display: block;
    min-height: 200px;
    min-width: 200px;
    width: 30vh;
    height: 30vh;
    background-color: var(--blob);
    box-shadow: var(--shades);
    background-size: 1600% 1600%;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    perspective: 100px;
    animation: transform 5s ease-in-out infinite both alternate, movement 5s ease-in-out infinite both;
    right: 42%;
    /*top: -0px;*/
}

.bol3::after {
    position: absolute;z-index: 2;
  content: '';
  display: block;
  min-height: 200px;
  min-width: 200px;
  width: 30vh;
  height: 30vh;  
  background-color: var(--blob2);  
  box-shadow: var(--shades2);
  background-size: 1600% 1600%;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  perspective: 100px;
  animation: 
    transform 5s ease-in-out infinite both alternate,
    movement 5s ease-in-out infinite both;
    right: 700px;
}

@keyframes transform {
    0%,
  100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
   14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
   28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
   42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
   56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
   70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
   84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}
@keyframes transform {
    0%,
  100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
   14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
   28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
   42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
   56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
   70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
   84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}


@keyframes movement {
    0%,
  100% { transform: none; }
   50% { transform: translateY(20%) rotateY(10deg); }
}

:root {
  --background: #FEE598;
  --blob: #FEE598;
  --shades: inset 10px 0 40px #FEE598,
            inset -10px 0 20px #FEE598,
            inset -40px 10px 100px #FEE598;
  
  @media (prefers-color-scheme: dark) {
    --background: #FEE598;
    --blob: #FEE598;
    --shades: inset 10px 0 40px #FEE598,
              inset -10px 0 20px #FEE598,
              inset -40px 10px 110px #FEE598;
  }
}
:root {
  --background: #F7A250;
  --blob2: #F7A250;
  --shades2: inset 10px 0 40px #F7A250,
            inset -10px 0 20px #F7A250,
            inset -40px 10px 100px #F7A250;
  
  @media (prefers-color-scheme: dark) {
    --background:#F7A250;
    --blob2: #F7A250;
    --shades2: inset 10px 0 40px #F7A250,
              inset -10px 0 20px #F7A250,
              inset -40px 10px 110px #F7A250;
  }
}
:root {
  --background: #C3D1AD;
  --blob3: #C3D1AD;
  --shades3: inset 10px 0 20px #C3D1AD,
            inset -10px 0 10px #C3D1AD,
            inset -10px 10px 100px #C3D1AD;
  
  @media (prefers-color-scheme: dark) {
    --background:#C3D1AD;
    --blob3: #C3D1AD;
    --shades3: inset 10px 0 20px #C3D1AD,
              inset -10px 0 10px #C3D1AD,
              inset -10px 10px 110px #C3D1AD;
  }
}



@media (min-width: 1200px) and (max-width: 1440px) {
  .bol::before {
    position: absolute;
    z-index: 1;
    content: '';
    display: block;
    min-height: 200px;
    min-width: 200px;
    width: 40vh;
    height: 60vh;
    : 98vh;
    background-color: var(--blob3);
    box-shadow: var(--shades3);
    background-size: 1600% 1600%;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    perspective: 100px;
    animation: transform 10s ease-in-out infinite both alternate, movement 10s ease-in-out infinite both;
    right: 44%;
}
.bol::after {
    position: absolute;
    z-index: 2;
    content: '';
    display: block;
    min-height: 200px;
    min-width: 200px;
    width: 50vh;
    height: 50vh;
    background-color: var(--blob);
    box-shadow: var(--shades);
    background-size: 1600% 1600%;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    perspective: 100px;
    animation: transform 5s ease-in-out infinite both alternate, movement 5s ease-in-out infinite both;
    right: 28%;
    /* top: -0px; */
}


.bol3::after {
    position: absolute;
    z-index: 2;
    content: '';
    display: block;
    min-height: 200px;
    min-width: 200px;
    width: 60vh;
    height: 37vh;
    background-color: var(--blob2);
    box-shadow: var(--shades2);
    background-size: 1600% 1600%;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    perspective: 100px;
    animation: transform 5s ease-in-out infinite both alternate, movement 5s ease-in-out infinite both;
    right: 41%;
    /* margin-bottom: 74px; */
    padding: 50px;
}
}
/*#EFE37*/

/*@use postcss-preset-env {
  stage: 0;
  autoprefixer: {
    grid: true;
  }
  browsers: [
    "last 1 Chrome versions",
    "last 1 Firefox versions",
    "last 1 Safari versions",
    "last 1 Edge versions"
  ]
}

*/