*, *::before, *::after {
  box-sizing: border-box;          
  margin: 0;                       
  padding: 0;
}



:root {
        --max-width:      clamp(320px, 90vw, 100%);
        --font-size-base: clamp(18px, 2.5vw + 0.5rem, 22px);
        --font-size-h1:   clamp(2rem, 6vw + 1rem, 4rem);
        --font-size-h2:   clamp(1.6rem, 5vw + 0.8rem, 3rem);
        --spacing-sm:     clamp(0.5rem, 2vw, 1rem);
        --spacing-md:     clamp(1rem, 4vw, 2rem);
        --spacing-lg:     clamp(2rem, 6vw, 4rem);
        --sprucePine: #003a00; 
        --bluegrass: #005500;
        --kentuckyNight: #000d08;
        --mountainFog: #f0fff8; 
        --stormCloud: #333849;
        --blueRidgeParkway: #002167;
        --midnightBlue: #0d0033;
        --marianaTrench: #00001a;
        --starLight: #e1ceff;    
    }



/* Base styles - mobile first*/
/* Layout containers and common elements*/

            h1 {
                font-size: var(--font-size-h1);
                margin-bottom: var(--spacing-sm);
                padding: var(--spacing-sm);
            }

            h2 {
                font-size: var(--font-size-h2);
                margin-bottom: var(--spacing-sm);
                padding: var(--spacing-sm);
            }

            h3 {
                font-size: 1.5rem;
                margin-bottom: var(--spacing-sm);
            }

            p {
                font-size: 1rem;
                margin: var(--spacing-sm) 0;
            } 

            a {
                color: var(--mountainFog);              
                text-decoration: none;  
            }


html {
  font-size: var(--font-size-base); 
  scroll-behavior: smooth;         
  scroll-padding-top: 5rem;        
}

