/*MAIN*/
html, body {
    height: 100%;
    margin: 0;
}

/*SECTION 1*/
main {
    display: flex;
    height: 92vh;
}

    section:first-child {
        flex-grow: 4;
    }

    #job {
        font: italic normal clamp(50px, 6vw, 150px) Ubuntu;
        text-align: center;
    }

    #name {
        font: normal bold clamp(40px, 4vw, 120px) Ubuntu;
        text-align: right;
        padding-right: 5%;
        margin-top: -5%;
    }
    /*MA PHOTO*/
    section:last-child {
        text-align: center;
        width: min-content;
    }

    #ma_photo {
        width: min-content;
        height: 92vh;
    }


/*RESPONSIVENESS*/
@media (max-width: 700px), (max-height: 780px) {
    main {
        height: auto;
        flex-direction: column;
    }
    #job {
        font-size: clamp(25px, 9vw, 90px);
        margin-top: 5%;
    }
    #name {
        font-size: clamp(20px, 6vw, 80px)
    }
    #section:last-child {
        width: auto;
    }
    #ma_photo {
        object-fit: contain;
        max-width: 100%;
        height: auto;
    }
}