docs/docs/_sass/components/_doc-content.scss
// DOC-CONTENT
// -----------------------------------------------
// -----------------------------------------------

.doc-content {
    font-family: $doc-font-family;
    position: relative;
    padding: ($base-point-grid * 4);
    font-size: 1.125rem;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-bottom: ($base-point-grid * 2);
        margin-top: ($base-point-grid * 4);
        color: $header-font-color;

        &:first-child {
            margin-top: 0;
        }
    }

    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.9rem;
    }

    h3 {
        font-size: 1.675rem;
    }

    h4 {
        font-size: 1.425rem;
    }

    h5 {}

    h6 {}

    p {
        margin-bottom: ($base-point-grid * 2);
    }

    .browser {
        margin-top: ($base-point-grid * 3);
    }

    ul, ol {
        padding-left: ($base-point-grid * 3);
        margin-bottom: ($base-point-grid * 2);
    }

    ul {

        li {
            list-style: circle;
        }
    }

    ol {
        li {
            list-style-type: decimal;
        }
    }

    strong {
        font-weight: $font-bold;
    }

    del {
        text-decoration: line-through;
    }

    em {
        font-style: italic;
    }

    hr {
        border: none;
        height: 1px;
        width: 100%;
        background: rgba($brand-secondary, 0.9);
    }

    table {
        width: 100%;
        thead {
            text-align: left;
            font-weight: bold;
        }

        th, td {
            padding: $base-point-grid;
            border: 1px solid rgba($brand-secondary, 0.9);
        }

        tr:nth-child(2n) {
            background: $background-color;
        }

        tbody {
          tr {
            td > code:first-of-type:before {
              content: '\A';
              white-space: pre;
            }
          }
        }

    }

    .header-link {
        float: left;
        font-size: 1.4rem;
        line-height: 1;
        margin-left: -24px;
        margin-top: 10px;
        opacity: 0;
        transition: opacity $base-duration $base-timing;
    }

    h1:hover,
    h2:hover,
    h3:hover,
    h4:hover,
    h5:hover,
    h6:hover {
        .header-link {
            opacity: 1;
        }
    }

    .gif {
      img {
        max-width: 100%;
      }
    }

    .setup-gradle {
      margin-top: 1rem;
      margin-bottom: 1rem;
      background: #fff;
      box-shadow: $base-box-shadow;

      .tab {
        overflow: hidden;
        p {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          button:nth-child(2) {
            border-right: 1px solid #DCDEE1;
            border-left: 1px solid #DCDEE1;
          }
        }
      }

      .tab button {
        background-color: rgba($dark-color-doc, 0.03);
        border: none;
        outline: none;
        cursor: pointer;
        padding: 1.75rem 1rem;
        font-size: 1.25rem;
        font-family: $heading-font-family;
        font-weight: $font-bold;
        transition: 0.3s;
        box-shadow: 0 1px #DCDEE1;
      }
      /* Change background color of buttons on hover */
      .tab button:hover {
        background-color: rgba($dark-color-doc, 0.01);
      }
      /* Create an active/current tablink class */
      .tab button.active {
        background: none;
        box-shadow: none;
      }
      /* Style the tab content */
      .tabcontent {
        display: none;
        padding: 0rem 1rem 0.1rem 1rem;
      }
    }
}
