globals.css

@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

:root {
  --rp-c-brand: #c95775;
  --rp-c-brand-dark: #5a3746;
  --rp-c-brand-darker: #3a303a;
  --rp-c-brand-light: #de7388;
  --rp-c-brand-lighter: #dea3a9;

  --rp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--rp-c-brand) 30%, #dc975e);
}

html {
  scroll-behavior: smooth;
}

.rspress-home-feature-detail {
  text-align: center;
}

*:not(div):not(button) {
  animation: ahq-style normal 0.2s;
  transition: all 0.1s;
}

@keyframes ahq-style {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0%);
    opacity: 100%
  }
}

::-webkit-scrollbar {
  display: none;
}

.page-load {
  @apply tw-absolute tw-h-[100vh] tw-w-screen tw-flex tw-flex-col tw-justify-center tw-text-center tw-text-2xl tw-items-center;
  top: 0;
  left: 0;
  right: 0;
  left: 0;
  z-index: 999999999999999999999999999999999999999999999999999999;
  transition: none !important;
  animation: none !important;
  background: var(--astro-code-color-background);
}

.page-load span {
  @apply tw-dui-loading tw-dui-loading-spinner tw-w-[5vw] tw-mb-5;
  transition: none !important;
  animation: none !important;
}

.link-group {
  @apply tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 lg:tw-flex-row tw-gap-5;
}

.link-group a {
  @apply tw-w-full tw-min-h-[5rem] tw-justify-center tw-p-3 tw-bg-[var(--rp-c-bg-mute)] tw-border-[1px] tw-border-[var(--rp-c-text-3)];
  @apply tw-rounded-md;
  transition: all;
}

.link-group a:hover {
  transition: all 125ms linear;
  transform: scale(1.05);
}

.link-group a:focus {
  transition: all 125ms linear;
  animation: normal 2s focus-btn;
}

@keyframes focus-btn {
  0% {
    transform: scale(0.85);
  }

  100% {
    transform: scale(0.85);
  }
}

.link-group a h1 {
  @apply tw-flex tw-text-xl tw-space-x-3;
}

.link-group a strong {
  @apply tw-block;
}

.link-group a span {
  @apply tw-block tw-ml-3;
}

.announcements {
  @apply tw-flex tw-flex-col tw-w-full tw-space-y-2;
}

.announcements a {
  @apply tw-w-full tw-min-h-[5rem] tw-justify-center tw-p-3 tw-bg-[var(--rp-c-bg-mute)] tw-border-[1px] tw-border-[var(--rp-c-text-3)];
  @apply tw-rounded-md tw-flex tw-flex-col tw-space-y-3;
  transition: all;
}

.announcements a div {
  @apply tw-flex tw-ml-auto;
}