@import "https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Instrument+Serif:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Strichpunkt+Sans:wght@400..900&display=swap";

/* css/theme.css */
:root {
  --background-light: #ffffff;
  --background-light-translucent: rgb(255 255 255 / 0.3);
  --surface-light: #ffffff;
  --surface-light-alt: #d3d3d3;
  --surface-light-translucent: rgb(211 211 211 / 0.3);
  --text-primary-light: #232323;
  --text-secondary-light: #555555;
  --background-dark: #4c4c4c;
  --background-dark-translucent: rgb(39 39 39 / 0.3);
  --surface-dark: #8a8a8a;
  --surface-dark-alt: #424242;
  --surface-dark-translucent: rgb(66 66 66 / 0.3);
  --text-primary-dark: #eaeaea;
  --text-secondary-dark: #dfdfdf;
  --accent: #e87633;
}
:root {
  --background: var(--background-light);
  --background-translucent: var(--background-light-translucent);
  --surface: var(--surface-light);
  --surface-alt: var(--surface-light-alt);
  --surface-translucent: var(--surface-light-translucent);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --text-inverted: var(--background-light);
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--background-dark);
    --background-translucent: var(--background-dark-translucent);
    --surface: var(--surface-dark);
    --surface-alt: var(--surface-dark-alt);
    --surface-translucent: var(--surface-dark-translucent);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --text-inverted: var(--background-dark);
  }
}
:root {
  --max-content-width: 1080px;
  --max-article-width: 940px;
  --dim-small: 8px;
  --dim-medium: 16px;
  --dim-large: 24px;
  --dim-x-large: 48px;
  --dim-xx-large: 96px;
  --thumb-size: 48px;
  --dim-logo-max-height: 85px;
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-major: 36px;
}
:root {
  --font-family:
    "Manrope",
    "Inter",
    sans-serif;
  --font-fancy: "Instrument Serif", serif;
  --font-icon: "";
  --shadow-small: 0 0 12px rgba(0, 0, 0, 0.25);
}

/* css/generic.css */
a {
  text-decoration: none;
  color: var(--accent);
  font-weight: bold;
}
button {
  background: var(--accent);
  font-weight: bolder;
  color: var(--text-inverted);
  padding: var(--dim-medium) var(--dim-large);
  border-radius: var(--radius-major);
  border: none;
  a {
    color: var(--text-inverted);
  }
}
img {
  max-width: 100%;
}
hr {
  border: none;
  border-bottom: 1px solid var(--surface-alt);
  width: 100%;
  grid-column: 1 / -1;
}
.small-text {
  font-size: smaller;
  color: var(--text-secondary);
}
.xx-small-text {
  font-size: xx-small;
  color: var(--text-secondary);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-fancy), cursive;
  font-weight: bold;
}
.fancy-separator {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  place-items: center;
  gap: var(--dim-large);
  width: 100%;
}
.fancy-separator:before,
.fancy-separator:after {
  display: block;
  content: "";
  border-bottom: 1px solid var(--surface-alt);
  width: 100%;
}
input,
select,
textarea {
  border: none;
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: var(--radius-major);
  background: var(--surface);
  padding: var(--dim-small) var(--dim-medium);
  outline: none;
  transition: border, box-shadow .2s ease;
  box-sizing: content-box;
  font-family: var(--font-family), sans-serif;
}
input:focus,
button:focus,
select:focus,
textarea:focus {
  box-shadow: inset 0 0 0 3px var(--accent);
}
button {
  background: var(--accent);
  color: var(--text-inverted);
  padding: var(--dim-medium) var(--dim-large);
  border-radius: var(--radius-major);
  cursor: pointer;
}
button.primary {
  background: var(--accent);
  color: var(--text-inverted);
}
button.secondary {
  background: var(--surface);
  color: var(--surface-alt);
}
button.tertiary {
  background: transparent;
  color: var(--text-secondary);
}
button.symbolic {
  padding: var(--dim-small);
  gap: 0;
  text-align: center;
  place-items: center;
  place-content: center;
  aspect-ratio: 1 / 1;
  display: block;
}
button.symbolic::before,
button.symbolic::after {
  margin: 0;
}
form {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  place-items: center;
  justify-items: stretch;
  width: 100%;
  grid-template-columns: auto 1fr;
  grid-auto-rows: auto;
  grid-gap: var(--dim-medium);
}
label[for] {
  font-weight: bold;
  grid-column: 1;
}
form > div {
  grid-column: 1 / -1;
}
form > div.centre {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--dim-large);
}
[data-before]:before {
  content: attr(data-before);
  margin-inline-end: var(--dim-small);
}
[data-after]:after {
  content: attr(data-after);
  margin-inline-start: var(--dim-small);
}
[data-icon]:before {
  content: attr(data-icon);
  margin-inline-end: var(--dim-small);
  font-family: var(--font-icon);
}
[data-icon-after]:after {
  content: attr(data-icon-after);
  margin-inline-start: var(--dim-small);
  font-family: var(--font-icon);
}

