body {
    background-color: #F6F6F6;
}
main {
    width: 30%;
    min-height: 100vh;
    margin-top: 40px;
    margin-left: 15%;
    color: black;
    h1 {
        font-size: 50px;
        margin-bottom: 40px;
        color: #4E3A3C;
    }
    h2 {
        color: #4E3A3C;
        margin-bottom: 20px;
    }
    .bg {
        position: absolute;
        width: 100%;
        right: 0;
        margin-top: -40px;
        z-index: -2;
    }
    #background2 {
        display: none;
    }
    #text {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
}

@media only screen and (max-width: 1050px) {
    main {
        width: 50%;
        margin-left: 40px;
    }
}
@media only screen and (max-width: 800px) {
    main {
        position: relative;
        width: calc(100% - 40px);
        #text {
            width: calc(100% - 40px);
        }
        .bg {
            bottom: 0px;
        }
        #background1 { display: none; }
        #background2 { display: block; }
    }
}