/**
 * 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;

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

/**
 * 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";
 */

 .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-inner,
.hover\:neumorphic-shadow-inner:hover {
   /* box-shadow: -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07); */
   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);
        /* inset 8rem 8rem 8rem rgba(0, 0, 0, 0.05),
        inset -8rem -8rem 8rem rgba(255, 255, 255, 0.05); */
}