@import "variables.css";

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
  margin: 0 auto;
}

body {
  background-color: var(--black);
  color: var(--white);
  font-family: var(--default-font);
  margin: 0px auto;
  padding: 0px 0.75rem;
  font-size: calc(1rem * 1);
  max-width: 50em;
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/** Skip to content */

#skip-link {
  text-decoration: none;
  background: var(--background-color);
  color: var(--text-color);
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-gray-90);
  border-radius: 2px;
}

/* Prevent visually-hidden skip link fom pushing content around when focused */
#skip-link.visually-hidden:focus {
  position: absolute;
  top: 1rem;
  left: 1rem;
  /* Ensure it is positioned on top of everything else when it is shown */
  z-index: 999;
}

a {
  color: var(--light-red);
  text-decoration: none;
  text-underline-offset: 0.3rem;

  &:hover {
    /* color: var(--cyan); */
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--white);
    text-underline-offset: 0.3rem;
  }
}

header {
  a {
    color: var(--white);
  }

  h1 {
    color: var(--white);
    font-size: 3rem;
    word-break: break-word;
    margin: 0px;
    display: flex;
    align-items: start;
    flex-direction: row;

    span {
      color: var(--cyan);
    }
  }

  div.header-container {
    padding: 2rem 0;
  }

  .site-description {
    color: var(--comment-grey);
  }
  nav {
    font-weight: 700;

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 1rem;

      li {
        display: inline-block;

        a[aria-current="page"] {
          text-decoration: underline 2px solid var(--cyan);
          text-underline-offset: 0.3rem;
          color: var(--blue);
        }
      }
    }
  }
}

main {
  padding: 2rem 0;
}

section.posts-preview {
  article {
    padding-bottom: 1.5rem;

    h2 {
      color: var(--light-yellow);
      font-size: 1.5rem;
      margin: 0;
      display: inline-block;
    }

    span.author,
    span.date {
      display: inline-block;
      color: var(--comment-grey);
      font-size: 0.875rem;
      /* margin-bottom: 0.5rem; */
    }
  }
}

section.previous-posts-list {
  ul {
    li {
      span {
        padding-right: 0.2rem;
        color: var(--comment-grey);
      }
    }
  }
}

/** Blog Post Styles */
article {
  a {
    color: var(--light-red);
    text-decoration: underline;
  }

  h2 {
    color: var(--light-yellow);
    font-size: 1.5rem;
    margin: 0;
  }

  h3 {
    color: var(--dark-yellow);
    font-size: 1.25rem;
    margin: 0.25rem0;
  }

  span.author,
  span.date {
    display: block;
    color: var(--comment-grey);
    font-size: 0.875rem;
    /* margin-bottom: 0.5rem; */
  }
}

/** Experimental Styles */
@view-transition {
  navigation: auto;
}

/* Animations */
@keyframes move-out {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes move-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0%);
  }
}

@keyframes title-underline {
  from {
    text-decoration: none;
  }

  to {
    text-decoration: underline;
    text-decoration-thickness: 3px;
  }
}
/* Apply the custom animation to the old and new page states */
::view-transition-old(main) {
  animation: 0.4s linear both move-out;
}

::view-transition-new(main) {
  animation: 0.4s linear both move-in;
}