@import "./styleInitial.css";

/* ********** Utilities ********** */

.c-visible {
  content-visibility: auto;
}

/* ********** Components ********** */

aside {
  max-width: var(--max-width);
  padding-bottom: 1rem;
  margin: 0 auto;
  text-align: center;

  .otros-articulos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    ul {
      text-align: right;
      li {
        list-style-type: none;
        &::after {
          content: "«";
          margin-right: 5px;
          color: var(--text-link);
        }

        a:hover {
          color: var(--text-link);
        }
      }
    }
  }
}

table {
  min-width: 70%;
  outline: 1px solid var(--border-box);
  border-collapse: collapse;
  border-radius: 1rem;
  margin: 2rem auto;
  overflow: hidden;

  thead {
    border-bottom: 1px solid var(--border-box);
    tr {
      color: var(--text-100);
    }
  }

  tbody tr:hover {
    opacity: 0.9;
  }

  tr {
    /* &:nth-child(odd) */
    &:nth-child(even) {
      background-color: #1d1d1f;
    }
  }

  td,
  th {
    padding: 5px 1rem;
    border: none;
    border-left: 1px solid var(--border-box);
    &:first-child {
      border-left: none;
    }
  }
}

h1:first-of-type {
  position: sticky;
  top: 0.5rem;
  z-index: 1;
  width: fit-content;
  margin: 0 auto;
}

@media (width > 900px) {
  body {
    main {
      margin-right: 12rem !important;
    }
  }

  a[href="#temas"] {
    display: none;
    background-color: red;
  }
  #temas {
    position: fixed;
    top: 4rem;
    right: 0;
    transform: translateY(-50%);
    padding: 1rem;
    text-shadow: 0 0 5px #000;

    + ul {
      position: fixed;
      top: 7rem;
      right: 0;
      padding: 1rem;
      padding-left: 0;
      text-align: right;
      border: 1px solid #000;
      background-color: var(--bg-nav-bar);
      border-radius: 1rem;

      li {
        list-style: none;
        a {
          color: var(--text-300);
        }
      }

      + hr {
        display: none;
      }
    }
  }
}

/* ********** Site Styles ********** */

body {
  margin-top: calc(var(--header-height) + 1rem);

  main {
    max-width: var(--max-width-blog);
    padding: 1rem 2rem;
    border: 1px solid var(--border-box);
    border-radius: 1rem;
    margin: 0 auto;
  }
}

img {
  border-radius: 1.5rem;
}

h1 {
  text-align: center;
}
h3 {
  text-shadow: 1px 1px 20px #6db6ff40;
  margin-bottom: 0.5rem;
  + p {
    margin-top: 0;
  }
}
h4,
p {
  margin-bottom: 0.5rem;
  + ul,
  + ol {
    margin: 0;
  }
}
blockquote {
  /* margin-left: 1.5rem; */
  /* margin-right: 0; */
  margin: 0;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border-box);
  background-color: #111;
  p {
    font-size: 0.9rem;
    margin: 0;
  }
}

hr {
  border-color: #595959;
}

ol,
ul {
  padding-left: 1.5rem;
  li ul li {
    &:first-child {
      margin-top: 0.3rem;
    }
    &:last-child {
      margin-bottom: 0.5rem;
    }
  }
}

code {
  font-size: 87%;
  color: var(--text-200);
}
pre {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  margin-left: 1rem;
  margin-right: 1rem;
  font-weight: 300;
  font-size: 14px;
  background-color: var(--bg-code);
  overflow-x: auto;
}

form {
  margin: 1rem;
}