@import "colors.css";
@import "footer.css";
@import "header.css";
@import "icons.css";
@import "navigation.css";
@import "post.css";
@import "utilities.css";

/* || Resets */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  min-height: 100vh;
}
body {
  -webkit-font-smoothing: antialiased;
  font-smooth: auto;
  line-height: 1.4;
  height: 100%;
  /*min-height: max(100vh, 100%);*/
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
ol,
ul {
  padding-left: 0;
  list-style-position: inside;
  word-wrap: break-word;
  margin-right: 1rem;
}
#root,
#__next {
  isolation: isolate;
}

/* || Standard */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: monospace;
  margin: var(--block-space) var(--inline-space);
  max-width: min(100%, 80ch);
}

@media (min-width: 40rem) {
  body {
    margin-inline: auto;
  }
}

h1,
h2,
h3 {
  line-height: 1;
}

a {
  color: var(--color-link);
  opacity: 70%;
  display: inline-block;
  text-decoration: underline;

  &:hover {
    opacity: 100%;
  }

  /* Apply treatment to all outside links except icon only links */
  &:where(&[target="_blank"]):not(:has(span))::after {
    aspect-ratio: 1;
    background-color: currentColor;
    content: "";
    display: inline-block;
    height: 0.5rem;
    margin-left: var(--inline-space-half);
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBjbGFzcz0ic2l6ZS02Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xMy41IDZINS4yNUEyLjI1IDIuMjUgMCAwIDAgMyA4LjI1djEwLjVBMi4yNSAyLjI1IDAgMCAwIDUuMjUgMjFoMTAuNUEyLjI1IDIuMjUgMCAwIDAgMTggMTguNzVWMTAuNW0tMTAuNSA2TDIxIDNtMCAwaC01LjI1TTIxIDN2NS4yNSIgLz4KPC9zdmc+Cg==")
      no-repeat center;
  }
}

section {
  margin-block: 1.5rem;
}

code {
  background-color: var(--color-code-bg);
  border-radius: var(--border-radius);
  color: var(--color-code-text);
  font-family: monospace;
  padding: 0.5ch;
}

pre {
  background-color: var(--color-code-bg);
  border-radius: var(--border-radius);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-code-text);
  counter-reset: line;
  font-family: monospace;
  overflow-x: auto;
  padding: 2ch;
  user-select: all;

  & span {
    &::before {
      color: var(--color-border);
      content: counter(line);
      counter-increment: line;
      margin-right: 4ch;
    }
  }
}

table {
  border-collapse: collapse;
  margin-bottom: 2ch;
  min-width: 100%;

  th {
    background-color: var(--color-table-heading);
  }

  th,
  td {
    border: 4px solid var(--color-bg);
    color: var(--color-table-text);
    padding: 0.25rem;
    text-align: left;
    vertical-align: top;
  }

  & tr:nth-child(odd) {
    background-color: var(--color-table-row);
  }
}

/* || Classes */

.btn {
  border-radius: var(--border-radius);
  color: var(--color-text);
  padding: 1ch;
  text-decoration: none;
  transition: all 0.25s ease;

  &:hover {
    background-color: var(--color-code-bg);
  }
}

.content {
  /*height: 100%;*/
  margin-block: var(--block-space-double);

  & blockquote {
    background: var(--color-code-bg);
    border-left: 4px solid var(--color-table-heading);
    color: var(--color-code-text);
    margin-block: 1rem;
    padding-block: 1ch;
    padding-left: 4ch;

    & > p {
      margin-block: 0;
    }

    & > ul {
      margin-inline: 0;
    }
  }

  & h2 {
    margin-block: 1.5rem;
  }

  & h3 {
    margin-block: 1rem;
  }

  /*& p {*/
  /*  margin-block: 1rem;*/
  /*}*/
}

.img {
  border-radius: var(--border-radius);
}

#copyright::after {
  content: "2023-2025 Cory Hutchison.";
  margin-left: 0.25rem;
}