/* dark mode animation */
@import"https://unpkg.com/open-props/easings.min.css";

.sun-and-moon>:is(.moon, .sun, .sun-beams) {
    transform-origin: center center
}

.sun-and-moon>:is(.moon, .sun) {
    fill: var(--icon-fill)
}

.theme-toggle:is(:hover, :focus-visible)>.sun-and-moon>:is(.moon, .sun) {
    fill: var(--icon-fill-hover)
}

.sun-and-moon>.sun-beams {
    stroke: var(--icon-fill);
    stroke-width: 2px
}

.theme-toggle:is(:hover, :focus-visible) .sun-and-moon>.sun-beams {
    stroke: var(--icon-fill-hover)
}

[data-theme=dark] .sun-and-moon>.sun {
    transform: scale(1.75)
}

[data-theme=dark] .sun-and-moon>.sun-beams {
    opacity: 0
}

[data-theme=dark] .sun-and-moon>.moon>circle {
    transform: translate(-7px)
}

@supports (cx: 1) {
    [data-theme=dark] .sun-and-moon>.moon>circle {
        transform: translate(0);
        cx: 17
    }
}

@media (prefers-reduced-motion: no-preference) {
    .sun-and-moon>.sun {
        transition: transform .5s var(--ease-elastic-3)
    }

    .sun-and-moon>.sun-beams {
        transition: transform .5s var(--ease-elastic-4), opacity .5s var(--ease-3)
    }

    .sun-and-moon .moon>circle {
        transition: transform .25s var(--ease-out-5)
    }

    @supports (cx: 1) {
        .sun-and-moon .moon>circle {
            transition: cx .25s var(--ease-out-5)
        }
    }

    [data-theme=dark] .sun-and-moon>.sun {
        transform: scale(1.75);
        transition-timing-function: var(--ease-3);
        transition-duration: .25s
    }

    [data-theme=dark] .sun-and-moon>.sun-beams {
        transform: rotate(-25deg);
        transition-duration: .15s
    }

    [data-theme=dark] .sun-and-moon>.moon>circle {
        transition-delay: .25s;
        transition-duration: .5s
    }
}

.theme-toggle {
    --size: 2rem;
    --icon-fill: hsl(210 10% 30%);
    --icon-fill-hover: hsl(210 10% 15%);
    background: none;
    border: none;
    padding: 0;
    inline-size: var(--size);
    block-size: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    outline-offset: 5px
}

.theme-toggle>svg {
    inline-size: 65%;
    block-size: 100%;
    stroke-linecap: round;

}

[data-theme=dark] .theme-toggle {
    --icon-fill: hsl(210 10% 70%);
    --icon-fill-hover: hsl(210 15% 90%)
}

@media (hover: none) {
    .theme-toggle {
        --size: 48px
    }
}

/* text unselectable */
.unselectable {
    user-select: none;

  }




/* .sparkle animation */
.sparkle {
    animation: sparkle 1s infinite;
    animation-fill-mode: forwards;
    /* animation-iteration-count: 1.3; */
  }

  @keyframes sparkle {
    0% {
      opacity: 0.5;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0.5;
    }
  }

/* input checkbox background */

input[type="radio"]:checked+span {
    background-color: white;
  }

  

  [data-theme=dark] input[type="radio"]:checked+span {
      background-color: #1a202c;
    }
  


  /* font faces */
  
  @font-face {
    font-family: 'A10 Malayalam';
    src: url('/assets/fonts/A10Malayalam-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }

  .malayalam-text {
    font-family: 'A10 Malayalam', sans-serif;
  }

  .malayalam-text2 {
    font-family: 'Noto Sans Malayalam', sans-serif;
  }