/* @tailwind base; */

html {
  @apply antialiased m-0;
}

body {
  color: theme('colors.black');
  background-attachment: fixed;
  background-image: url('../assets/dodad-1.svg'), url('../assets/dodad-2.svg'),
    url('../assets/dodad-3.svg');
  background-position: left 25% bottom 20%, left 12% top 50px, right 5% top 45%;
  background-size: auto 140px, auto 100px, auto 140px;
  background-color: theme('colors.secondary');
  background-repeat: no-repeat;
  min-height: 100%;
}

.markdown ul {
  @apply pl-6;
}

.markdown li {
  @apply pb-4;
  list-style: disc;
}

.markdown h1 {
  @apply text-5xl mb-6 mt-8 font-brand text-center text-yellow;

  text-shadow: 3px 2px 0px #5c5a5a;
}

.text-shadow {
  text-shadow: 3px 2px 0px #5c5a5a;
}

.text-shadow-sm {
  text-shadow: 2px 1px 0px #5c5a5a;
}

.markdown {
  & h2,
  & h3,
  & h4 {
    @apply text-3xl mb-4 mt-6 font-brand text-center text-yellow;

    text-shadow: 3px 2px 0px #5c5a5a;
  }

  a {
    @apply text-puke font-bold;

    &:hover {
      text-decoration: underline;
    }
  }
}

pre:has(code) {
  box-shadow: 2px 2px 2px #5c5a5a;
}

@tailwind components;

@tailwind utilities;

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: theme(colors.primary);
  /* --ifm-color-primary-dark: #29784c;
  --ifm-color-primary-darker: #277148;
  --ifm-color-primary-darkest: #205d3b;
  --ifm-color-primary-light: #33925d;
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e; */
  --ifm-code-font-size: 95%;
  --ifm-menu-color: theme('colors.white');

  --ifm-navbar-background-color: theme('colors.secondary');

  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
