@import url("normalize.css");
@import url("utils.css");
@import url("post.css");


:root {
  --font-size-base: clamp(1rem, 2vw, 1.125rem);
  --header-min-height: 80vh;
  --content-max-width: 1200px;
  --post-content-max-width: 700px;
  --transiton-duration: .2s;

  /*--scrollbar-width: 4px;*/
  /*--scrollbar-background: transparent;*/
  /*--scrollbar-thumb-background: rgba(0, 0, 0, 0.5);*/

  --bg-light: radial-gradient(circle at top left, hsl(166 76% 49% / 0.2), transparent 30%),
  radial-gradient(circle at bottom right, hsla(8, 54%, 51%, 0.31), transparent 30%),
  linear-gradient(160deg, hsla(210, 40%, 98%, 1), hsla(214, 32%, 91%, 1));
  --bg-dark: radial-gradient(circle at top left, hsla(187, 78%, 48%, 0.18), transparent 32%),
  radial-gradient(circle at bottom right, hsla(351, 95%, 71%, 0.16), transparent 30%),
  linear-gradient(160deg, hsla(0, 0%, 8%, 1), hsla(215, 28%, 17%, 1));
  --bg-html-light: #d5f6f0;
  --bg-html-dark: #16282b;
}


/* --- System Light & App Light Mode --- */
:root,
:root:has(body.light) {
  --bg: var(--bg-light);
  --bg-html: var(--bg-html-light);
  --color: #302f2a;
  --color-secondary: #acabaa;
  --background: #ffffff;
  --background-secondary: rgba(55, 53, 47, 0.08);
  --background-focused: #ccecf7;
  --color-success: #5cb85c;
  --color-inverse: #edeeee;
  --toolbar-color: #0c0c0c;
  --toolbar-background: rgba(0, 0, 0, 0.2);
  --menu-color: rgb(55, 53, 47);
  --menu-color-secondary: rgb(55, 53, 47);
  --menu-divider-color: #ececec;
  --menu-background: #ffffff;
  --menu-background-secondary: #d8d7d3;
  --menu-background-focused: #efefef;
  --menu-box-shadow: rgba(15, 15, 15, .05) 0 0 0 1px, rgba(15, 15, 15, .1) 0 3px 6px, rgba(15, 15, 15, .2) 0 9px 24px;
}

/* --- System Dark Mode --- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--bg-dark);
    --bg-html: var(--bg-html-dark);
    --color: #bab8b3;
    --color-secondary: #878a8b;
    --background: #141414;
    --background-secondary: rgba(255, 255, 255, 0.1);
    --background-focused: #204450;
    --color-success: #1f7f24;
    --color-inverse: #212121;
    --toolbar-color: rgba(167, 165, 161, 1);
    --toolbar-background: rgba(0, 0, 0, 0.8);
    --menu-color: rgba(255, 255, 255, 0.9);
    --menu-divider-color: #454a4c;
    --menu-background: #373c3e;
    --menu-background-secondary: #4b5052;
    --menu-background-focused: #4b5052;
    --menu-box-shadow: rgba(15, 15, 15, .1) 0 0 0 1px, rgba(15, 15, 15, .2) 0 3px 6px, rgba(15, 15, 15, .4) 0 9px 24px;
  }
}
/* --- App Dark Mode --- */
:root:has(body.dark) {
  --bg: var(--bg-dark);
  --bg-html: var(--bg-html-dark);
  --color: #bab8b3;
  --color-secondary: #878a8b;
  --background: #141414;
  --background-secondary: rgba(255, 255, 255, 0.1);
  --background-focused: #204450;
  --color-success: #1f7f24;
  --color-inverse: #212121;
  --toolbar-color: rgba(167, 165, 161, 1);
  --toolbar-background: rgba(0, 0, 0, 0.8);
  --menu-color: rgba(255, 255, 255, 0.9);
  --menu-divider-color: #454a4c;
  --menu-background: #373c3e;
  --menu-background-secondary: #4b5052;
  --menu-background-focused: #4b5052;
  --menu-box-shadow: rgba(15, 15, 15, .1) 0 0 0 1px, rgba(15, 15, 15, .2) 0 3px 6px, rgba(15, 15, 15, .4) 0 9px 24px;
}


/* --- Remaining Standard Styles --- */
html, div, span, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, del, em, img, small, strong, ol, ul, li, label, table {
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}


html {
  height: fit-content;
  min-height: 100%;
  background: var(--bg, var(--bg-html));
}
html.is-ios {
  background: var(--bg-html) /* fallback for iOS, since it doesn't support gradient background on html element*/
}
@media (hover: hover) and (pointer: fine) {
  html {
    overscroll-behavior: none;
  }
}

body {
  position: relative;
  font: normal 16px/1.9em Inter, -apple-system, Helvetica Neue, sans-serif;
  margin: 0;
  padding: 0;
  color: var(--color, #000);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em 0;
  font-weight: 400;
  line-height: 1.2;
}

h1 {
  font-size: 2em;
}

a {
  color: inherit;
}


@media (prefers-reduced-motion: reduce) {
  :root {
    --transiton-duration: 0;
    --animation-duration: 0;
  }

  html {
    scroll-behavior: auto;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}


main {
  max-width: 1200px;
  margin: auto;
}

.listing-container {
  overflow: hidden;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 0.5rem;
}

.listing-container > * {
  width: 100%;
  flex: 1 100%;
}

@media (min-width: 1200px) {
  .listing-container {
    padding: 0
  }

  .listing-container > * {
    flex: 1 50%;
  }

  .listing-container > *:nth-child(1) {
    flex: 1 100%;
  }

  .listing-container > *:nth-child(3n+1) {
    flex: 1 100%
  }
}