@import url('fonts.css');

:root {
  --ev-outer: #00a6d7;
  --ev-inner: #30e7ed;
  --links: #ffcc66;
  --links-alt: #00a6d7;
  --links-active: #f27983;
  --bg: #1f242a;
  --text: #d3d4d6;
  --tags: #73d0ff;
  --card-bg: #2a2f35;
  --text-secondary: #5C6773;

  --ev-link-active-filter: brightness(120%);
  --links-filter:
    invert(91%)
    sepia(99%)
    saturate(7482%)
    hue-rotate(310deg)
    brightness(105%)
    contrast(101%);

  --links-icons-filter:
    invert(84%)
    sepia(1%)
    saturate(352%)
    hue-rotate(182deg)
    brightness(110%)
    contrast(95%);

  --links-active-filter:
    invert(73%)
    sepia(53%)
    saturate(1434%)
    hue-rotate(301deg)
    brightness(98%)
    contrast(115%);
}

/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

body {
  line-height: 1.3;

  /* Help for OSX browsers */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* BASIC SETUP */

body {
  font-family: "Atkinson Hyperlegible", sans-serif;
  background-color: var(--bg);
  color: var(--text);
  padding-bottom: 40px;
  margin: 2em;
  margin-top: 0;
}

ul {
  list-style: none;
}

ol {
  padding-left: 2em;
}

a {
  text-decoration: none;
  color: var(--links);

  &:hover {
    color: var(--links-active);
  }

  img {
    filter: var(--links-filter);

    &:hover {
      filter: var(--links-active-filter);
    }
  }
}

/* TOP NAV */
nav {
  display: flex;
  justify-content: space-between;
  font-family: "Cascadia";
  margin: 1em 0;

  img {
    width: 2em;
    height: 2em;
  }

  h1 {
    color: var(--ev-outer);
  }

  header a {
    img {
      filter: none;
    }

    &:hover {
      h1 {
        color: var(--ev-inner);
      }
      img {
        filter: var(--ev-link-active-filter);
      }
    }
  }

  header a,
  #social {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  #social a img {
    display: block;
    filter: var(--links-icons-filter);

    &:hover {
      filter: var(--links-active-filter);
    }
  }
}

/* CARDS */
main {
  margin-top: 2em;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

main,
article {
  padding-bottom: 5em; /* bottom of page padding */
}

article {
  .tags,
  .created,
  .updated {
    font-size: 0.8em;
  }

  .tags,
  .updated {
    margin-bottom: 0.5em;
  }

  .tags {
    text-transform: uppercase;
    color: var(--ev-outer);
    word-spacing: 0.3em;
  }

  .created,
  .updated {
    color: var(--text-secondary);
  }
}

article.card {
  flex: 1 1 15em;
  font-size: small;
  background-color: var(--card-bg);
  border-radius: 0.5em;
  padding: 1em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  cursor: pointer;

  &:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
  }

  h3 {
    font-size: 1.7em;
    font-weight: lighter;
    line-height: 1.1;
    margin-bottom: 0.1em;
  }

  .intro {
    color: var(--text);
  }
}

/* POSTS */
article.post {
  header {
    display: flex;
    justify-content: space-between;

    .dates {
      display: flex;
      gap: 1em;
    }

    .tags,
    .created,
    .updated {
      margin: 0;
    }
  }

  h1 {
    font-weight: lighter;
    color: var(--links);
    margin-bottom: 0.5em;
  }

  p {
    margin-top: 1em;
  }

  h2 {
    margin-top: 2em;
  }

  h3, h4 {
    margin-top: 1em;
  }

  img {
    width: 100%;
  }

  figure {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  figcaption {
    font-size: 0.9em;
    color: var(--text-secondary);
  }

  .TOC {
    column-width: 200px;
    column-gap: 2rem;
    font-size: 0.8em;
    background-color: var(--card-bg);
    padding: 1em;
    border-radius: 0.5em;

    ul {
      font-weight: bold;
    }

    ul ul {
      padding-left: 1em;
      border-left: 1px solid var(--text-secondary);
      font-weight: normal;
      margin-bottom: 0.5em;
    }
  }
}

/* IMAGES */
img#zorlandc {
  width: 168px;
  float: right;
  margin-left: 1em;
  margin-bottom: 1em;
}