*{font-family:"Open Sans",sans-serif;}
html{scroll-behavior:smooth;}
html,body{background-color:#faf9f6;color:#333333;font-family:"Open Sans",sans-serif;margin:0;padding:0;text-align:center;}
header{background-color:#000000;color:#faf9f6;padding:50px 20px;position:relative;}
.corner-banner{left:20px;position:absolute;text-align:left;top:15px;}
.corner-banner a{text-decoration:none;}
.banner-name{color:#ffffff;text-decoration:none;}
.product-name{color:#ffffff;display:block;font-size:2.3em;font-weight:700;}
.company-name{font-family:"Open Sans",sans-serif;}
.highlight,.product-name{font-family:"Instrument Serif",sans-serif;}
header h1{font-family:"Instrument Serif",serif;font-size:2.5em;margin-bottom:10px;}

.sections{align-items:center;display:flex;gap:80px;justify-content:center;padding:10px 0;}
.sections a{color:#ffffff;font-size:18px;font-weight:bold;text-decoration:none;}
.sections a:hover{cursor:pointer;}
.sections a:focus-visible{outline:2px solid #d4af37;outline-offset:2px;text-decoration:underline;}

.landing-container{align-items:center;display:flex;justify-content:space-between;}
.image-container{align-items:center;display:flex;flex:1;justify-content:center;}
.image-container img{border:2px solid #000000;border-radius:4px;height:auto;margin:25px;width:400px;}

section{margin-bottom:50px;}
.about-text{align-items:center;display:flex;flex:1;flex-direction:column;padding:20px;text-align:center;}
.name-span{border-bottom:1px solid #d4af37;margin-bottom:5px;text-align:center;width:300px;}
.contact-items{display:flex;gap:40px;justify-content:center;margin-bottom:5px;margin-top:5px;}
.contact-item{align-items:center;display:flex;gap:10px;}
.contact-item a{color:#000000;text-decoration:none;}
.contact-item a:hover{color:#d4af37;}
.icon{fill:#000000;height:24px;width:24px;}
.descriptions{margin-bottom:5px;}

#section-header,.section-header{background:#000000;color:#ffffff;font-size:28px;margin-bottom:50px;width:300px;}
#section-header span,.section-header span{font-family:"Instrument Serif",sans-serif;}

.about-text-container{display:flex;justify-content:center;margin:0 auto;max-width:800px;width:400px;}
.about-text-container p{line-height:1.6;}

/* Content blocks */
.education,.prog-languages,.dev-tools,.project1,.project2,.project3,.project4,.project5,.project6,.project7{
  border-top:1px solid #000000;height:auto;margin-left:200px;padding-left:10px;text-align:left;width:1000px;
}
.education{border:none;}
.education-info{align-items:center;display:flex;gap:600px;}
.major,.date-range{font-size:16px;font-style:italic;padding-left:10px;}
.education-name,.skill-name,.project-name{margin-top:25px;}
.education-name span,.skill-name span,.project-name span{font-family:"Instrument Serif",sans-serif;font-size:25px;}

/* Lists */
.skill-points{margin-left:25px;}
.skill-points,.project-points{margin-bottom:35px;margin-top:35px;}

.skill-bullets{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:125px;
  justify-content:center;   /* <-- centers the bottom row */
  list-style:none;
  margin:0;
  padding:0;
}

.skill-bullets li{align-items:center;display:flex;flex-direction:column;font-size:16px;text-align:center;}
.skill-bullets img{height:35px;width:auto;}
.skill-bullets svg{height:35px;width:auto;}

/* DEV TOOLS — normalized icons and spacing */
.skill-bullets-tools{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:40px 80px;
  list-style:none;margin:0;padding:0;justify-items:center;align-items:start;
}
.skill-bullets-tools li{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:16px;line-height:1.2;text-align:center;min-height:80px;
}
/* fixed icon *box* so PNGs and SVGs align visually */
.skill-bullets-tools img,
.skill-bullets-tools svg{
  display:block;
  height:28px;            /* visual size */
  width:auto;
  max-width:100%;
  object-fit:contain;
}

.project-link a{color:#d4af37;font-size:15px;text-decoration:none;}
.project-link a:hover{text-decoration:underline;}
.coursework span{font-size:20px;}

/* Footer */
footer{background-color:#000000;color:#faf9f6;padding:10px;}

/* Responsive refinements */
@media (max-width:900px){
  .landing-container{flex-wrap:wrap;gap:10px;}
  .image-container img{width:260px;}
  .sections{flex-wrap:wrap;gap:24px;}
}
@media (max-width:600px){
  .education,.prog-languages,.dev-tools,.project1,.project2,.project3,.project4,.project5,.project6,.project7{
    margin-left:0;padding-left:0;width:auto;
  }
  .education-info{flex-wrap:wrap;gap:24px;}
  .about-text-container{max-width:90%;width:auto;}
}