/* ##################################################################### */
/* #                            DESKTOP                                # */
/* ##################################################################### */
/* body {
    background-color: rgb(232, 238, 247);
} */
.content {
    background-color: white;
    margin-top: 20px;
	grid-area: box3;
    /* width: 1540px; */
    width: 80%;
    padding: 50px;
    justify-content: center;
	justify-self: center;
}
/* .content div {
    padding-left: 50px;
    padding-right: 50px;
} */

.pageTitle {
	font-size: 50px;
	justify-self: center;
	font-family: 'Times New Roman';
	text-align: center;
}

.content h2 {
	margin-top: 30px;
	font-size: 30px;
	margin-bottom: 10px;
	text-decoration: underline;
}

.text1, .text2, .text3, .text4{
    font-size: 20px;
    text-align: justify;
    font-family: "Roboto", sans-serif;
    width: 75%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    
}

.pic1, .pic2, .pic3, .pic4{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
}

/* ##################################################################### */
/* #                              MOBILE                               # */
/* ##################################################################### */
@media only screen and (max-width: 824px) {
	.content {
        grid-area: box3;
        padding: 0px;
        width: 95%;
	}

    .pageTitle {
        padding: 5px;
        font-size: 30px;
    }

    .content h2 {
        padding: 5px;
        font-size: 20px;
    }

    .text1, .text2, .text3, .text4{
        padding: 10px;
        font-size: 15px;
    }
    
    .pic1, .pic2, .pic3, .pic4 {
        width: 97%;
        height: auto;
    }
}