.article{
    width: 45%;
    align-self: center;
    padding-top:8rem;
    margin:auto;
    padding-bottom:2rem;
    color: var(--black);
}
.article img{
    height:auto;
    width:45vw;
    margin:auto;
}
.article h1{
    font-size: 2.6rem;
    margin: 0.6rem 0;
}
.article h3{
    margin:0.5rem 0;
    color:var(--primary);
}
.article .published{
    color: #455A64;
    margin: 0.6rem 0;
}
.article .block,.article ul{
    margin-left:0.8rem;
    list-style-position: inside;
}
.article .resources{
    margin-left:1.4rem;
}
.article ol{
    margin-left: 1.8rem;
    
}
.article a{
    color:var(--primary);
    text-decoration:none;
}
.article ol  .li_title{
    font-family: 'Roboto Slab', serif !important;
    margin:0.5rem 0;
    
}
.article aside{
    margin-left:1rem;
    font-style: italic;
}
.article .social_media{
    width:100%;
    margin-top:3rem;
}
.article .social_media_button{
    color:var(--black) !important;
    vertical-align:middle;
    margin:0.5rem;
}
.article .social_media img {
    width:3rem;
    height:auto;
    vertical-align:middle;
    margin:0.5rem;
}
.article .more{
    margin-bottom:0.5rem;
}
.article .more a span:hover{
    color:var(--black);
}

@media only screen and (max-width:1300px) {
    .article{
        width: 60%;
    }
    .article img{
        width:60vw;
    }
}
@media only screen and (max-width:756px) {
    .article{
        width: 75%;
    }
    .article img{
        width:75vw;
    }
    .article h1 {
        font-size: 2.2rem;
    }
    .article .social_media_button{
        font-size: 1.3rem;
    }
    .article .social_media p {
        font-size: 1.1rem;
    }
    .article .social_media img {
        width:3rem;
    }
}
@media only screen and (max-width:560px) {
    .article{
        width: 85%;
    }
    .article img{
        width:85vw;
    }
    .article h1 {
        font-size: 1.8rem;
    }
}
/* Extracted from articles */

        /* Variables */
        :root {
            --primary: #00B897;
            --white: #fff;
            --black: #001E15;
            --darkprim: #00170E;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
        }

        body {
            font-family: 'Heebo', sans-serif;
            color: #425968;
            overflow-x: hidden;
        }


        /* Article Styles */
        .article {
            width: 45%;
            max-width: 800px;
            padding-top: 3rem;
            margin: auto;
            padding-bottom: 2rem;
            color: var(--black);
        }

        .article .hero-img {
            width: 100%;
            max-height: 750px;
            object-fit: contain;
            border-radius: 8px;
            margin-bottom: 1.5rem;
        }

        .article h1 {
            font-size: 2.6rem;
            margin: 0.6rem 0;
            line-height: 1.2;
        }

        .article h2 {
            margin: 1.5rem 0 0.5rem;
            color: var(--black);
        }

        .article .published {
            color: #455A64;
            margin: 0.6rem 0 2rem;
            font-size: 0.95rem;
        }

        .article .published a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
        }

        .article .block {
            margin-bottom: 1.2rem;
            line-height: 1.7;
        }

        .article ul {
            margin-left: 1.5rem;
            margin-bottom: 1.2rem;
            line-height: 1.7;
        }

        .article a {
            color: var(--primary);
            text-decoration: none;
        }

        .highlight-box {
            background: #f0faf7;
            border-left: 4px solid var(--primary);
            padding: 1.2rem;
            margin: 1.5rem 0;
            border-radius: 0 6px 6px 0;
        }

        .gallery {
            display: flex;
            gap: 1rem;
            margin: 2rem 0;
            flex-wrap: wrap;
        }

        .gallery img {
            width: calc(50% - 0.5rem);
            height: 250px;
            border-radius: 6px;
            object-fit: cover;
        }

        .social_media {
            width: 100%;
            margin-top: 3rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .social_media img {
            width: 80px;
            height: auto;
        }

        .social_media a {
            color: var(--black);
            font-size: 1.5rem;
            transition: color 0.3s;
        }

        .social_media a:hover {
            color: var(--primary);
        }

        @media (max-width: 1300px) {
            .article {
                width: 60%;
            }
        }

        @media (max-width: 768px) {
            .fusion-header {
                height: 60px;
                padding: 0 15px;
            }

            .fusion-main-menu {
                margin-right: 0px;
            }

            .fusion-logo {
                margin-left: 0px;
            }

            .fusion-menu {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
                background: #fff;
                padding: 20px 0;
                text-align: center;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }

            .fusion-menu.active {
                display: flex;
            }

            .menu-toggle {
                display: block;
                cursor: pointer;
                font-size: 24px;
                color: #425968;
            }

            .article {
                width: 85%;
                padding-top: 6rem;
            }

            .article h1 {
                font-size: 2rem;
            }

            .gallery img {
                width: 100%;
                height: auto;
            }
        }

        .gallery img:only-child {
            width: 100% !important;
            height: auto;
            max-height: 750px;
            object-fit: contain;
        }