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

@media screen and (min-width: 1040px) {
  .hover\:neumorphic-shadow-logo:hover
    {
      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);
    }
}

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

.shimmer {
    animation: placeHolderShimmer 1s infinite;
    animation-timing-function: linear;
    background-color: rgba( 0, 0, 0, 0.1 );
    background-image: linear-gradient( 90deg, 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-position: 0 0, 100% 0;
    background-attachment: fixed;
}

/* Original - https://codepen.io/ThatGuySam/pen/zYPPYwg */
/* Animation delay so our shimmer looks staggered */

.shimmer *:nth-child(3n-2),
*:nth-child(3n-2) > .shimmer {
  animation-delay: 0.2s;
}

.shimmer *:nth-child(3n-1),
*:nth-child(3n-1) > .shimmer {
  animation-delay: 0.1s;
}



.shimmer {
  /*  Hide all text  */
  color: transparent;
}

.shimmer p,
.shimmer img,
.shimmer span,
.shimmer time,
.shimmer h1, .shimmer h2, .shimmer h3, .shimmer h4, .shimmer h5, .shimmer h6 {
  animation: placeHolderShimmer 1s infinite;
  animation-timing-function: linear;

  /*  Shimmer gets inserted as an animated background so it can shape to most elements  */

	/* Base shimmer color */
  background-color: rgba( 0, 0, 0, 0.1 );
	/* First and last color should be the same so that animation restart is seamless */
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.07) 8%,
    rgba(0, 0, 0, 0.13) 18%,
    rgba(0, 0, 0, 0.07) 33%
  );
  background-size: 200% 100px;
  background-attachment: fixed;

  border: none;

  /*  Hide all text  */
  color: transparent;

  /*  Hide img src  */
  object-position: -99999px 99999px;
}

/* Inline Shimmers so we get separated shimmer lines on text */
.shimmer p,
.shimmer span,
.shimmer time {
  display: inline;
}

@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;
}