@layer global {
    @font-face {
        font-family: "cp-semibold";
        src: url("assets/fonts/chakra-petch/chakra-petch-semibold.ttf");
    }

    @font-face {
        font-family: "cp-bold";
        src: url("assets/fonts/chakra-petch/chakra-petch-bold.ttf");
    }

    @font-face {
        font-family: "jb-mono";
        src: url("assets/fonts/jetbrains-mono/jetbrains-mono-variable.ttf");
    }

    /* wellfleet-regular - latin */
    /*https://gwfh.mranftl.com/fonts/wellfleet?subsets=latin*/
    @font-face {
      font-family: 'Wellfleet';
      font-style: normal;
      font-weight: 400;
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      src: url('assets/fonts/wellfleet-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-regular - latin */
    /*https://gwfh.mranftl.com/fonts/roboto?subsets=latin*/
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      src: url('assets/fonts/roboto-v51-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* exo-regular - latin */
    /*https://gwfh.mranftl.com/fonts/exo?subsets=latin*/
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Exo';
      font-style: normal;
      font-weight: 400;
      src: url('assets/fonts/exo-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    * {
        /*padding: 0;  Can conflict with tailwind.js*/
        /*margin: 0;  Can conflict with tailwind.js*/
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        scrollbar-gutter: stable;
    }

    :root {
        list-style: none;
        font-family: jb-mono,  sans-serif;
    }

    @view-transition {
        /*This should help smooth page transitions in a multipage app
        preventing shifting elements*/
        navigation: auto;
    }


    /* From https://css.glass */
    .glossy {
        background: rgba(255, 255, 255, 0.21);
        /*background: hsla(240 40% 20%/0.4);*/
        border-radius: 16px;
        /*box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
        backdrop-filter: blur(13.2px);
        -webkit-backdrop-filter: blur(13.2px);
        border: 1px solid rgba(255, 255, 255, 0.32);
    }

    .pageFade {
        animation: pageFadeIn 0.1s ease forwards;
    }

    @keyframes pageFadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .cardTransition-enter-active,
    .cardTransition-appear-active {
        transition:
            opacity 0.85s ease,
            transform 0.25s ease;
    }

    .cardTransition-enter-from,
    .cardTransition-appear-from {
        opacity: 0;
        transform: scale(0.85);
    }

    .cardTransition-enter-to,
    .cardTransition-appear-to {
        opacity: 1;
        transform: scale(1);
    }

    /* Custom leave animation */
    .cardTransition-leave-active {
        animation: cardPulseOut 0.45s forwards;
    }

    @keyframes cardPulseOut {
        0% {
            opacity: 1;
            transform: scale(1);
        }

        /* tiny enlargement */
        20% {
            opacity: 1;
            transform: scale(1.02);
        }

        /* slight shrink */
        45% {
            opacity: 0.6;
            transform: scale(0.90);
        }

        /* fade away */
        100% {
            opacity: 0;
            transform: scale(0.94);
        }
    }

    .folder-item:hover .folder-icon {
        animation: wiggleZ 1.5s ease-in-out;
}

    /*@keyframes wiggleY {*/
    /*    0% {*/
    /*        transform: rotateY(0deg);*/
    /*    }*/

    /*    25% {*/
    /*        transform: rotateY(20deg);*/
    /*    }*/

    /*    50% {*/
    /*        transform: rotateY(0deg);*/
    /*    }*/

    /*    75% {*/
    /*        transform: rotateY(-20deg);*/
    /*    }*/

    /*    100% {*/
    /*        transform: rotateY(0deg);*/
    /*    }*/
    /*}*/
    @keyframes wiggleZ {
    0%   { transform: rotateZ(0deg); }
    20%  { transform: rotateZ(20deg); }
    40%  { transform: rotateZ(-12deg); }
    60%  { transform: rotateZ(8deg); }
    80%  { transform: rotateZ(-5deg); }
    100% { transform: rotateZ(0deg); }
}

}