lyrs/src/style.css

@tailwind base;

@layer base {

  main a[href] {
    @apply text-mauve underline;
  }

  input {
    @apply opacity-80 hover:opacity-100 p-2 border-2 bg-bg border-surface2 rounded;
  }

  button,
  input[type=submit] {
    @apply opacity-80 hover:opacity-100 p-2 border-0 rounded cursor-pointer text-bg;
  }

  .hero {
    @apply flex flex-col p-2 justify-center items-center relative;
  }

  .card {
    @apply flex flex-col drop-shadow-xl border-2 border-surface2 rounded p-2 gap-2;
  }
}

@tailwind components;
@tailwind utilities;

@font-face {
  font-family: iosevkalyte;
  font-style: normal;
  font-weight: 400;
  src: local("Iosevka"), url("/static/font/iosevkalyteweb-regular.subset.woff2");
  font-display: swap;
}

@font-face {
  font-family: iosevkalyte;
  font-style: italic;
  font-weight: 400;
  src: local("Iosevka"), url("/static/font/iosevkalyteweb-italic.subset.woff2");
  font-display: swap;
}

@font-face {
  font-family: iosevkalyte;
  font-style: normal;
  font-weight: 400;
  src: local("Iosevka"), url("/static/font/iosevkalyteweb-bold.subset.woff2");
  font-display: swap;
}

@font-face {
  font-family: iosevkalyte;
  font-style: italic;
  font-weight: 700;
  src: local("Iosevka"), url("/static/font/iosevkalyteweb-bolditalic.subset.woff2");
  font-display: swap;
}

:root {
  /* Catppuccin Mocha */
  --Rosewater: #f5e0dc;
  --Flamingo: #f2cdcd;
  --Pink: #f5c2e7;
  --Mauve: #cba6f7;
  --Red: #f38ba8;
  --Maroon: #eba0ac;
  --Peach: #fab387;
  --Yellow: #f9e2af;
  --Green: #a6e3a1;
  --Teal: #94e2d5;
  --Sky: #89dceb;
  --Sapphire: #74c7ec;
  --Blue: #89b4fa;
  --Lavender: #b4befe;
  --Text: #cdd6f4;
  --Subtext1: #bac2de;
  --Subtext0: #a6adc8;
  --Overlay2: #9399b2;
  --Overlay1: #7f849c;
  --Overlay0: #6c7086;
  --Surface2: #585b70;
  --Surface1: #45475a;
  --Surface0: #313244;
  --Base: #1e1e2e;
  --Mantle: #181825;
  --Crust: #11111b;
}

@media (prefers-color-scheme: light) {
  :root {
    /* Catppuccin Latte */
    --Rosewater: #dc8a78;
    --Flamingo: #dd7878;
    --Pink: #ea76cb;
    --Mauve: #8839ef;
    --Red: #d20f39;
    --Maroon: #e64553;
    --Peach: #fe640b;
    --Yellow: #df8e1d;
    --Green: #40a02b;
    --Teal: #179299;
    --Sky: #04a5e5;
    --Sapphire: #209fb5;
    --Blue: #1e66f5;
    --Lavender: #7287fd;
    --Text: #4c4f69;
    --Subtext1: #5c5f77;
    --Subtext0: #6c6f85;
    --Overlay2: #7c7f93;
    --Overlay1: #8c8fa1;
    --Overlay0: #9ca0b0;
    --Surface2: #acb0be;
    --Surface1: #bcc0cc;
    --Surface0: #ccd0da;
    --Base: #eff1f5;
    --Mantle: #e6e9ef;
    --Crust: #dce0e8;
  }
}

:autofill,
:-webkit-autofill {
  filter: none !important;
  background-color: #f00 !important;
}