.article-container{
  display: flex;
  justify-content: center;

  .article-text{
    width: 75%;

    a{
      color: #01459c;
      transition: 0.32s ease;

      &.anchor{
        display: block;
        position: relative;
        top: -130px;
        visibility: hidden;
      }

      &:hover, &:focus, &:target{
        color: #006ec7;
      }
    }

    img{
      vertical-align: unset;
      max-width: 100%;
      display: flex;
      margin: auto;

      &.top-image{
        margin-bottom: 1rem;
      }
    }

    .formula{
      font-size: larger;
      font-weight: 700;
      margin-left: 1em;
    }

    .centered{
      text-align: center;
      margin-bottom: 10px;

      &.smaller{
        font-size: 15px;
      }
    }

    .table-container{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      gap: 10px;
      font-family: sans-serif;

      table{
        border-collapse: collapse;
        font-size: 15px;
        margin-bottom: unset;

        th, td{
          padding: 2px 6px;
          text-align: left;
          min-width: 3rem;

          &.empty{
            border: none;
            background-color: #fff;
          }
        }

        td{
          border: 2px solid #01459c;
        }

        th{
          background-color: #006ec7;
          border: 1px solid #01459c;
          color: #fff;
          text-shadow: 2px 2px #000;

          &.centered{
            text-align: center;
            vertical-align: middle;
          }
        }
      }
    }
  }
}

@media (max-width: 1024px){
  .article-container .article-text{
    width: 90%;
  }
}

@media (max-width: 768px){
  .article-container .article-text{
    width: 100%;
  }
}

@media (min-width: 768px){
  .article-container .article-text .table-container table th.wide12{
    min-width: 12rem;
  }

  .article-container .article-text .table-container table th.wide24{
    min-width: 24rem;
  }
}