/* Base styles */
body {
    background-color: rgb(231, 197, 197);
    
    }
    .headerContainer a {
    color: rgb(142, 61, 58);
    text-decoration: none;
    }
    .navbar a:link {
        color: rgb(83, 4, 4);
        text-decoration: none;
    }
    

  /* Common styles */
    .headerContainer {
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    }
    
  /* Desktop styles */
    @media only screen and (min-width: 600px) {
    .header,
    .subtitle {
        display: flex;
        font-family: "Montserrat";
        font-weight: 900;        
        color: rgb(142, 61, 58);
        justify-content: center;
        margin: auto;
        font-size: xx-large;
        text-shadow:  1px 1px 2px rgba(83, 4, 4, 0.235);
    }
    .header{
        transition: 0.3s;
    }
    .header:hover{
        scale: 110%;
        transition: 0.4s;
    }
    .motto {
        display: flex;
        font-size: 30px;
        font-family: "Montserrat", sans-serif;
        font-style: italic;
        font-weight: 700;
        justify-content: center;
        color: rgb(142, 61, 58);
        text-align: center;
    }
    
    /* Navigation bar */
    .navbar {
        display: flex;
        background-color: rgb(204, 153, 153);
        justify-content: center;
        font-family: "Nunito";
        border-radius: 8px;
        text-decoration: none;

    }
    
    .navbar a {
        color: rgb(83, 4, 4);
        padding: 14px 20px;
        text-decoration: none;
        text-align: center;
        font-family: "Nunito";
    }
    
    .navbar a:hover {
    background-color: #ddd;
    color: black;
    font-family: "Nunito";
    transition: 0.3s;
    }
    
    /* Main content */
    .mainStuff {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    padding: 20px;
    color: rgb(83, 4, 4);
    border-radius: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .h2 {
    font-family: "Montserrat";
    font-size: x-large;
    color: rgb(142, 61, 58);
    padding-left: 20px;
    font-weight: bold;
    text-shadow:  1px 1px 2px rgba(83, 4, 4, 0.235);

    }
    .textGrid {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto auto;
        max-width: 75%;
    .introBody {
    display: grid;
    font-size: larger;
    text-align: center;
    font-family: "Nunito";
    max-width: auto;
    grid-row: 1;
    }
    .mainBody1 {
        display: grid;
        font-size: larger;
        text-align: center;
        font-family: "Nunito";
        grid-row: 2;
    }
    .mainBody2 {
        display: grid;
        font-size: larger;
        text-align: center;
        font-family: "Nunito";
        grid-row: 3;

    }
    .mainBody3 {
        display: grid;
        font-size: larger;
        justify-content: center;
        font-family: "Nunito";
    }
    }
    .profilePicture {
        display: flex;
        justify-content: center;
    }

    /* Footer */
    .footer {
        padding: 20px;
        text-align: center;
        background-color: rgb(204, 153, 153);
        border-radius: 8px;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        border-right: 1px solid rgba(255, 255, 255, 0.3);
    }

    .footerText {
        font-family: "montserrat";
        font-size: 14px;
        color: rgb(142, 61, 58);
        text-align: center;
    }
    }

    /* Mobile styles */
    @media only screen and (max-width: 600px) {
    .header {
        display: flex;
        font-family: "Montserrat";
        color: rgb(142, 61, 58);
        justify-content: center;
        margin: auto;
        font-size: 20px;
        text-shadow:  1px 1px 2px rgba(83, 4, 4, 0.235);

    }

    .subtitle {
        display: flex;
        font-family: 'Montserrat';
        color: rgb(142, 61, 58);
        justify-content: center;
        margin: auto;
        font-size: large;
        text-shadow:  1px 1px 2px rgba(83, 4, 4, 0.235);

    }

    .motto {
        display: flex;
        font-size: 20px;
        font-family: "Montserrat";
        font-style: italic;
        justify-content: center;
        color: rgb(142, 61, 58);
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    /* Navigation bar */
    .navbar {
        display: flex;
        background-color: rgb(204, 153, 153);
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
        border-radius: 8px;
        font-family: "nunito";
        text-decoration: none;
    }

    .navbar a {
        color: rgb(83, 4, 4);
        padding: 10px 10px;
        text-decoration: none;
        text-align: center;
    }

    .navbar a:hover {
        background-color: #ddd;
        color: black;
    }

    /* Main content */
    .mainStuff {
        background-color: rgb(245, 220, 220);
        padding: 20px;
        font-family: "nunito";
        color: rgb(83, 4, 4);
        border-radius: 8px;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        border-right: 1px solid rgba(255, 255, 255, 0.3);
    }

    .h2 {
        font-family: "Montserrat";
        font-weight: bold;
        font-size: larger;
        color: rgb(142, 61, 58);
        display: flex;
        justify-content: center;
        text-shadow:  1px 1px 2px rgba(83, 4, 4, 0.235);

    }

    .introBody {
        font-size: medium;
        justify-content: center;
        font-family: "nunito";
    }
    .mainBody1 {
        display: flex;
        font-size: medium;
        justify-content: center;
        font-family: "nunito";
    }
    .mainBody2 {
        display: flex;
        font-size: medium;
        justify-content: center;
        font-family: "nunito";
    }
    .mainBody3 {
        display: flex;
        font-size: medium;
        justify-content: center;
        font-family: "nunito";
    }

    .profilePicture {
        display: flex;
        justify-content: center;

    }

    /* Footer */
    .footer {
        padding: 20px;
        text-align: center;
        background-color: rgb(204, 153, 153);
        border-radius: 8px;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        border-right: 1px solid rgba(255, 255, 255, 0.3);
    }

    .footerText {
        font-family: "Montserrat";
        font-size: 14px;
        color: rgb(142, 61, 58);
        text-align: center;
    }
    }

    @media only screen and (max-width: 400px) {
    .header {
        display: flex;
        font-family: "montserrat";
        color: rgb(142, 61, 58);
        justify-content: center;
        margin: auto;
        font-size: 14px;
        text-shadow:  1px 1px 2px rgba(83, 4, 4, 0.235);

        }

    .subtitle {
        display: flex;
        font-family: "Montserrat";
        color: rgb(142, 61, 58);
        justify-content: center;
        margin: auto;
        font-size: large;
    }

    .motto {
        display: flex;
        font-size: larger;
        font-family: 'Montserrat';
        font-style: italic;
        justify-content: center;
        color: rgb(142, 61, 58);
        text-align: center;
    }

    /* Navigation bar */
    .navbar {
        display: flex;
        background-color: rgb(204, 153, 153);
        justify-content: center;
        font-size: 11px;
        font-weight: bold;
        border-radius: 8px;
        font-family: "nunito";
        text-decoration: none;
    }

    .navbar a {
        color: rgb(83, 4, 4);
        padding: 12px 8px;
        text-decoration: none;
        text-align: center;
    }

    .navbar a:hover {
        background-color: #ddd;
        color: black;

    }

    /* Main content */
    .mainStuff {
        background: rgba(255, 255, 255, 0.5);
        padding: 20px;
        font-family: "Montserrat";
        color: rgb(83, 4, 4);
        border-radius: 8px;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        border-right: 1px solid rgba(255, 255, 255, 0.3);
    }

    .h2 {
        display: flex;
        font-family: "Montserrat";
        font-size: larger;
        color: rgb(142, 61, 58);
        justify-content: center;
        font-weight: bold;
        text-shadow:  1px 1px 2px rgba(83, 4, 4, 0.235);

    }

    .introBody {
        font-size: medium;
        justify-content: center;
        font-family: "nunito";
    }
    .mainBody1 {
        display: flex;
        font-size: medium;
        justify-content: center;
        font-family: "nunito";
    }
    .mainBody2 {
        display: flex;
        font-size: medium;
        justify-content: center;
        font-family: "nunito";
    }
    .mainBody3 {
        display: flex;
        font-size: medium;
        justify-content: center;
        font-family: "nunito";
    }
    .profilePicture {
        display: flex;
        justify-content: center;
    }


    /* Footer */
    .footer {
        padding: 20px;
        text-align: center;
        background-color: rgb(204, 153, 153);
        border-radius: 8px;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        border-right: 1px solid rgba(255, 255, 255, 0.3);
    }

    .footerText {
        font-family: 'Montserrat';
        font-size: 14px;
        color: rgb(142, 61, 58);
        text-align: center;
    }
    }
/*image gallery*/

/*desktop*/
@media only screen and (min-width: 600px) {
.imageGallery {
    position: relative;
align-content: center;
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto;
}
.imgDescription {
    z-index: 2000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(29, 106, 154, 0.72);
    color: #fff;
    visibility: hidden;
    opacity: 0;
}
.galleryRow {
display: grid;
scale: 100%;
height: auto;
transition: 0.5s;
padding: 0 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
    .image1 {
        grid-column: 1; 
    }
    .image2{
        grid-column: 2;
    }
    .image3{
        grid-column: 3;
    }

.galleryColumn {
    display: grid;
    grid-row: 2;
    margin-left: auto;
    margin-right: auto;
    max-width: 65%;
    transition: 0.5s;
    padding: 0 20px;
    text-align: center;
}

.galleryColumn img {
    margin-top: 20px;
    max-width: 75%;
    border-radius: 8px;
    border-left: 4px solid rgb(204, 153, 153);
    border-right: 4px solid rgb(204, 153, 153);
    border-top: 4px solid rgb(204, 153, 153);
    border-bottom: 4px solid rgb(204, 153, 153);
    box-shadow:  2px 2px 4px rgba(83, 4, 4, 0.235);

}
.galleryRow img {
    margin-top: 8px;
    margin-left: 16px;
    max-width: 75%;
    justify-content: center;
    border-radius: 8px;
    border-left: 4px solid rgb(204, 153, 153);
    border-right: 4px solid rgb(204, 153, 153);
    border-top: 4px solid rgb(204, 153, 153);
    border-bottom: 4px solid rgb(204, 153, 153);
    box-shadow:  2px 2px 4px rgba(83, 4, 4, 0.235);

    
}
.galleryRow img:hover {
    z-index: 1000;
    transition: 0.5s;
    transform: scale(1.05);
}
.galleryRow img:hover + .imgDescription {
    visibility: visible;
    opacity: 1;
    z-index: 2000;

}

.galleryColumn img:hover {
    z-index: 1000;
    transition: 0.5s;
    transform: scale(1.05);
}
.galleryColumn img:hover + .imgDescription1 {
    visibility: visible;
    opacity: 1;
    z-index: 2000;

}
}
/*mobile size M&L*/
@media only screen and (max-width: 600px) {
    .imageGallery {
    align-content: center;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;
    text-align: center;
    }

    .galleryRow {
        display: grid;
        scale: 100%;
        height: auto;
        transition: 0.5s;
        padding: 0 20px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        }
            .image1 {
                grid-column: 1;
                grid-row: 1;
            }
            .image2{
                grid-column: 1;
                grid-row: 2;
            }
            .image3{
                grid-column: 1;
                grid-row: 3;
            }
    
            .galleryColumn {
                display: grid;
                grid-row: 4;
                grid-column: 1;
                margin-left: auto;
                margin-right: auto;
                scale: 0.9;
                transition: 0.5s;
                padding: 0 20px;
                text-align: center;
            }
    .galleryColumn img {
        margin-top: 8px;
        vertical-align: middle;
        width: 200px;
        justify-content: center;
        border-radius: 8px;
        border-left: 4px solid rgb(204, 153, 153);
        border-right: 4px solid rgb(204, 153, 153);
        border-top: 4px solid rgb(204, 153, 153);
        border-bottom: 4px solid rgb(204, 153, 153);
    }
    .galleryColumn img:hover{
        z-index: 1000;
        transition: 0.5s;
        transform: scale(1.1);
    }
    
    .galleryRow img {
        margin-top: 8px;
        width: 200px;
        height: auto;
        justify-content: center;
        border-radius: 8px;
        border-left: 4px solid rgb(204, 153, 153);
        border-right: 4px solid rgb(204, 153, 153);
        border-top: 4px solid rgb(204, 153, 153);
        border-bottom: 4px solid rgb(204, 153, 153);
        margin-left: 10px;
        margin-right: 10px;
    }
    .galleryRow img:hover {
        z-index: 1000;
        transition: 0.5s;
        transform: scale(1.5);
    }
}
/*mobile size S*/
@media only screen and (max-width: 400px) {
    .imageGallery {
        align-content: center;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto;
        text-align: center;
        }
    
        .galleryRow {
            display: grid;
            scale: 100%;
            height: auto;
            transition: 0.5s;
            padding: 0 20px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            }
                .image1 {
                    grid-column: 1;
                    grid-row: 1;
                }
                .image2{
                    grid-column: 1;
                    grid-row: 2;
                }
                .image3{
                    grid-column: 1;
                    grid-row: 3;
                }
        
                .galleryColumn {
                    display: grid;
                    grid-row: 4;
                    grid-column: 1;
                    margin-left: auto;
                    margin-right: auto;
                    transition: 0.5s;
                    padding: 0 20px;
                    text-align: center;
                }
    .galleryColumn img {
        margin-top: 8px;
        vertical-align: middle;
        border-radius: 8px;
        border-left: 4px solid rgb(204, 153, 153);
        border-right: 4px solid rgb(204, 153, 153);
        border-top: 4px solid rgb(204, 153, 153);
        border-bottom: 4px solid rgb(204, 153, 153);
        text-align: center;
        justify-content: center;
        width: 200px;
    }
    .galleryColumn img:hover{
        z-index: 1000;
        transition: 0.5s;
        transform: scale(1.05);
    }
    
    .galleryRow img {
        margin-top: 8px;
        width: 200px;
        height: auto;
        justify-content: left;
        border-radius: 8px;
        border-left: 4px solid rgb(204, 153, 153);
        border-right: 4px solid rgb(204, 153, 153);
        border-top: 4px solid rgb(204, 153, 153);
        border-bottom: 4px solid rgb(204, 153, 153);
    }
    .galleryRow img:hover {
        z-index: 1000;
        transition: 0.5s;
        transform: scale(1.05);
    }

}