@import url("https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");

* {
  box-sizing: border-box;
}

:root {
  --color-fondo: rgb(26, 28, 46);
  --color-texto: rgb(255, 255, 255);
  --color-texto-apagado: rgb(255, 255, 255, 0.75);
  --color-primario-claro: #a8defc;
  --color-acento-claro: rgb(217, 175, 226);

  --xs: 0.75rem;
  --sm: 0.9rem;
  --md: 1rem;
  --lg: 1.5rem;
}

html {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-size: 18px;
  font-family: "PT Sans", sans-serif;
  transition: 0.25s opacity;
}

html.reduce-fouce {
  opacity: 0;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "PT serif", serif;
}

a {
  &:link {
    color: var(--color-primario-claro);
  }

  &:visited {
    color: var(--color-acento-claro);
  }
}

body {
  max-width: 800px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 var(--md);
  display: flex;
  flex-direction: column;

  > header {
    margin-bottom: var(--lg);

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;

      ul {
        list-style: none;
        display: flex;
        gap: var(--md);
      }
    }
  }

  > main {
    flex-grow: 1;
    width: 100%;
    margin: 0 auto;
    max-width: 684px;
  }

  > footer {
    text-align: center;
    font-size: var(--xs);
    color: var(--color-texto-apagado);
  }
}

article {
  header {
    time {
      color: var(--color-texto-apagado);
      font-size: var(--sm);
    }

    h1 {
      margin-top: 0;
    }
  }

  section {
    h2 {
      a:link,
      a:visited {
        color: var(--color-texto);
      }
    }

    p {
      text-align: justify;
      hyphens: auto;
      margin-block: 1lh;
    }
  }
}

.mes-archivo {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--xs);

      time {
        color: var(--color-texto-apagado);
      }
    }
  }
}