/* General Reset */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Arial, sans-serif;
  }
  
  html, body {
    margin: 0;
    padding: 0;
    background-color: #fff; /* 👈 force white at the very top */
  }
  

  header {
    background: #fff;  
    width: 100%;
  
    /* extend background into notch area */
    padding-top: constant(safe-area-inset-top); /* old iOS */
    padding-top: env(safe-area-inset-top);      /* modern iOS */
  }
  
  
  /* Navigation Bar */
  nav {
    background: #fff;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
    padding: 0 40px; 
    display: flex;
    justify-content: center; /* center content */
    align-items: center;
    position: relative; /* so logo can be centered absolutely */
    position: sticky;
    top: 0;
    z-index: 1000;

    background: transparent;
  }
  
  .profile_name {
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    left: 40px; /* keep text stuck to left */
  }
  
  .logo img {
    height: 90px;  /* ✅ make logo visible */
    width: auto;   /* maintain proportions */
  }

  @media (max-width: 768px) {
    nav {
      height: 100px;              /* 👈 Always tall enough */
      width: 100%;                /* full width across */
      padding: 0 20px;            /* only side padding */
      display: flex;
      align-items: center;        /* vertical centering */
      justify-content: center;    /* horizontal centering */
      box-sizing: border-box;

    }
  
    nav .logo img {
      max-height: 60px;           /* logo fits inside */
      width: auto;
      display: block;
    }
  }

  .page-content {
    background-color: #f5f5dc; /* beige only for content */
    min-height: 100vh; 
  }
  
  
  /* Sections */
  section {
    padding: 60px 15%;
  }
  
  h1, h2, h3 {
    margin-bottom: 15px;
  }
  
  h2 {
    border-bottom: 3px solid #ccc;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 30px;
  }
 
  /* Buttons */
  .all_buttons {
    display: grid;
    gap: 25px;
    margin-top: 20px;
  }

  .button_nav {
    all: unset;
    display: block;
    cursor: pointer;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
  }
  
  .button {
    all: unset;
    display: block;
    width: 100%;
    cursor: pointer;
  
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
  }
  
  
  .button:hover {
    transform: translateY(-5px);
  }

  
  @media (max-width: 768px) {
    html {
      font-size: 14px; /* base font size smaller */
    }
  
    body {
      line-height: 1.4; /* optional, tighter spacing */
    }
  
    section#skills h2 {
      font-size: 1.5rem; /* smaller title */
    }
  
    section#skills h3, section#skills h4, section#skills h10 {
      font-size: 1.1rem; /* smaller headings */
    }
  
    section#skills p {
      font-size: 0.9rem; /* shrink paragraphs */
    }
  
    .button {
      font-size: 2.85rem;
      padding: 12px 15px;
    }
  
    .logo img {
      height: 50px; /* shrink logo more */
    }
  }