/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/base.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/base";
 */
/* @tailwind base; */
@import "tailwindcss/base";

/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */
/* @tailwind components; */
@import "tailwindcss/components";

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
/* @tailwind utilities; */
@import "tailwindcss/utilities";


html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 20px;
    word-spacing: 1px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;

    background: #191a1d;

    /* height of sticky header = 80px */
    scroll-padding-top: 100px;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
}

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

 /* .container {
    max-width: 1040px;
 } */

.ease {
    transition-property: all;
    transition-duration: 400ms;
    /* easeInOutQuart */
    /* https://easings.net/en#easeInOutQuart */
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
    @apply ease;
    transition-property: opacity;

	opacity: 1;
}

 .neumorphic-shadow,
 .hover\:neumorphic-shadow:hover {
    /* box-shadow: -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07); */
    box-shadow:
        -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07),
        0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.12),
        -.75rem -.75rem 1.75rem rgba(255, 255, 255, 0.07),
        0.75rem 0.75rem 1.75rem rgba(0, 0, 0, 0.12),
        inset 8rem 8rem 8rem rgba(0, 0, 0, 0.05),
        inset -8rem -8rem 8rem rgba(255, 255, 255, 0.05);
}


.neumorphic-shadow-outer,
.hover\:neumorphic-shadow-outer:hover {
   /* box-shadow: -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07); */
   box-shadow:
       -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07),
       0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.12),
       -.75rem -.75rem 1.75rem rgba(255, 255, 255, 0.07),
       0.75rem 0.75rem 1.75rem rgba(0, 0, 0, 0.12);
}

.neumorphic-shadow-inner,
.hover\:neumorphic-shadow-inner:hover {
   box-shadow:
        inset -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07),
        inset 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.12),
        inset -.75rem -.75rem 1.75rem rgba(255, 255, 255, 0.07),
        inset 0.75rem 0.75rem 1.75rem rgba(0, 0, 0, 0.12);
}

.bg-blur,
.hover\:bg-blur:hover {
    backdrop-filter: blur(15px);
}

.shimmer {
    animation: placeHolderShimmer 1s infinite;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.07) 8%, rgba(0, 0, 0, 0.45) 18%, rgba(0, 0, 0, 0.07) 33%);
    background-size: 200% 100px;
    background-attachment: fixed;
}

@keyframes placeHolderShimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}



button:focus .parent-focus\:visible,
button:active .parent-focus\:visible {
    display: block;
}

button:focus .parent-focus\:hidden,
button:active .parent-focus\:hidden {
    display: none;
}

.target\:visible:target {
    display: block;
}