/* Make images responsive */

img {
    max-width: 100%;
}


/* Control the width of the page */

body {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 40rem;
}


/* Default font size */

html {
    font-size: 12pt;
}


/* Change styles when the screen is at least 640px wide */

@media (min-width: 640px) {

    html {
        font-size: 16pt;
    }

}


/* Make the two boxes sit next to each other on larger screens */

@media (min-width: 640px) {

    .two-columns-example {
        display: flex;
    }

    .two-columns-example > * {
        width: 50%;
    }

}