:root {
  color-scheme:dark;
  --b:#050505;
  --accent1:#1b524b;
  --accent2:#0b3f38;
  --b-size:500%;
  --text:#ccc;
  --links1:#ddd;
  --links2:#fff;
  --boton:#0a0a0abf;
  --boton2:#0e0e0ebf;
  --border2:1px solid #14211f;
  /*TRUESIGHT - TOOLTIPS*/
  --truesight:#0a0a0a;
  --truesight-w:clamp(10rem, 40dvw, 40rem);
  --truesight-padding:1rem;
  --truesight-gap: 0 1rem;
  --truesight-border:var(--border2);
  --truesight-radius:0px;
  --truesight-font:400 normal .8rem 'Roboto', 'Arial', sans-serif;
  --truesight-color:inherit;
  --truesight-head-font:700 normal .9rem 'Georgia', serif;
  --truesight-head-font-tt:uppercase;
  --truesight-head-color:#bbb;
  --truesight-normal-color:inherit;
  --truesight-normal-font:700 normal .7rem 'Roboto', 'Arial', sans-serif;
  --truesight-normal-tt:uppercase;
  --truesight-img-max-w:clamp(5rem, 15dvw, 30rem);
  --truesight-icon-size:3rem;
  --truesight-icon-color:var(--accent1);
}

.light {
  color-scheme:light;
  --b:#ddd;
  --accent1:#1b524b;
  --accent2:#0b3f38;
  --b-size:200%;
  --text:#555;
  --links1:#333;
  --links2:#111;
  --boton:#eeeeeebf;
  --boton2:#f2f2f2bf;
  --border2:1px solid #14211f;
  /*TRUESIGHT - TOOLTIPS*/
  --truesight:#eeeeee;
  --truesight-head-color:#222;
}

* {
  --group:inherit;
}

html, body {
  min-height:100dvh;
  font-size:16px;
  font-family:'Roboto', 'Arial', sans-serif;
  color:var(--text);
}

body {
  margin:0;
  background:linear-gradient(45deg, var(--accent2, green), var(--b, black), var(--accent1, green));
  background-size:var(--b-size);
  background-position:center;
  background-attachment:fixed;
}

#lang-switchers {
  position:fixed;
  top:0;
  left:0;
  padding:.5rem;
  gap:.5rem;
  display:flex;
  justify-content:center;
  align-items:center;
}

.theme-switch {
  position:fixed;
  top:.5rem;
  right:.5rem;
}

a {
  color:var(--links1);
  text-decoration-color:var(--accent1);
  transition:color ease .3s, background ease .3s;
  &:hover {
    color:var(--links2);
  }
}

h1 {
  margin-top:0;
  margin-bottom:.5rem;
  font:700 3rem 'Georgia', serif;
  text-transform:uppercase;
}

h2 {
  margin-top:1rem;
  margin-bottom:.5rem;
  font:600 1.75rem 'Georgia', serif;
  text-transform:uppercase;
  &:first-child { margin-top:0; }
}

code {
  font-size:.8rem;
  font-family:'Courier New', monospace;
  color:color-mix(in srgb, var(--text) 75%, var(--b));
  margin-block:.3rem;
  text-align:left;
  &:not([data-inline]) {
    padding: .5em 1em;
    display: block;
    border-left: 2px solid var(--accent2);
  }
}

.gallery {
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 1rem;
  place-content: center;
  align-items: center;
}

ul+br {
  display:none;
}

button {
  background:var(--boton);
  border:var(--border2);
  outline:0;
  padding:.75em;
  font-weight:700;
  font-size:.7rem;
  text-transform:uppercase;
  cursor:pointer;
  color:var(--links1);
  transition:color ease .3s, background ease .3s;
  &:hover {
    background:var(--boton2);
    color:var(--links2);
  }
}

body.index-page {
  display:grid;
  grid-template-columns:100%;
  place-content:center;
  align-items:center;
  text-align:center;
  gap:.5rem;
  & > * {
    margin:0 auto;
  }
  & > img {
    margin-top:-5rem;
  }
  & h1 {
    font:700 3rem 'Georgia', serif;
    & + p {
      font-size:.8rem;
    }
  }
  & > #quick-links {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.5rem;
    padding:0;
    margin-top:2rem;
    & > li {
      display:block;
      background:var(--boton);
      border:var(--border2);
      font-weight:700;
      font-size:.75rem;
      text-transform:uppercase;
      transition:background ease .3s;
      &:hover {
        background:var(--boton2);
      }
      & a {
        padding:.75em;
        display:block;
        text-decoration:none;
      }
    }
  }
}

body.notfound-page {
  display:grid;
  grid-template-columns:100%;
  place-content:center;
  align-items:center;
  text-align:center;
  gap:.5rem;
  & > * {
    margin:0 auto;
  }
  & h1 {
    font-size:6rem;
    margin-top:-5rem;
    margin-bottom:.15em;
    & ~ p {
      font-size:.8rem;
    }
  }
  & h2 {
    font:700 1.75rem 'Georgia', serif;
    text-transform:uppercase;
  }
  & > #quick-links {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.5rem;
    padding:0;
    margin-top:2rem;
    & > li {
      display:block;
      background:var(--boton);
      border:var(--border2);
      font-weight:700;
      font-size:.75rem;
      text-transform:uppercase;
      transition:background ease .3s;
      &:hover {
        background:var(--boton2);
      }
      & a {
        padding:.75em;
        display:block;
        text-decoration:none;
      }
    }
  }
}

body:has(sidebar):has(main) {
  display:grid;
  grid-template-columns:clamp(10rem, 15dvw, 30rem) 1fr;
  grid-template-rows:20dvh 20dvh max-content;
  grid-template-areas:'header header''desc desc''sidebar main';
  position:relative;
  & > h1 {
    grid-area:header;
    align-self:flex-end;
    text-align:center;
    margin:0;
    line-height:1;
  }
  & > p {
    grid-area:desc;
    align-self:flex-start;
    text-align:center;
    font-size:.75rem;
    line-height:1;
    &:empty {
      display:none;
    }
  }
  & > sidebar {
    grid-area:sidebar;
    margin:0 1rem 1rem;
    border:var(--border2);
    background:var(--boton);
    padding:1.5rem;
    border-radius:.5rem;
    height:fit-content;
    position:sticky;
    top:3rem;
    & > h2 {
      margin:0;
      font:700 .8rem 'Georgia', serif;
      text-transform:uppercase;
    }
    & > ul {
      padding-left:1.5rem;
      font-weight:700;
      font-size:.7rem;
      text-transform:uppercase;
      margin-bottom:0;
      & *::marker {
        color:var(--accent1);
      }
      & li:not(:last-of-type) {
        margin-bottom:.5em;
      }
    }
  }
  & > main {
    grid-area:main;
    padding:2em;
    font-size:.95rem;
    line-height:1.5em;
    text-align:justify;
  }
}