html, body {
    background-color: hsl(233, 47%, 7%);
    height:100%;
    font-size:16px;
}

.container-fluid {
    height:100%;   
}

.MainContentArea {
    background-color: hsl(244, 38%, 16%);   
}

.mainContent {
    background-color: hsl(244, 38%, 16%); 
    font-size: 1.25rem; 
    color:hsla(0, 0%, 100%, 0.75);

}

h2 {
    color:hsl(0, 0%, 100%);
    font-family: "Inter", sans-serif;
    font-weight: 700;  
    margin:0px;
    padding:0px;

}

p {
    margin:0px;
    padding:0px;
}

.standout {
    color:hsl(277, 64%, 61%);
}

.statHeadings {
    color:hsl(0, 0%, 100%);
    font-size:15px;
    font-family: "Inter", sans-serif;
    font-weight:700;
}

.statContent {
    color:hsla(0, 0%, 100%, 0.6);
    font-size:12px;
    font-family: "Inter", sans-serif;
}

.img-box {
    background-color:hsl(277, 64%, 61%);
    
}

@media (min-width:576px) and (max-width:825px) {
    .statContent {
        font-size:0.6rem;
    }
}

@media (min-width:1200px) {
    .statHeadings {
        font-size:1.5rem;
    }
}

@media (max-width:576px) {
    .statHeadings {
        font-size:1.125rem;
    }
}

@media (min-width:0px) and (max-width:576px) {
    .MainContentArea {
        height: 66.67% !important;
    }

    .img-box {
        height:33.33% !important;
    }
}


@media (min-width:576px) and (max-width:768px) {
    .MainContentArea {
        height:75% !important;
    }

    .img-box {
        height:75% !important;
    }
}

@media (min-width:768px) {
    .MainContentArea {
        height:65% !important;
    }

    .img-box {
        height:65% !important;
    }
}

@media (min-width:768px) and (max-height:400px) {
    .MainContentArea {
        height:95%;
    }

    .img-box {
        height:95%;
    }
    h2 {
        font-size:1.25rem;
    }

    .mainContent {
        font-size:0.8rem;
    }

    
}