/* The HTML has the below CLASSES identified:

    HEADER
        profile = profile pic section   
        title = title header of page
        nav = navigation menu
        blogDescription = description of blog

    MAIN
        aboutMe = about who I am and my background
        Gallery = gallery section
        waterfall = waterfall gallery
        butterflies = butterfly gallery
        camping = camping gallery
        beach = beaches gallery


The HTML has the below ID identified: 

    HEADER
        profilePic = profile pic <img>
        description = anchor tag to link to the description section

    MAIN
        about = anchor tag to link to the about section
        gallery = anchor tag to link to the gallery section
        sfWaterfall = anchor tag to link to the SF Waterfall gallery section
        sfButterfly = anchor tag to link to the SF Butterfly gallery section
        campingSD = anchor tag to link to the Camping in SD gallery section
        jaxBeach = anchor tag to link to the Jacksonville Beach gallery section

*/


html {
    font-size: 16px;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/*.nosifer-regular {
    font-family: "Nosifer", sans-serif;
    font-weight: 400;
    font-style: normal;
  } */
 
body {
    /*background: rgb(214,20,214);*/
    background: linear-gradient(90deg, rgba(214,20,214,1) 0%, rgba(60,218,13,1) 23%, rgba(17,16,217,0.9051995798319328) 100%);
    padding: 20px;
    max-width: 100%;
    margin: 0 auto;
}

header section.profile #profilePic {
    /*position: absolute; top: 60px; left: 60px;
    /*This was what I was using prior to flexbox.  I did not want to delete it, so it has been commented out

    max-width: 100%;*/
    max-width: 100%;
    height: auto;
    width: auto\9; /*ie8*/
    /*border-width:10px;*/
    border-width: 10px;
    border-style:solid;
    border-radius: 50%;
    border-color: rgb(61, 10, 247);
    object-fit: cover;
}

header section.profile {
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

header section.title {
    display: block;
    max-width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

header section.nav h2{
    border: 0px;
}

h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-family: Nosifer;
    padding-bottom: 20px;
    /*text-decoration: underline solid red;*/
    /*line-height: 20px;*/
    text-decoration-thickness: 15px;
    /*max-width: 60%;*/
    text-align: center;
    margin-bottom: 0px;
}

h2 {
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    font-family: Nosifer;
}

h4 {
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    font-family: Nosifer;
    border: 0px;
    margin-top: 0px;
    color: red;
    margin-bottom: 20px;
}

header section.nav h2 {
    color: rgb(250, 3, 3);
}

header section.nav a {
    text-decoration: none;
    color: rgb(7, 26, 201);
    font-size: clamp(1rem, 3vw, 1.3rem);
    /*padding-bottom: 35px;*/
}


a:hover {
    background-color: rgba(207, 12, 175, 0.863);
    /*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19)*/
    transition-duration: 1s;
  }

h3 {
    font-size: clamp(1.1rem, 3.5vw, 1.5rem);
    .pacifico-regular {
        font-family: "Pacifico", cursive;
        font-weight: 400;
        font-style: normal;
      }
}

main section.butterflies h3 {
    padding-top: 30px;
}

main section.camping h3 {
    padding-top: 30px;
}

main section.beach h3 {
    padding-top: 30px;
}

/* Images - Mobile friendly */
img {
    max-width: 100%;
    height: auto;
}

/* Gallery sections */
main section.waterfall,
main section.butterflies,
main section.camping,
main section.beach {
    margin-bottom: 30px;
}

/* Image grid container */
main section.waterfall,
main section.butterflies,
main section.camping,
main section.beach {
    display: flex;
    flex-direction: column;
}

main section.waterfall > img,
main section.butterflies > img,
main section.camping > img,
main section.beach > img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

main section h3 {
    grid-column: 1 / -1;
}

/* Footer styling */
footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    font-size: clamp(0.8rem, 2vw, 1rem);
}

footer p {
    margin: 5px 0;
}

footer a {
    color: rgb(7, 26, 201);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Media queries for larger screens */
@media (min-width: 768px) {
    body {
        padding: 40px;
        max-width: 90%;
        margin: 0 auto;
    }

    header section.profile #profilePic {
        max-width: 250px;
    }

    /* 2 column grid for tablets */
    main section.waterfall,
    main section.camping,
    main section.beach {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    main section.waterfall > img,
    main section.camping > img,
    main section.beach > img {
        height: 350px;
        margin-bottom: 0;
    }

    main section.waterfall > h3,
    main section.camping > h3,
    main section.beach > h3 {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    body {
        padding: 80px;
        max-width: 1200px;
    }

    /* 3 column grid for desktop */
    main section.waterfall,
    main section.camping,
    main section.beach {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    main section.waterfall > img,
    main section.camping > img,
    main section.beach > img {
        height: 400px;
    }

    main section.waterfall > h3,
    main section.camping > h3,
    main section.beach > h3 {
        grid-column: 1 / -1;
    }

    /* Keep single column for sections with fewer images */
    main section.butterflies {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 600px;
    }

    main section.butterflies > img {
        height: auto;
    }

    main section.butterflies > h3 {
        grid-column: 1 / -1;
    }
}