html,body{
    width: 100% !important;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: #000;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    transition: 0.5s;
}
html,body:after{
    transition: 0.5s;
}
.other_bg{
    background: #1b1b1b !important;
    position: relative !important;
    padding: 10% 35% !important;
    left: -35% !important;
}
.body{
    width: 60% !important;
    margin: 0 20%;
    z-index: 2;
}
img{
    width: 100% !important;
    border-radius: 10px;
}
ul{
    list-style-type: disc !important;
}
.body button{
    padding: 0.8vw 1vw;
    margin: 15% 0 0 0;
    border-radius: 10px;
    background: #4caf50;
    color: #fff;
    display: inline-block;
    border: none;
    text-align: center;
}
.grid{
    width: 100%;
    padding: 10% 0 10% 0;
    display: grid;
}
section{
    margin: 15em 0 0 0;
    max-height: 100% !important;
}
.section1{
    height: 60% !important;
    position: relative;
    top: 50%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 
        "gt gi";
}
.img{
    width: 100%;
}
.features{
    margin: 20% 0 0 0;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 
        "f1 f2 f3";
}
.ui{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.2fr 1fr 1.1fr;
    grid-template-areas: 
        "ui_h2 ui_h2"
        "ui_img ui_img"
        "ui_ul ui_ul2";
    gap: 5% 5%;
}
.news{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.2fr 1fr auto;
    grid-template-areas:
        "n_h2 n_h2" 
        "ni nt";
    gap: 0 5%;
}
.news ul{
    height: 72.3% !important;
}
.status{
    width: 100%;
    padding: 10% 0;
}
.reviews{
    display: flex !important;
    font-size: 0;
    display: -ms-flexbox;
    -ms-flexbox-wrap: wrap;
    -ms-flexbox-direction: columnM
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    display: -webkit-box;
}
.reviews div{
    -webkit-box-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 16vw;
    aspect-ratio: 16 / 9;
    margin: .5vw;
}
.reviews div img{
    height: 100% !important;
    object-fit: cover;
}
.gallery{
    display: flex !important;
    font-size: 0;
    display: -ms-flexbox;
    -ms-flexbox-wrap: wrap;
    -ms-flexbox-direction: columnM
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    display: -webkit-box;
}
.gallery div{
    -webkit-box-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 12vw !important;
    aspect-ratio: 16 / 9;
    margin: .5vw;
}
.gallery div img{
    height: 100% !important;
    object-fit: cover;
}
.donate_article{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
        "ni nt";
    gap: 0 5%;
}
.donate div{
    aspect-ratio: 36 / 9;
}
.faq{
    border: none;
    outline: none;
}
.faq_content{
    width: 96%;
    padding: 0 0 0 4%;
    background: #121212;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
.faq button{
    margin: 0;
    padding: 1vw;
    background: #000;
    border-radius: 0px;
    text-align: left;
    font-size: 1.2vw;
}
.faq i{
    color: #fff;
}
.faq_other_bg{
    background: #1b1b1b !important;
}


@media screen and (max-width: 600px){
    .body{
        width: 80% !important;
        margin: 0 10%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 1fr auto auto auto;
        grid-template-areas: 
            "section"
            "features"
            "ui"
            "news"
            "reviews"
            "faq";
    }     
    ul{
        width: 94%;
        margin-left: 6%;
    } 
    .body button{
        padding: 2vw;
        margin: 10% 0 0 0;
    } 
    section{
        margin: 0 !important;
    }
    .section1{
        max-height: 100% !important;
        position: relative;
        top: 0; 
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        grid-template-areas: 
            "gi"
            "gt" !important;
        text-align: center;
    }
    .img{
        width: 80% !important;
        margin: 0 10%;
    }  
    .features{
        padding: 70% 0 0 0;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: 
            "f1"
            "f2"
            "f3";
    }  
    .ui{
        grid-template-columns: 1fr;
        grid-template-rows: 0.2fr auto 1fr auto;
        grid-template-areas: 
            "ui_h2"
            "ui_img"
            "ui_ul"
            "ui_ul2";
        gap: 0;
    }
    .news{
        grid-template-columns: 1fr;
        grid-template-rows: 0.2fr auto 1fr;
        grid-template-areas:
            "n_h2" 
            "ni"
            "nt";
        gap: 0;
    }
    .reviews div{
        width: 36vw !important;
    }
    .gallery{
        display: none !important;
        visibility: hidden;
    }
    .donate_article{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "ni"
            "nt";
        gap: 0;
        margin: 2.5% 0;
    }
    
    /** FONTS **/
    h1{
        font-size: 10vw !important;
    }
    h2{
        font-size: 7vw !important;
    }
    h3{
        font-size: 5vw !important;
    }
    p, li, a{
        font-size: 4vw !important;
    }
}
@media screen and (max-width: 1280px){
    section{
        margin: 15vw 0 0 0 !important;
    }
    .section1{
        max-height: 100% !important;
        position: relative;
        top: 0;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: 
            "gi gt";
        grid-gap: 0 2vw;
    }
    .gallery div{
        width: 18vw !important;
        height: 12vw !important;
    }  
}


/** ===== GRID ===== **/
.text{grid-area: gt;}
.img{grid-area: gi;}
.news h2{grid-area: n_h2;}
.n_text{grid-area: nt;}
.n_img{grid-area: ni;}
.f1{grid-area: f1;}
.f2{grid-area: f2;}
.f3{grid-area: f3;}
section{grid-area: section;}
.features{grid-area: features;}
.ui{grid-area: ui;}
.ui h2{grid-area: ui_h2;}
.ui img{grid-area: ui_img;}
.ui_ul{grid-area: ui_ul;}
.ui_ul2{grid-area: ui_ul2;}
.news{grid-area: news;}
.status{grid-area: status;}


/** ===== LINKS ===== **/
a{text-decoration: none;}
a:link{color: inherit;}  
a:visited{color: inherit;}
a:hover{color: inherit;}
a:active{color: inherit;}
i{color: #4caf50;}


/** ===== FONTS ===== */
h1{
    font-size: 3.5vw !important;
    margin: 0;
    padding: 10% 0 0 0;
}
h2{
    font-size: 2.5vw !important;
}
h3{
    font-size: 1.5vw !important;
}
p, li, a, n, i, u, ul, li, span, button{
    font-size: 1.2vw !important;
}
input, textarea{
    font-size: 0.9vw !important;
}