/* css/main.css */
:root,
body {
  margin: 0;
  padding: 0;
}
#root {
  display: grid;
  place-items: center;
  min-height: 100vh;
  grid-template-columns: 1fr fit-content(var(--max-content-width)) 1fr;
  grid-auto-rows: auto;
}
body {
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-family), sans-serif;
}
#header {
  display: grid;
  grid-row: 1;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-areas: "logo nav action";
  place-items: center;
  padding: var(--dim-large);
  margin-block: var(--dim-large);
  position: sticky;
  top: 0;
  z-index: 100;
  #logo img,
  #logo svg {
    grid-area: logo;
    max-height: var(--dim-logo-max-height);
    width: 100%;
  }
  * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #centre-nav {
    display: flex;
    grid-area: nav;
    justify-content: center;
    align-items: center;
    position: fixed;
  }
  #centre-nav > nav {
    display: flex;
    justify-content: center;
    background: var(--surface);
    border-radius: var(--radius-major);
    border: 1px solid var(--surface-alt);
    padding: var(--dim-small) var(--dim-large);
    a,
    > nav > span {
      color: var(--text-secondary);
      padding: var(--dim-small) var(--dim-medium);
      font-weight: normal;
      border-bottom: 3px solid transparent;
      cursor: pointer;
      transition: border .2s ease;
    }
    a:hover,
    > nav > span:hover {
      border-bottom: 3px solid var(--accent);
    }
    nav {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: inherit;
      overflow: visible;
      > span {
        font-weight: bold;
      }
    }
  }
  #app-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--dim-medium);
    grid-area: action;
    #sign-in {
      color: var(--text-primary);
    }
    #join {
      background: var(--accent);
      color: var(--text-inverted);
      padding: var(--dim-small) var(--dim-medium);
      border-radius: var(--radius-major);
    }
  }
}
#main {
  max-width: var(--max-content-width);
}
#cookie-banner {
  display: flex;
  font-size: smaller;
  background: var(--surface-alt);
  border-radius: var(--radius-medium);
  padding: 0 var(--dim-medium);
  color: var(--text-secondary);
  gap: var(--dim-small);
  p {
    flex: 1;
  }
  button {
    justify-self: flex-end;
  }
}
#footer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  width: 100%;
  margin-block: var(--dim-x-large);
  padding: var(--dim-large);
  #url-dump {
    display: flex;
    justify-content: space-evenly;
    grid-row: 1;
    grid-column: 2 / -2;
    margin-block: var(--dim-large);
    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
  }
  #social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 2;
    grid-column: 2 / -2;
    gap: var(--dim-medium);
    img,
    svg {
      width: var(--dim-large);
      color: var(--text-primary);
    }
  }
  #intersection {
    grid-row: 3;
    grid-column: 2 / -2;
  }
  nav#legal {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 4;
    grid-column: 2 / -2;
    gap: var(--dim-medium);
    a,
    span {
      color: var(--text-secondary);
      font-weight: normal;
    }
    a:not(:last-child):after {
      content: "\b7";
      margin-inline: var(--dim-small);
    }
  }
  #copyright {
    grid-row: 5;
    grid-column: 2 / -2;
    text-align: center;
  }
}
@media screen and (max-width: 738px) {
  #root {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "header" "header" "header";
    max-width: 100vw;
    --max-content-width: calc(100vw);
    --max-article-width: calc(100vw);
    padding: var(--dim-medium);
    #header {
      grid-area: header;
      grid-row: 1 / 3;
      grid-template-areas: "logo logo logo" "nav nav nav" "action action action";
      position: relative;
      grid-gap: var(--dim-medium);
    }
    #header #centre-nav {
      position: initial;
    }
    #header #centre-nav nav {
      flex-direction: column;
      align-items: center;
      background: transparent;
      width: 100%;
      border: none;
    }
    #main {
      grid-row: 4 / -1;
      grid-column: 1 / -1;
      box-sizing: border-box;
    }
    #footer {
      #url-dump {
        flex-direction: column;
        ul,
        li {
          text-align: center;
        }
      }
      #legal {
        flex-direction: column;
        nav {
          text-align: center;
        }
      }
      #copyright {
        margin-block: 1em;
      }
    }
  }
}