@import "tailwindcss";
@source "./src/homepage.gleam";
@source "./src/**/*.gleam";
/* @import "./src/homepage/from_prebuild/oat.css"; */
@plugin "daisyui";

@plugin "daisyui/theme" {
  name: "strawmelonjuicedotcom";
  default: true;
  prefersdark: true;
  color-scheme: "dark";
  --color-base-100: oklch(96% 0.059 95.617);
  --color-base-200: oklch(93% 0.032 17.717);
  --color-base-300: oklch(92% 0.12 95.746);
  --color-base-content: oklch(25% 0.09 281.288);
  --color-primary: #FDEBEF;
  --color-primary-content: oklch(44% 0.043 257.281);
  --color-secondary: #ceddd9;
  --color-secondary-content: oklch(29% 0.066 243.157);
  --color-accent: #DEC4DE;
  --color-accent-content: #1f3e33;
  --color-neutral: #adebb3;
  --color-neutral-content: oklch(28% 0.141 291.089);
  --color-info: oklch(96% 0.059 95.617);
  --color-info-content: oklch(42% 0.095 57.708);
  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(70% 0.213 47.604);
  --color-warning-content: oklch(0% 0 0);
  --color-error: oklch(63% 0.237 25.331);
  --color-error-content: oklch(0% 0 0);
  --radius-selector: 0.5rem;
  --radius-field: 2rem;
  --radius-box: 0.25rem;
  --size-selector: 0.25rem;
  --size-field: 0.1875rem;
  --border: 2px;
  --depth: 1;
  --noise: 1;
  --font-sans: "Lilex", monospace, system-ui, sans-serif;
}

/* Oat theme */
@layer theme {
  :root {
    color-scheme: light dark;

    --background: oklch(96% 0.059 95.617);
    --foreground: oklch(25% 0.09 281.288);

    --card: oklch(93% 0.032 17.717);
    --card-foreground: var(--foreground);

    --primary: #FDEBEF;
    --primary-foreground: oklch(44% 0.043 257.281);

    --secondary: #ceddd9;
    --secondary-foreground: oklch(29% 0.066 243.157);

    --accent: #DEC4DE;
    --accent-foreground: #1f3e33;

    --muted: oklch(92% 0.12 95.746);
    --muted-foreground: oklch(28% 0.141 291.089);

    --faint: oklch(96% 0.059 95.617 / 0.5);
    --faint-foreground: var(--muted-foreground);

    --danger: oklch(63% 0.237 25.331);
    --danger-foreground: oklch(0% 0 0);

    --success: oklch(76% 0.177 163.223);
    --success-foreground: oklch(37% 0.077 168.94);

    --warning: oklch(70% 0.213 47.604);
    --warning-foreground: oklch(0% 0 0);

    --border: #adebb3;
    --input: #adebb3;
    --ring: #FDEBEF;

    --radius-small: 0.125rem;
    --radius-medium: 0.25rem;
    --radius-large: 0.5rem;
    --radius-full: 2rem;


    --font-sans: "Lilex", monospace, system-ui, sans-serif;
    --font-mono: "Lilex", monospace, ui-monospace, SFMono-Regular;
    --font-post: "OpenDyslectic 3", "Lilex", sans-serif;


    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --text-regular: 1rem;
    --leading-normal: 1.5;
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@font-face {
  font-family: "OpenDyslectic 3";
  src: url(/fonts/OpenDyslexic3-Regular.ttf);
}


@layer base {
  html {
    font-family: "Lilex", monospace, system-ui, sans-serif;
    font-optical-sizing: auto;
    font-size: var(--font-size);
    font-weight: 400;
    font-style: normal;
    margin: 0;
  }

  #cv-a4 {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--font-size);
    line-height: var(--line-height);
    --margin: 18px;
    --font-size: 13px;
    --line-height: 1.4;
    --color-foreground: #000000;
    --color-primary: #3b5417;
    --color-background: #ffffff;
  }

  .postfield {
    --font-size: 15px;
    --line-height: 1.0;

    p {
      font-family:
        "OpenDyslectic 3",
        "Lilex",
        sans-serif;
      font-weight: 100;
      font-size: var(--font-size);

    }
  }

  /* .subpage {} */

  /* Make sure the 'go comment' button is visible even on small screens. */
  .widget .form-controls {
    flex-wrap: wrap;
  }

  /* As to not collide with chilp's footers, we had to be a bit more specific */
  #app .footer {
    position: fixed;
    bottom: 0;
    -webkit-animation: seconds 1s forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 5s;
    animation: seconds 1s forwards;
    animation-iteration-count: 1;
    animation-delay: 5s;
  }

  @-webkit-keyframes seconds {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      left: -9999px;
    }
  }

  @keyframes seconds {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      left: -9999px;
    }
  }

  .link-list-container {
    margin: auto;
  }

  .link-list-container .link-list-button {
    display: block;
    background: #ff6f91;
    color: white;
    text-decoration: none;
    padding: 1em;
    margin: 1em 0;
    border-radius: 8px;
    font-weight: bold;
    transition: background 0.3s ease;
  }

  .link-list-container .link-list-button:hover {
    background: #ff4f78;
  }

  .link-list-container .note {
    font-size: 0.9em;
    margin-top: 1em;
  }

  .link-list-container .submenu {
    border-radius: 10px;
    padding: 1em;
    margin-top: 2em;
  }

  .link-list-container .submenu .submenu-h3 {
    margin-top: 0;
    font-size: 1.2em;
  }

  .link-list-container .submenu p {
    font-size: 0.95em;
    margin-bottom: 1em;
  }
}