/* FLOATING BLURS */

.blur {
        position: fixed;
        border-radius: 50%;
        filter: blur(80px);
        z-index: -1;
        opacity: .35;
}

.blur1 {
        width: 240px;
        height: 240px;
        background: #8ce9ff;
        top: -60px;
        left: -100px;
}

.blur2 {
        width: 260px;
        height: 260px;
        background: #7cbfff;
        bottom: -100px;
        right: -120px;
}

/* FADE IN ANIMATION */
.fade-in {
        opacity: 0;
        transform: translateY(30px);
        transition:
                opacity .8s ease,
                transform .8s ease;
}

.fade-in.visible {
        opacity: 1;
        transform: translateY(0);
}

body{
  transition:
    background .35s ease,
    color .35s ease;
}

.language-changing{
  opacity:.96;
}

.bar-fill{
  width:0;
  animation:fillBar 1.8s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes fillBar{

  from{
    width:0;
  }

  to{
    width:92%;
  }

}

.floating-pill{
  animation:breathe 4s ease-in-out infinite;
}

@keyframes breathe{

  0%{
    transform:translateY(0);
    box-shadow:var(--shadow);
  }

  50%{
    transform:translateY(-2px);
    box-shadow:
      0 14px 34px rgba(15,23,40,.08),
      0 4px 12px rgba(15,23,40,.04);
  }

  100%{
    transform:translateY(0);
    box-shadow:var(--shadow);
  }

}