index.css

/* This css file contains global style that can be used by all components */

body {
    font-family: 'Open Sans', sans-serif;
}

/* Images are always scaled to occupy available space, so use external divs to change size */
img {
    width: 100%;
    height: 100%;
}

/* Always leaving some space before and after a horizontal line */
/* For small display */
@media only screen and (min-width: 768px) {
    hr {
        margin: 15% 0 15% 0;
    }
}

/* For large display */
@media only screen and (min-width: 1200px) {
    hr {
        margin: 8% 0 8% 0;
    }
}


/* CUSTOM SCROLLBAR */
::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

::-webkit-scrollbar-track {
    background-color: white;
}

::-webkit-scrollbar-thumb {
    background-color: lightgray;
}

::-webkit-scrollbar-thumb:hover {
    background-color: gray;
}


/* BACKGROUND DIV */
/* This reppresents the background div that stretches across the whole page, except navbar */
/* For small display */
@media only screen and (min-width: 768px) {
    .background-div {
        margin: 2%;
    }
}

/* For Large display */
@media only screen and (min-width: 1200px) {
    .background-div {
        margin: 8%;
    }
}

/* SUB HEADING */
/* For all screen sizes */
.sub-heading {
    font-weight: 700;
    margin: 2% 1% 2% 1%;
}

/* For small displays */
@media only screen and (min-width: 768px) {
    .sub-heading {
        font-size: 45px;
    }
}

/* For large displays */
@media only screen and (min-width: 1200px) {
    .sub-heading {
        font-size: 25px;
    }
}