.index,
.category {
  display: grid;
  grid-template-columns: 12rem 36rem;
  max-width: 50rem;
  padding: 2rem 1rem 0 1rem;
  margin: 0 auto;
}

.index {
  padding: 2rem 1rem;
}

.about,
.submit,
.guide,
.stats {
  display: grid;
  grid-template-columns: 1fr 5fr 1fr;
  max-width: 50rem;
  padding: 1rem 1rem 6rem 1rem;
  margin: 0 auto;

  .content {
    grid-column: 2;
    padding: 0 1rem;

    h2,
    h3,
    h4 {
      margin: 2.75rem 0 1rem .05rem;
      scroll-margin-top: 6rem;
  
      a {
        color: var(--f-color);
        font-family: var(--s-font);
        font-weight: 600;
  
        &:hover { 
          text-decoration: none;
        }
      }
    }
  
    h2 a {
      font-size: 1.5rem;
    }
  
    h3 a { 
      font-size: 1.25rem;
    }
  
    p {
      color: var(--fq-color);
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5rem;
      padding: .5rem 0;
      margin: 0;
  
      a {
        color: var(--l-color);
      }
    }
  
    a:hover { text-decoration: underline }

    code {
      display: block;
      font-size: .8rem;
    }
  
    ul{
      padding: 0 0 0 1.5rem;
  
      li {
        color: var(--f-color);
        font-family: var(--p-font);
        font-size: 1rem;
        font-weight: 400;
        padding: .35rem 0;

        a {
          color: var(--l-color);
        }
      }
    }
  
    img {
      width: 100%;
      padding: 1rem 0;
    }
  }

}

@media only screen and (max-width: 480px) {
  .index,
  .category {
    display: block;
    padding: 2rem 1rem;
    margin: 0 auto;
  }

  .about,
  .submit,
  .guide,
  .stats {
    display: block;
    padding: .5rem 1rem 4rem 1rem;

    .content {
      padding: 0 .5rem;
    }
  }
}