koodiklinikka.fi/app/globals.css

@import 'tailwindcss';

@custom-variant dark (&:is(.dark *));

@theme {
  --breakpoint-*: initial;
  --breakpoint-xs: 440px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  --text-xxs: 0.625rem;
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@utility text-balance {
  text-wrap: balance;
}

@utility text-shadow {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.title-highlight {
  background: linear-gradient(200deg, #ff0098 20%, #0ef 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(255, 0, 234, 0.2));
}

@supports (color: color(display-p3 1 1 1)) {
  .title-highlight {
    background: linear-gradient(200deg, oklch(68% 0.5 340) 20%, oklch(90% 0.5 200) 100%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px oklch(80% 0.41 211 / 20%));
  }
}

.bg-button {
  background: linear-gradient(200deg, #f0f 20%, #ff00c4 100%);
}

@supports (color: color(display-p3 1 1 1)) {
  .bg-button {
    background: linear-gradient(200deg, oklch(100% 0.5 340) 20%, oklch(86% 0.5 360) 100%);
  }
}

html {
  background: #070b1e url('../public/background.webp');
  background-size: 1024px auto;
  background-position: top center;
  background-repeat: no-repeat;
  scroll-behavior: smooth;
}

@media (min-width: 1024px) {
  html {
    background-size: 100% auto;
  }
}

.top-fade {
  height: 10rem;
  background: #070b1e url('../public/background.webp');
  background-size: 1024px auto;
  background-position: top center;
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0));
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
}

@media (min-width: 1024px) {
  .top-fade {
    background-size: 100% auto;
  }
}

h1,
h2,
h3 {
  text-wrap: balance;
}

.checkbox svg {
  display: none;
}

input[type='checkbox']:checked + .checkbox {
  background-color: #ef008e;
  border-color: #ff0099;
}

input[type='checkbox']:checked + .checkbox svg {
  display: block;
  align-items: center;
  justify-items: center;
  width: 80%;
  height: auto;
}

input[type='checkbox']:focus + .checkbox {
  outline: 2px solid var(--tw-color-red-800);
  outline-offset: 2px;
}

@keyframes fadeInOut {
  0% {
    opacity: 20%;
  }
  50% {
    opacity: 100%;
  }
  100% {
    opacity: 20%;
  }
}

.fade-in-out {
  opacity: 20%;
  animation: fadeInOut 4s ease-in-out infinite;
}

button {
  cursor: pointer;
}