@tailwind base;
@tailwind components;
@tailwind utilities;
/* autoprefixer: on */
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-weight: 400;
  word-wrap: break-word;
  font-kerning: normal;
  -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
  -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
  -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
  font-feature-settings: 'kern', 'liga', 'clig', 'calt';
  transition: all 0.1s;
  overflow-x: hidden;
}

:root {
  --background: white;
  --foreground: black;
  --primary: #1b2947;
  --blue: #0071e2;
  --blue-hover: #016dd9;
  --red: #ff5858;
  --green: #06ad0c;
  --darkred: #ff0707;
  --black: black;
  --gold: #e7d000;
  --lightgray: #e8e8e8;
  --offwhite: #f2f2f2;
  --grey: #9c9c9c;
  --blue-grey-1: #9fa3af;
  --blue-grey-2: #bbbec9be;
  --secondary-grey-dark: #292929;
  --secondary-grey-light: #dcdcdc;
  --maindark: #171717;
  --dark: #191825;
  --light: #eff5f5;
  --semidark: #181818;
  --starbg: radial-gradient(
    220% 105% at top center,
    #1b2947 10%,
    #75517d 40%,
    #e96f92 65%,
    #f7f7b6
  );
  --code_bg: #1b2947;
  --comment: #6272a4;
  --code_fore: #f8f8f2;
  --selection: #44475a;
  --cyan: #8be9fd;
  --green: #bd93f9;
  --orange: #ffb86c;
  --pink: #ff79c6;
  --purple: #bd93f9;
  --red: #ff5555;
  --yellow: #f1fa8c;
  --white: #fff;
  --bgV2: #1b294740;

  --animate-duration: 800ms;

  --tr: all 0.5s ease 0s;
  --ch1: #05478a;
  --ch2: #0070e0;
  --ch3: #0070e040;
  --cs1: #005e38;
  --cs2: #03a65a;
  --cs3: #03a65a40;
  --cw1: #c24914;
  --cw2: #fc8621;
  --cw3: #fc862140;
  --ce1: #851d41;
  --ce2: #db3056;
  --ce3: #db305640;
}
[data-theme='dark'] {
  --background: black;
  --foreground: white;
  --primary: #f2f2f2;
  --lightgray: #2c2c2c;
  --starbg: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  --code_bg: #1c1c1c;
  --bgV2: #ff79c650;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.prose {
  max-width: 75ch;
  font-size: 1rem;
  line-height: 1.75;
}
.writeText {
  font-family: 'Merriweather', 'Georgia', serif;
}
.article {
  font-family: 'Merriweather', 'Georgia', serif;
}

@layer utilities {
  .animated-underline {
    background-image: linear-gradient(#33333300, #33333300),
      linear-gradient(
        to right,
        var(--color-primary-400),
        var(--color-primary-500)
      );
    background-size: 100% 2px, 0 2px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
  }
  @media (prefers-reduced-motion: no-preference) {
    .animated-underline {
      transition: 0.3s ease;
      transition-property: background-size, color, background-color,
        border-color;
    }
  }
  .animated-underline:hover,
  .animated-underline:focus-visible {
    background-size: 0 2px, 100% 2px;
  }
}

[data-fade] {
  @apply translate-y-0 opacity-0 transition duration-[400ms] ease-out motion-reduce:translate-y-0 motion-reduce:opacity-100;
}
.fade-in-start [data-fade] {
  @apply translate-y-0 opacity-100;
}
.fade-in-start [data-fade='1'] {
  transition-delay: 100ms;
}
.fade-in-start [data-fade='2'] {
  transition-delay: 200ms;
}
.fade-in-start [data-fade='3'] {
  transition-delay: 300ms;
}
.fade-in-start [data-fade='4'] {
  transition-delay: 400ms;
}
.fade-in-start [data-fade='5'] {
  transition-delay: 500ms;
}
.fade-in-start [data-fade='6'] {
  transition-delay: 600ms;
}
.fade-in-start [data-fade='7'] {
  transition-delay: 700ms;
}
.fade-in-start [data-fade='8'] {
  transition-delay: 800ms;
}

.animate-shadow {
  @apply after:absolute after:inset-0 after:z-[-1] after:opacity-0 after:transition-opacity hover:after:opacity-100;
  @apply after:shadow-md dark:after:shadow-none;
}

.typing-demo {
  font-family: Poppins;
  font-size: 2.5rem;
}

.ReactModal__Overlay {
  opacity: 0;
  transition: opacity 0.2s;
}

.ReactModal__Overlay--after-open {
  opacity: 1;
  transition: opacity 0.2s;
}

.ReactModal__Overlay--before-close {
  opacity: 0;
  transition: opacity 0.2s;
}

.awa-notice {
  position: fixed;
  margin: 24px 40px;
  z-index: 999999;
  .awa-notice-wrap {
    min-width: 300px;
    margin-bottom: 12px;
    border-radius: 4px;
    background: var(--background);
    color: var(--foreground);
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
      0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
  }
  .awa-notice-wrap-removing {
    transform: translateY(-100%); /* 向上移动 */
  }
}
.awa-notice-leftTop {
  top: 0;
  left: 0;
}
.awa-notice-leftBottom {
  bottom: 0;
  left: 0;
}
.awa-notice-rightTop {
  top: 0;
  right: 0;
}
.awa-notice-rightBottom {
  bottom: 0;
  right: 0;
}

@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

.flipInX {
  backface-visibility: visible !important;
  animation-name: flipInX;
  animation-duration: var(--animate-duration);
  animation-fill-mode: both;
}

@keyframes flipOutX {
  from {
    transform: perspective(400px);
  }

  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  animation-duration: calc(var(--animate-duration) * 0.75);
  animation-fill-mode: both;
  animation-name: flipOutX;
  backface-visibility: visible !important;
}

.toast {
  background: linear-gradient(90deg, #1f2333, #22232b);
  color: #f5f5f5;
  text-align: center;
  border-radius: 0.25rem;
  position: relative;
  font-weight: 300;
  text-align: left;
  transition: var(--tr);
  opacity: 1;
  border: 0.15rem solid #fff2;
  box-shadow: inset 0 0 0.5rem 0 #1d1e26;
}