.body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--mountainFog);
  background-color: var(--midnightBlue); /* fallback solid color when image fails */

  /* Multiple backgrounds: gradient ON TOP of image */
  background-image: url('../media/many-glacier-night-sky.jpeg');

  background-size:     cover;     /* both layers cover */
  background-position: center bottom;  /* adjust as needed */
  background-repeat:   no-repeat;
  background-attachment: fixed;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  line-height: 1.5;
  min-height: 100vh;
  max-width: 100dvw;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
    

    .header {
        width: 100%;
        height: fit-content + 2vh;
        padding: var(--spacing-md);
        box-sizing: border-box;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(0deg, rgba(0, 1, 14, 0) 10%, rgba(16, 0, 51, 0.801) 100%) no-repeat;
    }

        .contact {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin: 10px;
            font-size: 20px;
        }

        
        .contact a {
            color: var(--mountainFog);
            text-decoration: none;
            text-align: center;
            font-size: 20px;
        }

       
    .mainContainer {
        flex: 1; 
        width: 100%;
        max-width: var(--max-width);
        padding: var(--spacing-md);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .container {
        border-radius: 8px;
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
        background-color: #33384957;
        box-shadow: 3px 3px #001d08;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        background: linear-gradient(0deg, rgba(0, 1, 14, 0) 10%, rgba(0, 1, 14, 0.682) 100%) no-repeat;
    }

       
        


        
        
        .item {
            margin-bottom: 15px;
            padding: 10px;
            font-size: var(--font-size-base);
            background-color: #001d2f;
        }
        .item h3 {
            margin-bottom: 5px;
                    }
        .item p {
            margin: 5px;
        }
        .skills ul {
            list-style: none;
            padding: 0;
        }
        .skills ul li {
            display: inline-block;
            background-color: #15273b;
            color: #fff;
            padding: 5px 10px;
            margin: 5px 5px 5px 0;
            border-radius: 4px;
        }


    .footer {
        margin: 25px; 
        box-sizing: border-box;
        text-align: center;
        max-width: 100%;
        font-size: clamp(1.2rem, 2vw + 0.2rem, 1.5rem);
      }

    /* Greeting (local time message) */
      .greeting,
      .localTime {
        font-size: clamp(1.2rem, 4vw + 0.6rem, 1.5rem);
        font-weight: 600;
        margin: var(--spacing-sm);
        padding: var(--spacing-sm); 
        color: var(--mountainFog);  
        text-align: center;
        align-self: center;
      }

      .localTime {
        text-align: center;
        align-self: center;
      }

      /* Social links container */
      .socialLinks {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: clamp(1rem, 4vw, 2rem);           
        margin: var(--spacing-md) 0;
        padding: 0;
        list-style: none;  
      }

      .socialLinks li {
        margin: 0;
      }

      /* Social icon styling (works with inline SVG or <img class="social-icon">) */
      .social-icon {
        width:          clamp(2rem, 6vw, 2.8rem);
        height:         auto;
        fill:           white;               
        color:          white;
        transform:      scale(1);    
        isolation:      isolate;                             
        transition: transform 0.2s ease, color 0.2s ease;
      }

      /* Hover/focus interaction */
      .socialLinks a:hover .social-icon,
      .socialLinks a:focus .social-icon {
        transform: scale(1.18);                
        color: var(--starLight);               /* hover glow */
      }

      /* Optional: slight platform-specific hover tint (subtle) */
      .socialLinks a[href*="x.com"]:hover .social-icon    { color: #1da1f2; }
      .socialLinks a[href*="github"]:hover .social-icon   { color: #f0f6fc; }
      .socialLinks a[href*="linkedin"]:hover .social-icon { color: #0a66c2; }

      /* Make links more touch-friendly */
      .socialLinks a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-sm);
        border-radius: 10px;                   
        background-color: var(--marianaTrench);
        transition: background 0.2s ease;
      }

      .socialLinks a:hover,
      .socialLinks a:focus {
        background: rgba(51, 56, 73, 0.1);     /* --stormCloud faint overlay */
      }


    /* Navigation styles */
    /* Navigation menu base styles*/
        .topnav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative; 
            padding: 1rem 1.5rem;
            background: var(--midnightBlue);        
            color: var(--mountainFog);
            min-height: 10vh;
            width: 100%; 
        }
    
        .hamburger {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
        z-index: 1000;
        position: absolute;
        right: 1.5rem;
        top: 0.5rem;
        }

        
        .hamburger span {
        display: block;
        width: 28px;
        height: 3px;
        background: white;
        margin: 6px 0;
        transition: all 0.3s ease;
        }

        .navLinks {
        display: none;               
        flex-direction: column;
        left: 0;
        width: 100%;
        padding: 1rem;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        max-height: fit-content;
        }

        .navLinks a { 
            color: white;
            text-decoration: none;
            padding: 1rem 0;
            font-size: 1.4rem;
            border-bottom: 1px solid var(--blueRidgeParkway)
        }

        .nav-links a:hover, .nav-links a:focus {
        background: var(--stormCloud);
        }

        .navLinks.active {
            display: flex;
            flex-direction: column;
        }


@media only screen and (min-width: 768px) {

    .contact {
        flex-direction: row;
        gap: 1.5rem;
        font-size: 1.5rem; 
    }

    div {
            font-size: 1.5rem;
        }

    .container {
        padding: var(--spacing-lg);
        font-size: 1.5rem;
        width: clamp(400px, 80vw, 800px);
    }

    .topnav {
        display: flex;  /* always visible */
        flex-direction: row;
        justify-content: space-evenly;
        height: clamp(fit-content, 10vh, 12vh);
        grid-area: nav;
        width: 100%;
    }

    .topvav a {
        padding-left: 3vw;
        padding-right: 3vw;
    }

    .navLinks {
        display: flex;               
        flex-direction: row;
        justify-content: space-evenly;
        width: clamp(fit-content, 60%, 100%);
        background: none;
        padding: 0;
        box-shadow: none;
        max-height: fit-content;

    }
  
    .hamburger {
        display: none; 
    }
}