/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */

@font-face {
  font-family: 'Lato';
  src: url('../../static/fonts/Lato-Thin.ttf');
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: 'Lato';
  src: url('../../static/fonts/Lato-Light.ttf');
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'Lato';
  src: url('../../static/fonts/Lato-Regular.ttf');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Lato';
  src: url('../../static/fonts/Lato-Bold.ttf');
  font-style: normal;
  font-style: 700;
}

@font-face {
  font-family: 'Lato';
  src: url('../../static/fonts/Lato-Black.ttf');
  font-style: normal;
  font-weight: 900;
}

@font-face {
  font-family: 'Source Sans';
  src: url('../../static/fonts/SourceSans3-VariableFont_wght.ttf')
    format('truetype');
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: 'Source Sans';
  src: url('../../static/fonts/SourceSans3-Italic-VariableFont_wght.ttf')
    format('truetype');
  font-style: italic;
  font-weight: 100 900;
}

:root {
  --ifm-color-primary: #006183;
  --ifm-color-primary-dark: #00455f;
  --ifm-color-primary-darker: #232e50;
  --ifm-color-primary-darkest: #232e50;
  --ifm-color-primary-light: #0081ac;
  --ifm-color-primary-lighter: #00a2d5;
  --ifm-color-primary-lightest: #00c5fd;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: #232e500a;
  --ifm-font-family-base: 'Lato', 'Avenir', 'Avenir Next LT Pro', 'Montserrat',
    'Corbel', 'URW Gothic', 'source-sans-pro', 'sans-serif';
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #006183;
  --ifm-color-primary-dark: #00a2d5;
  --ifm-color-primary-darker: #0081ac;
  --ifm-color-primary-darkest: #006183;
  --ifm-color-primary-light: #50dcff;
  --ifm-color-primary-lighter: #79e6ff;
  --ifm-color-primary-lightest: #8deaff;
  --docusaurus-highlighted-code-line-bg: #232e501e;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation: 0.5s ease-out 0.2s 1 fadeIn forwards;
}

.fadeInDelay1 {
  animation: 1s ease-out 1.2s 1 fadeIn forwards;
}

.backgroundSlide {
  background: linear-gradient(
      to right,
      rgba(100, 200, 200, 0),
      rgba(100, 200, 200, 0)
    ),
    linear-gradient(
      to right,
      rgb(9, 56, 78, 0.4),
      rgb(9, 146, 200, 0.6),
      #76c9ef
    );
  background-size: 100% 0.1em, 0 0.1em;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
  animation: slideUnderscore 1s 1s forwards;
}

.backgroundSlide1 {
  background: linear-gradient(
      to right,
      rgba(100, 200, 200, 0),
      rgba(100, 200, 200, 0)
    ),
    linear-gradient(
      to right,
      rgb(9, 56, 78, 0.4),
      rgb(9, 146, 200, 0.6),
      #76c9ef
    );
  background-size: 100% 0.1em, 0 0.1em;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
  animation: slideUnderscore 1s 2s forwards;
}

.backgroundSlide2 {
  background: linear-gradient(
      to right,
      rgba(100, 200, 200, 0),
      rgba(100, 200, 200, 0)
    ),
    linear-gradient(
      to right,
      rgb(9, 56, 78, 0.4),
      rgb(9, 146, 200, 0.6),
      #76c9ef
    );
  background-size: 100% 0.1em, 0 0.1em;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
  animation: slideUnderscore 1s 3s forwards;
}

@keyframes slideUnderscore {
  100% {
    background-size: 0 0.1em, 100% 0.1em;
  }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(2rem);
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.slideUp {
  animation: slideUp 0.5s ease-out 0s 1 forwards;
}

.slideUpDelay1 {
  animation: slideUp 0.5s ease-out 0.3s 1 forwards;
}

.slideUpDelay2 {
  animation: slideUp 0.5s ease-out 0.5s 1 forwards;
}

.slideUpDelay3 {
  animation: slideUp 0.5s ease-out 0.7s 1 forwards;
}

/* target articles, give prop prose */
/* article {
  @apply prose-sm sm:prose;
} */

/* target id of "post-content" */
#post-content {
  @apply prose-sm sm:prose;
}

/* video margin 0 */
video {
  margin: 0;
  margin-bottom: 0;
  margin-top: 0;
}
