/* ===========================
   0) CSS Variables & Resets
   =========================== */
   :root{
    --border-color:#000;
    --background:#fff;
    --modal-background:#0009;
    --text:#000;
  }
  
  *{margin:0;padding:0;box-sizing:border-box}
  *{font-family:Avenir}
  
  /* Dark mode: only change variables + body colors (not all elements) */
  @media (prefers-color-scheme:dark){
    :root{
      --border-color:#fff;
      --background:#1e202f;
      --modal-background:#ffffff1a;
      --text:#fff;
    }
  }
  
  /* Base body + links */
  html,body{height:100%}
  body{background:var(--background);color:var(--text)}
  a{color:var(--border-color);text-decoration:none}
  
  /* ===========================
     1) Navbar
     =========================== */
  .navbar{
    align-items:center;
    display:flex;
    height:100%;
    justify-content:flex-end;
    padding-right:2rem;
    position:fixed;
    right:0;top:0;
    width:10%;
  }
  .navbar-list li{
    font-size:1.1rem;
    list-style:none;
    padding:.75rem;
    text-align:right;
    transition:.2s;
  }
  .navbar-list li:hover{border-bottom:2px solid var(--border-color)}
  
  /* ===========================
     2) Landing / Hero
     =========================== */
  .landing-container{
    display:flex;
    justify-content:space-around;
    margin:12% auto 0;
    width:65%;
  }
  
  /* PNG shown as-is (no filters) */
  .sadiq-image{
    background:url(/static/media/website_pic.png) center/contain no-repeat;
    height:auto;
    width:40%;
  }
  
  /* IMPORTANT: Do NOT invert PNG in dark mode */
  @media (prefers-color-scheme:dark){
    .sadiq-image{filter:none}
  }
  
  .content{text-align:center}
  .content-title{
    font-size:max(5vw,3rem);
    letter-spacing:1rem;
    text-align:center;
    width:100%;
  }
  .content-body{
    font-size:min(4vw,1.4rem);
    padding-bottom:5%;
    text-align:center;
    width:100%;
  }
  .arrow-style{
    font-size:2rem;
    padding-top:2rem;
    text-align:center;
    width:100%;
  }
  
  /* ===========================
     3) Modal
     =========================== */
  .modal-container-show{
    background-color:var(--modal-background);
    height:100vh;
    left:0;top:0;
    overflow-y:scroll;
    position:fixed;
    width:100vw;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .modal-container{
    background-color:var(--background);
    border:2px solid var(--border-color);
    display:flex;
    flex-direction:column;
    padding:25px;
    width:80%;
  }
  .modal-close-button{text-align:center;width:100%}
  .modal-box{width:90%}
  .modal-box>h1{padding:15px 0 10px}
  .modal-box>p{text-align:justify}
  
  /* ===========================
     4) Sections / Timeline
     =========================== */
  .section{padding-top:15%}
  .section-title{
    font-size:max(5vw,2.5rem);
    text-align:center;
    letter-spacing:.4rem;
  }
  
  .timeline-container{padding-top:4%}
  .timeline-item{
    background-color:var(--border-color);
    display:flex;
    font-size:min(4vw,1.1rem);
    left:50%;
    padding-top:3%;
    position:relative;
    width:2px;
  }
  .timeline-item:before{
    background-color:var(--border-color);
    border:2px solid var(--border-color);
    border-radius:50%;
    content:"";
    height:15px;width:15px;
    left:50%;
    position:absolute;
    transform:translate(-50%);
  }
  .timeline-item:last-child{margin-bottom:5%;padding-bottom:3%}
  
  .timeline-info{
    position:absolute;
    width:300px;
  }
  .timeline-box{
    border:2px solid var(--border-color);
    padding:10px 30px;
    position:relative;
    text-align:justify;
    transition:.2s;
  }
  .timeline-box:hover{transform:scale(1.04)}
  .timeline-box:hover,
  .timeline-box:hover h3,
  .timeline-box:hover h4,
  .timeline-box:hover p{
    background-color:var(--border-color);
    color:var(--background);
  }
  .timeline-box p{width:400px}
  .timeline-item:nth-child(odd) .timeline-info{left:-330px;text-align:right}
  .timeline-item:nth-child(2n) .timeline-info{left:30px;text-align:left}
  .timeline-item:nth-child(odd) .timeline-box{left:30px}
  .timeline-item:nth-child(2n) .timeline-box{left:-500px}
  
  /* ===========================
     5) Projects
     =========================== */
  .projects-container{
    display:flex;
    flex-wrap:wrap;
    font-size:min(4vw,1.1rem);
    justify-content:center;
    margin:0 auto;
    padding:3% 0 7%;
    width:80%;
  }
  .project{
    border:2px solid var(--border-color);
    display:block;
    margin-inline:5px;
    margin-top:.75rem;
    min-width:150px;
    padding:1%;
    transition:.2s;
    width:max(22%,370px);
  }
  .project-image{
    /* keep grayscale effect for project thumbs */
    filter:grayscale(100%);
    height:200px;
    margin-bottom:5%;
    transition:.2s;
  }
  .project:hover{
    background-color:var(--border-color);
    color:var(--background);
    transform:scale(1.05);
  }
  .project:hover .project-image{filter:grayscale(0)}
  .project:hover,
  .project:hover h2,
  .project:hover h3,
  .project:hover h4,
  .project:hover p,
  .project:hover span {
    background-color: var(--border-color);
    color: var(--background);
  }
  .project-description{text-align:justify}
  
  /* ===========================
     6) Publications
     =========================== */
  .publications-container{padding-top:3%}
  
  /* ===========================
     7) Education
     =========================== */
  .education-wrapper{font-size:min(4vw,1.1rem);padding-top:3%}
  .education-container{
    align-items:center;
    display:flex;
    justify-content:space-evenly;
    margin:0 auto;
    padding:5% 0;
    text-align:center;
    width:80%;
  }
  .education-logo{
    background-repeat:no-repeat;
    height:min(250px,30vw);
    margin:2rem 0 10%;
  }
  
  /* If you DO want education logos inverted in dark mode, keep next rule.
     If not, delete it. PNG hero is already protected above. */
  @media (prefers-color-scheme:dark){
    .education-logo{filter:none }
  }
  
  /* ===========================
     8) Contact & Social
     =========================== */
  .contact-container{
    font-size:min(4vw,1.1rem);
    margin:0 auto;
    padding:3% 0 5%;
    width:80%;
  }
  .social-media-icon{font-size:1.5rem;margin-inline-end:1.5rem}
  .fa-github{color:var(--border-color)}
  .fa-github:hover{color:#f05032}
  .fa-instagram{color:var(--border-color)}
  .fa-instagram:hover{color:#e1306c}
  .fa-linkedin{color:var(--border-color)}
  .fa-linkedin:hover{color:#0a66c2}
  
  /* ===========================
     9) Skills
     =========================== */
  .skills-container{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin:0 auto;
    padding:3% 0 7%;
    width:80%;
  }
  .skill-group{
    border:2px solid var(--border-color);
    display:block;
    font-size:min(4vw,1.1rem);
    margin-inline:.25rem;
    margin-top:.5rem;
    padding:1rem;
    text-align:center;
    transition:.2s;
    width:max(22%,370px);
  }
  .skill-group:hover,
  .skill-group:hover h2,
  .skill-group:hover i,
  .skill-group:hover p,
  .skill-group:hover span{
    background-color:var(--border-color);
    color:var(--background);
  }
  .skill-description{padding-top:5%}
  
  /* ===========================
     10) Thoughts / Quotes
     =========================== */
  .thought-container{
    display:block;
    margin:0 auto;
    max-width:50%;
    padding-top:15%;
    text-align:center;
    width:fit-content;
  }
  .thought-message{font-size:max(2vw,1.1rem)}
  .thought-author{font-size:max(1vw,.73rem);padding-top:2%;text-align:right}
  
  /* ===========================
     11) Cipher (misc)
     =========================== */
  .cipher{text-align:center;width:100%}
  .encoded-text,.cipher-output{margin:auto;width:60%}
  
  /* ===========================
     12) Experience Display
     =========================== */
  .experience-display-box{margin:0 auto;width:80%}
  .experience-display-box h1{margin-top:8%}
  .experience-display-box p{text-align:justify}
  .experience-display-achievements-list-group{padding-bottom:8%}
  
  /* ===========================
     13) Responsive
     =========================== */
  /* 1350px */
  @media screen and (max-width:1350px){
    .timeline-box,.timeline-box p{width:300px}
    .timeline-item:nth-child(odd) .timeline-info{left:-330px;text-align:right}
    .timeline-item:nth-child(2n) .timeline-box{left:-400px}
  }
  /* 1100px */
  @media screen and (max-width:1100px){
    .landing-container{
      align-items:center;
      flex-direction:column;
      flex-wrap:wrap;
      margin-top:0;
      padding-top:10%;
      width:100vw;
    }
    .sadiq-image{
      background-position:50%;
      background-size:contain;
      height:max(30vw,200px);
      width:100%;
    }
    .content{padding-left:0;width:50%}
    .content-title{letter-spacing:min(.2rem,1rem);text-align:center}
    .arrow-style{font-size:2rem;text-align:center}
    .navbar{display:none}
  
    .projects-container{width:90%}
    .project{margin-top:1rem}
  }
  /* 1000px */
  @media screen and (max-width:1000px){
    .timeline-item{
      display:block;
      left:3%;
      padding-bottom:10%;
    }
    .timeline-item:nth-child(odd) .timeline-info,
    .timeline-item:nth-child(2n) .timeline-info{
      left:30px;text-align:left;
    }
    .timeline-item:nth-child(2n) .timeline-box{left:30px}
    .timeline-info{position:relative;width:300px}
    .timeline-box{width:80vw}
    .timeline-box p{width:100%}
  }
  /* 700px */
  @media screen and (max-width:700px){
    .education-container{display:block}
  }
  /* 600px */
  @media screen and (max-width:600px){
    .timeline-box{width:65vw}
  }
  /* 500px */
  @media screen and (max-width:500px){
    .content{width:80%}
  }