/* Main Section */
main {
    margin-top: 60px;
    z-index: 1;
    padding: 0;
}
h1 {
    padding: 5px 0px 5px 10px;
    text-align: center;
}
img {
    width: 100%; 
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

/* Small screens (Mobile) */
@media only screen and (max-width: 600px) {
    /* Articles */
    article {
        display: flex;
        flex-direction: column;
        margin: auto;
        width: 90%;
    }

    #para1 {
        width: 100%;
        order: 2;
        margin: 0px 0px 10% 0px;
        padding: 20px;
        background: linear-gradient(to bottom, #e0f7fa, #b3e5fc, #81d4fa);
        visibility: hidden;
    }
    #pic1 {
        width: 100%; 
        height: 250px;
        margin: 0;
        padding: 0;
        order: 1;
        visibility: hidden;
    }

    #pic2 {
        width: 100%; 
        height: 250px;
        margin: 0;
        padding: 0;
        visibility: hidden;
    }
    #para2 {
        width: 100%;
        margin: 0px 0px 10% 0px;
        padding: 20px;
        background: linear-gradient(to bottom, #e0f7fa, #b3e5fc, #81d4fa);
        visibility: hidden;
    }

    #para3 {
        width: 100%;
        order: 2;
        margin: 0px 0px 10% 0px;
        padding: 20px;
        background: linear-gradient(to bottom, #e0f7fa, #b3e5fc, #81d4fa);
        visibility: hidden;
    }
    #pic3 {
        width: 100%; 
        height: 250px;
        margin: 0;
        padding: 0;
        order: 1;
        visibility: hidden;
    }

    #para4 {
        width: 100%;
        margin: 0px 0px 10% 0px;
        padding: 20px;
        background: linear-gradient(to bottom, #e0f7fa, #b3e5fc, #81d4fa);
        visibility: hidden;
    }
    #pic4 {
        width: 100%; 
        height: 250px;
        margin: 0;
        padding: 0;
        visibility: hidden;
    }
}

/* Medium screens (Tablets) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    /* Articles */
    article {
        display: flex;
        flex-direction: column;
        margin: auto;
        width: 550px;
    }

    #para1 {
        width: 100%;
        order: 2;
        margin: 0px 0px 10% 0px;
        padding: 20px;
        background: linear-gradient(to bottom, #e0f7fa, #b3e5fc, #81d4fa);
        visibility: hidden;
    }
    #pic1 {
        width: 550px; 
        height: 350px;
        margin: 0;
        padding: 0;
        order: 1;
        visibility: hidden;
    }

    #pic2 {
        width: 550px; 
        height: 350px;
        margin: 0;
        padding: 0;
        visibility: hidden;
    }
    #para2 {
        width: 100%;
        margin: 0px 0px 10% 0px;
        padding: 20px;
        background: linear-gradient(to bottom, #e0f7fa, #b3e5fc, #81d4fa);
        visibility: hidden;
    }

    #para3 {
        width: 100%;
        order: 2;
        margin: 0px 0px 10% 0px;
        padding: 20px;
        background: linear-gradient(to bottom, #e0f7fa, #b3e5fc, #81d4fa);
        visibility: hidden;
    }
    #pic3 {
        width: 550px; 
        height: 350px;
        margin: 0;
        padding: 0;
        order: 1;
        visibility: hidden;
    }

    #para4 {
        width: 100%;
        margin: 0px 0px 10% 0px;
        padding: 20px;
        background: linear-gradient(to bottom, #e0f7fa, #b3e5fc, #81d4fa);
        visibility: hidden;
    }
    #pic4 {
        width: 550px; 
        height: 370px;
        margin: 0;
        padding: 0;
        visibility: hidden;
    }
}

/* Large screens (Desktops) */
@media only screen and (min-width: 1025px) {
    /* Articles */
    article {
        display: flex;
        flex-direction: row;
        margin: 10px auto 5% auto;
        padding: 0;
        width: 80%;
        overflow: hidden;
    }

    #para1 {
        width: 50%;
        order: 1;
        margin: auto 0px auto 0px;
        padding: 20px;
        background: linear-gradient(to bottom, #e0f7fa, #b3e5fc, #81d4fa);
        visibility: hidden;
    }
    #pic1 {
        width: 300px; 
        height: 450px;
        margin: 0;
        padding: 0;
        order: 2;
        visibility: hidden;
    }

    #pic2 {
        width: 500px; 
        height: 281px;
        margin: 0;
        padding: 0;
        visibility: hidden;
    }
    #para2 {
        width: 50%;
        margin: auto 0px auto 0px;
        padding: 20px;
        background: linear-gradient(to bottom, #e0f7fa, #b3e5fc, #81d4fa);
        visibility: hidden;
    }

    #para3 {
        width: 50%;
        order: 1;
        margin: auto 0px auto 0px;
        padding: 20px;
        background: linear-gradient(to bottom, #e0f7fa, #b3e5fc, #81d4fa);
        visibility: hidden;
    }
    #pic3 {
        width: 500px; 
        height: 333px;
        margin: 0;
        padding: 0;
        order: 2;
        visibility: hidden;
    }

    #para4 {
        width: 50%;
        padding: 20px;
        background: linear-gradient(to bottom, #e0f7fa, #b3e5fc, #81d4fa);
        visibility: hidden;
    }
    #pic4 {
        width: 386px; 
        height: 260px;
        margin: auto 0px auto 0px;
        padding: 0;
        visibility: hidden;
    }
}