body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    overflow-y: scroll;
    overflow-x: hidden;
  }

.read-more {
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* align-items: flex-start; */
    margin: 0;
    padding: 8rem 4rem 0;
    gap: 3rem;
}

.read-more a:hover {
    color: var(--orange);
    font-weight: bold;
    text-decoration: underline;
}

.side-images {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 0;

}

.side-images img {
    width: 24rem;
    height: auto;
    border-radius: 1.25rem;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    object-fit: cover;
}

.article-author {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    
    img {
        width: 6.5rem;
        height: 6.5rem;
        outline: 1px solid var(--blue);
    }

    .author-profile {
        display: flex;
        color: var(--blue);
        flex-direction: column;

        h3 {
            font-size: 1rem;
            font-weight: bold;
            margin: 1rem 0 0 0;
        }
    }
}


.read-more-info {
    background-color: white;
    border-radius: 14px;
    width: 56rem;
}

.paragraph {
    padding: 2.5rem;
    margin: 0;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.12);
    border-radius: 1rem;

    h1 {
        color: var(--blue);
        font-size: 1.5rem;
        font-weight: bold;
    }

    p {
        font-weight: lighter;
        color: black;
        margin: 0;

        span {
            font-weight: bold;
        }
    }

    h2 {
        font-size: 1rem;
        font-weight: bold;
        color: black;
    }

    ol {
        li {
            font-weight: lighter;
            font-size: 1rem;
            color: black;
            list-style: decimal;
    
            span {
                font-weight: bold;
            }
    
        }
    }

    ul {
        margin: 0;

        li {
            font-weight: lighter;
            font-size: 1rem;
            color: black;
            list-style: circle;
    
            span {
                font-weight: bold;
            }
    
        }
    }


    a {
        text-decoration: underline;
        font-weight: lighter;
        color: blue;
    }

}

.paragraph h3 {
    font-size: 1.25rem;
    color: var(--orange);
    font-weight: bold;
    margin: 1rem 0 0 0;
}

@media (max-width: 1169px) {

    .read-more {
        gap: 0.5rem;
        padding: 8rem 1rem 0;

        a {
            top: 4rem;
        }
    }



    .side-images img {
        height: auto;
        max-width: 100%;
    
    }

    .article-author { 
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 776px) {
    .read-more {
        padding: 5rem 1rem 0;
        flex-direction: column-reverse;

        a {
            top: 2rem;
            left: auto;
        }
    }

    .read-more-info {
        width: 100%;
        height: auto;
    }

    .side-images {
        width: 100%;
        height: auto;
    }

    .side-images img {
        display: none;
    }

    .article-author {
        flex-direction: row;
        justify-content: center;

    }

    .article-author img {
        display: flex;
    }
}