/*COMMENTS FOR DELANEY
    -Nav color:#333;
    -Nav hover color: #4d4bbc;
    -h1 header-welcome, color: (76, 102, 115);
    -Body background color: (196, 213, 222);
    -Text color:(94, 52, 61) 
    -Poem color:rgb(99, 67, 67);
    -My name is..color: (204, 102, 30);
    -Border color: (61, 112, 151, 0.4)
    -Resume link color: (214, 101, 130)
    -ABOUT ME color:(41, 73, 88)
    -MY SKILLS:(41, 73, 88)
    -Click about color: (214, 101, 130)
    -Footer color: rgb(214, 101, 130);
    -Footer hover color: #4d4bbc;

    <h3 style="color:rgb(204, 102, 30);text-align:center;font-size: 50px;">
    Delaney Faulkner</h3>
    class="w3-container w3-center" 

    /* ALL PAGES */

        header/* navigation links */{
        background-color:#e78fa5;
        width:100%;
        padding: 10px;
        box-sizing:border-box;
        text-align: center;
        }

        .nav{
        font-size: 16px;
        color:#333;
        text-decoration: none;
        display:inline-block;
        margin-top:15px;
        margin-left:8px;
        transition: color 0.3s ease-in-out;
        }

        .nav:hover{
        color: #4d4bbc;
        text-decoration: underline;
        }

        .footer-a{
        color:rgb(99, 67, 67);
        font-size: 22px;
        padding:0;
        margin:0;
        text-decoration: none;
        transition: color 0.3s ease-in-out;
        }

        .footer-a:hover{
        color: #4d4bbc;
        text-decoration: underline;
        }

        .welcome /*Header text*/{
        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 4rem;
        text-align:center;
        color :rgb(96, 26, 27);
        }
         .header2/*text under the header, the econd header*/ {
        font-size: 22px;
        text-align:center;
        padding: 5px;
        padding-bottom:10px;
        color:rgb(96, 26, 27);
        }

  /* Page 1 HOME */

        .photo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 10px;
        padding: 10px;
        max-width:40%;
        padding-inline:15px;
        display:block;
        margin-left:auto;
        margin-right:auto;
        }

        .photo-grid img {
        width: 100%;
        height: 300px; 
        object-fit: cover;
        border-radius: 10px;
        }

        .about-grid-1{
        display: grid;
        gap: 20px;
        padding: 10px;
        }
        
        .about-grid-1 img {
        display:block;
        width: 100%;
        height: auto;
        object-fit: contain;
        background-color: rgb(128, 128, 128, 0.2);
        padding:15px;
        box-sizing: border-box;
        border-radius: 5px;
        }

        .skills {
        font-size: 20px; 
        color:rgb(94, 52, 61);
        }

        .resume-text{
        display: block;
        margin-left: auto;
        margin-right: auto;
        font-size:25px;
        padding: 10px;
        margin: 20px;
        color:rgb(214, 101, 130);
        text-align: center;
        }

        .resume-text:hover{
        color: #4d4bbc;
        text-decoration: underline;
        }

        .poem{
        color:rgb(99, 67, 67);
        font-size: 30px;
        padding: 20px;
        margin: 40px;
        text-align: center;
        background-color:rgb(231, 143, 165);
        }

        .about-me{
        font-size:25px;
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        }

        .dot{
        color:rgba(214, 101, 130);
        font-size:25px;
        text-decoration: none;
        display: inline-block;
        margin: 0 5px;
        padding: 0 4px;
        text-align: center;
        }

        .dot:hover{
        color: #4d4bbc;
        text-decoration: underline;
        }

        header {
        padding:8px;
        font-size:30px;
        }

        h3 {
        font-size:20px;
        color:rgb(94, 52, 61);
        }


        /* Page 2 ABOUT */

        .para{
            font-size: 22px;
            padding:20px;
            margin:10px;
        }

        .trip-pics{
            padding:20px;
            margin:10px;
            font-size:22px;
        }

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

        body{
            display:flex;
            flex-direction:column;
        }
      
        .wrapper{
            flex: 1 0 auto;
        }

        footer{
            flex-shrink: 0;
            text-align: center;
            padding: 30px 0;
            background-color: rgb(231, 143, 165);
            width: 100%;
            padding: 10px 0;
            margin-top: 60px;
        }

        footer a{
            font-weight: bold;
            transition: opacity 0.2 ease;
        }

        footer a:hover{
            opacity: 0.8;
        }

        header {
            padding:8px;
            font-size:30px;
        }

        .Delaney {
        text-align:center;
        padding-bottom:20px;
        color:rgb(96, 26, 27);
        }

        .descrip{
        font-size: 25px; 
         color:rgb(41, 73, 88);
         text-decoration: underline;
         padding:10px;
         margin:5px;
        }

        .dot {
        text-decoration: underline;
        }

        /*p {
        font-size:25px;
        }*/
        
        .skills{
        font-size:20px;color:rgb(94, 52, 61)
        }

        .about-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
        gap: 20px;
        padding: 10px;
        }
        
        .about-grid img {
        display:block;
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        object-fit: contain;
        background-color: rgb(128, 128, 128, 0.2);
        padding:15px;
        box-sizing: border-box;
        border-radius: 10px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        /*
        .about-grid:hover img{
            opacity: 0.3;
            transform: scale(1.02);
        }

        .name-overlay{
            position:absolute;
            padding:15px;
            background-color: rgba(96, 26, 27, 0.85);
            color:white;
            display:flex;
            justify-content:center;
            align-items:center;
            font-size:24px;
            font-weight:bold;
            border-radius:10px;
            opacity:0;
            pointer-events:none;
            transition: opacity 0.3s ease;
        }

        .about-grid > div:hover img{
            opacity: 0.3;
            transform:scale(1.02);
        }

        .about-grid > div:hover .name-overlay{
            opacity:1;
        }
            */

        /* Page 3 CONTACT */

        .emailbutton{
            font-size:20px;
            padding:5px;
            margin:10px;
        }

        .emailbutton:hover{
            box-shadow:0 8px 16px 0 rgba(0,0,0,0.6)
        }

        .emailbutton2{
            font-size: 20px;
            background-color:rgb(214, 101, 130);
            color:white;
            padding:5px;
            margin:10px;
        }

        .emailbutton2:hover{
            box-shadow:0 8px 16px 0 rgba(0,0,0,0.6)
        }
        .ppage3{
        text-align:center;
        font-size:4rem;
        padding:10px;
        margin:10px;
        color:rgb(96, 26, 27);
        }

        .questions{
            margin:10px;
            padding:10px;
            font-size: 22px;
        }


        /* Page 4 ART*/
        

        .art-grid4{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
        gap: 20px;
        padding: 10px;
        }

        .art-grid4 img {
        display:block;
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        object-fit: contain;
        background-color: rgb(128, 128, 128, 0.2);
        padding:15px;
        box-sizing: border-box;
        border-radius: 10px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .art-grid4 img{
        display: block;
        width:80%;
        height:auto;
        margin-bottom:15px;
        }

        .ppage4{
        font-size:4rem;
        text-align:center;
        color :rgb(96, 26, 27);
        }

        /* Page 5 PHOTOGRAPHY */
        
        .ppage5{
        font-size:4rem;
        text-align:center;
        color :rgb(96, 26, 27);
        }

        .art-grid5{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
        gap: 20px;
        padding: 10px;
        }

        .art-grid5 img {
        display:block;
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        object-fit: contain;
        background-color: rgb(128, 128, 128, 0.2);
        padding:15px;
        box-sizing: border-box;
        border-radius: 10px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .art-grid5 img{
            display: block;
            width:80%;
            height:auto;
            margin-bottom:15px;
        }


        /* Page 6 TRADITIONAL ART */

        .ppage6{
        font-size:4rem;
        text-align:center;
        color :rgb(96, 26, 27);
        }

        .art-grid6{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
        gap: 20px;
        padding: 10px;
        }

        .art-grid6 img {
        display:block;
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        object-fit: contain;
        background-color: rgb(128, 128, 128, 0.2);
        padding:15px;
        box-sizing: border-box;
        border-radius: 10px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .art-grid6 img{
            display: block;
            width:80%;
            height:auto;
            margin-bottom:15px;
        }