/* MAIN DEFAULT STYLING */
main {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  gap: 2em;
  justify-items: center;
  margin-top: 5em;
  padding: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1rem 0.5rem 1rem 0;
  width: 100%;
  justify-self: center;
  overflow-wrap: anywhere;
  /* text-align: center; */

  @media (min-width: 475px) {
    justify-self: start;
    align-self: start;
    margin: 2rem 0 1rem 0;
  }

  @media (min-width: 925px) {
    grid-column: 1 / 3;
    justify-self: start;
    align-self: start;
    margin: 2rem 0 1rem 1rem;
    position: relative;
  }
}

article {
  display: flex;
  flex-direction: column;
  padding: 1em;
  box-sizing: border-box;
  background-color: var(--dark-2);
  width: clamp(28ch, 65vw, 75ch);
  overflow-wrap: anywhere;
  border-radius: var(--radius);
  outline: 1px solid var(--light-2);
  box-shadow: 1px 1px 5px 5px var(--dark-1);

  img {
    align-self: center;
    width: clamp(240px, 65vw, 400px);
    height: auto;
  }

  p {
    margin: 0.5em 0 0 0;
  }

  ul {
    list-style-type: disc;
    padding-left: 1.5em;

    li p {
      overflow-wrap: anywhere;
    }
  }
}

pre[class*="language-"] {
  display: block;
  width: clamp(240px, 65vw, 670px);
  max-width: 100%;
  background-color: var(--dark-2);
  border-radius: var(--child-radius);
  outline: 2px solid var(--light-2);
  overflow: hidden;

  & > code {
    display: block;
    overflow-x: auto;
    padding: 1em;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 #1e1e1e;
  }

  @media (min-width: 925px) {
    grid-column: 2;
  }
}