/* responsive.css - Add this file to your project and include it in all HTML files */

/* Global responsive styles */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* Small mobile devices (up to 576px) */
@media screen and (max-width: 576px) {

    /* Index page */
    .header {
        flex-direction: column;
        height: 100vh;
        justify-content: center;
        position: relative;
        z-index: 10;
    }

    .summary {
        margin-left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        text-align: center;
        position: absolute;
        top: 5vh;
    }

    .summarytxt {
        font-size: 6vw;
        text-align: center;
    }

    .nav {
        margin-right: 0;
        width: 100%;
        justify-content: center;
        gap: 0;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 47vh;
        transform: translateY(-50%);
    }

    .aboutButton, .contactButton {
        font-size: 7vw;
        padding: 3vh;
        margin: 3vh 0;
    }

    .name {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        height: 88vh;
        max-height: initial;
        z-index: 5;
        margin-top: -102vh; /* Negative margin to pull it up */
        margin-bottom: 30vh;
    }

    .nametxt {
        font-size: 15vw;
    }

    .art, .psychiatry {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
        padding: 20px 0;
    }

    .psychiatry {
        margin-top: 50px;
    }

    .imgContainer {
        height: auto;
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 12vh 0;
    }

    .img1, .img2, .img3, .img4 {
        margin: 0;
        width: 90%;
        height: auto;
        float: none;
    }

    .arttxtContainer, .psychiatrytxtContainer {
        height: auto;
    }

    .pageTitleText {
        font-size: 15vw;
        text-align: center;
        margin-bottom: 0;
    }

    .ctpText, .ctpText2 {
        width: 100%;
        font-size: 4vw;
        text-align: center;
        margin-top: 0;
        margin-bottom: 7vh;
    }

    /* About page */
    .aboutbody .header {
        height: 15vh;
        margin-left: 0;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        position: relative;
    }

    .aboutbody .backarrow {
        margin-left: 6vw;
        margin-top: 2vh;
        font-size: 30px;
    }

    .aboutPara {
        width: 75vw;
        padding-top: 2vh;
    }

    .aboutParaTxt {
        font-size: 1.5rem;
        line-height: 1.5;
    }

    /* Art page */
    body.art .header {
        height: 10vh;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        margin-left: 0;
        position: relative;
    }

    body.art .backarrow {
        margin-left: 5vw;
        margin-top: 2vh;
        margin-right: auto;
        font-size: 30px;
        display: block;
        float: left;
    }

    body.art .nav {
        position: static;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 2vh;
        justify-content: center;
        gap: 20px;
    }

    body.art .navButton {
        font-size: 1.75rem;
        margin: 0;
        padding: 5px 10px;
    }

    body.art .cv-link {
        font-size: 1.75rem;
    }


    /* Contact page */
    .contact .header {
        height: 15vh;
        margin-left: 0;
    }

    .contact .backarrow {
        margin-left: 6vw;
        margin-top: 2vh;
        font-size: 30px;
    }


}

/* Medium devices (tablets, 577px to 768px) */
@media screen and (min-width: 577px) and (max-width: 768px) {
    /* Index page */
    .summarytxt {
        font-size: 4vw;
    }

    .nav {
        gap: 0 5vw;
    }

    .name {
        height: 60vh;
        margin-top: -15vh;
    }

    .nametxt {
        font-size: 16vw;
    }

    .img1, .img2, .img3, .img4 {
        width: 45vw;
        height: auto;
        margin: 4vh;
    }

    .art, .psychiatry {
        height: auto;
    }

    .psychiatry {
        margin-top: 10vh;
    }

    /* About page */
    .aboutTxt {
        font-size: 30px;
    }

    .aboutParaTxt {
        font-size: 10px;
    }

    /* Art page */
    .image {
        width: 30vw;
    }

    .thumbnail-container {
        width: 30vw;
        height: 20vh;
    }

    /* Contact page */
    .form {
        width: 70vw;
    }
}

/* Large devices (laptops/desktops, 769px to 992px) */
@media screen and (min-width: 769px) and (max-width: 992px) {
    .img1, .img2, .img3, .img4 {
        width: 40vw;
        height: auto;
    }

    .psychiatry {
        margin-top: 80vh;
    }

    .form {
        width: 60vw;
    }
}

/* Fix specific layout issues */
@media screen and (max-width: 992px) {
    .body {
        height: auto;
    }

    .imgContainer {
        height: auto;
    }
}

/* Make the Header stick properly on mobile */
@media screen and (max-width: 576px) {
    .header {
        position: relative;
    }
}