@media (min-width: 1025px) {
    body {
        background-color: #f1f1f1;
        font-family: Verdana, sans-serif, monospace;
        color: #0E131F;
        margin: auto;
        max-width: 700px;
        overflow-x: hidden;
    }

    nav {
        margin-left: auto;
    }

    .index {
        text-align: left;
    }

    p {
        font-size: 1rem;
        font-style: normal;
        line-height: 1.5;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.17rem;
    }

    h4 {
         font-size: 1rem;
    }
    a {
        color: #0E131F;
        text-decoration: none;
        font-size: 1rem;
        font-style: normal;
        line-height: 1.5;
    }

    a:hover {
        color: #6E9075
    }
    ul {
        font-size: small;
        list-style-type: circle;
        font-size: 1rem;
        font-style: normal;
        line-height: 1.5;
    }
}
@media (max-width: 768px) {
    body {
        background-color: #f1f1f1;
        font-family: Verdana, sans-serif, monospace;
        color: #0E131F;
        width: 90%;
        margin: 0%;
        padding: 0.75rem;
    }
    
    nav {
        margin-left: auto;
    }
    
    .index {
        text-align: left;
      }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1rem;
    }

    h4 {
        font-size: .75rem;
    }

    p {
        font-size: .875rem;
        font-style: normal;
        line-height: 1.5;
    }
    
    a {
        color: #0E131F;
        text-decoration: none;
        font-size: .875rem;
        font-style: normal;
        line-height: 1.5;
    }
    
    a:hover {
        color: #6E9075
    }
    ul {
        font-size: .875rem;
        list-style-type: circle;
        font-style: normal;
        line-height: 1.5;
    }
}