h1,h2,h3,h4,h5,h6{font-family:"Playfair Display SC",serif;color:#333}a,p,li{font-family:"Lato",Arial,sans-serif;color:#4e4e4e;font-size:1em;line-height:1.75em}a:hover{text-decoration:none !important;color:#333 !important;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.container{margin:auto;max-width:662px;padding:0 20px}@media only screen and (max-width: 767px){.intro img{display:block;margin-left:auto;margin-right:auto}footer{text-align:center}}.typed-cursor{opacity:1;font-weight:100;-webkit-animation:blink 0.7s infinite;-moz-animation:blink 0.7s infinite;-ms-animation:blink 0.7s infinite;-o-animation:blink 0.7s infinite;animation:blink 0.7s infinite}@-webkit-keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@-moz-keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@-ms-keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@-o-keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}.main-nav{background:#f4f4f4;padding-top:23px}.main-nav nav ul li a{color:#a7a7a7}.main-nav nav ul li.active a{color:#4d4d4d}.section.second{margin-bottom:90px}.section .container{position:relative}.section .container:after{position:absolute;content:url(../img/separator.png);left:20px}.section .container h1{text-transform:uppercase;margin-bottom:30px;position:relative}.intro{padding:95px 0px 70px 0px;overflow-x:hidden}.intro img{width:81px;height:81px;border-radius:99px}.intro .wrap{margin:30px 0px}.intro h1:before{position:absolute;left:-220px;top:-150px;font-size:270px;z-index:-1;color:#f4f4f4}.intro h1 span{font-size:47px}.work .work-list{margin-left:0px}.work .work-list li{list-style:none;font-size:0.9375em;color:#8c8c8c}.work .work-list li a{padding-bottom:5px;font-size:1.1875em;font-weight:700;text-decoration:none;border-bottom:1px solid #b3b3b3}.work .work-list li a:hover{border-bottom:1px solid #333}.award .award-list{margin-left:0px}.award .award-list li:first-child{font-size:0.9375em;color:#8c8c8c}.skills .skill-list{margin-left:0px}.skills .skill-list li:first-child{font-size:0.9375em;color:#8c8c8c}.quote{background:url(../img/bg.jpg);padding:20px 0px;margin-top:120px}.quote h1{margin:100px 0px;padding:40px 20px;border:5px solid #fff;color:#fff}footer{padding:50px 0px 0px 0px}footer .social li{display:inline;margin-left:20px}footer .social li a{font-size:1.25em;color:#999}

/* 1) Make the page wider on larger screens (keep mobile as-is) */
@media (min-width: 900px){
  .container{
    max-width: 960px; /* try 960–1100 if you want even wider */
  }
}
@media (min-width: 1200px){
  .container{
    max-width: 1040px; /* bump this up if you like */
  }
}

/* 2) Portrait: keep it circular/oval, but sized to fit the 20% column */
.intro .unit-20 img{
  width: 180px;       /* reasonable width for a 20% column */
  height: 180px;      /* a bit flatter (your “squared circle”) */
  max-width: 100%;    /* never overflow on small screens */
  border-radius: 50%; /* circle/ellipse */
  object-fit: cover;  /* crop without distortion */
  display: block;
}

.intro .unit-20{
  padding-right: 20px;
}

/* 3) Slightly bigger, more comfortable body text on desktop */
@media (min-width: 900px){
  p{
    font-size: 1.05em;
    line-height: 1.8;
  }
}

/* 4) Bottom banner background should truly fill the area */
.quote{
  background: url(../img/bg.jpg) no-repeat center center;
  background-size: cover; /* fill without distortion */
}
.quote{
  background: url(../img/bg.jpg) no-repeat center center;
  background-size: cover;
  margin-top: 120px;
  min-height: 45vh;
  padding: 0;
}

.quote h1{
  display: none;      /* removes the element entirely (no border/margins) */
}

.quote .container{ max-width:none; padding:0; }





/* === Inverted color scheme === */

/* Page background and default text color */
body {
  background-color: #000000; /* dark grey */
  color: #e8e6d9;           /* cream-like light grey */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #e8e6d9;           /* match the light font color */
}

/* Links */
a {
  color: #e8e6d9;           /* light links */
}
a:hover {
  color: #fff;              /* white on hover */
}

/* Any section backgrounds that were white/light before */
.section {
  background-color: #000000;
}

/* Navigation background */
.main-nav {
  background-color: #000000; /* slightly darker than main bg */
}
.main-nav nav ul li a {
  color: #fff;               /* lighter nav links */
}
.main-nav nav ul li.active a {
  color: #fff;
}

/* Footer */
footer {
  background-color: #000000;
  color: #e8e6d9;
}
footer .social li a {
  color: #fff;
}
footer .social li a:hover {
  color: #fff;
}

<link rel="stylesheet" href="css/custom.min.css" />

/* === Hero banner fix: full-width image, centered content === */
.hero {
  width: 100%;  /* banner spans entire width */
  background: url('../img/bg.jpg') center center / cover no-repeat;
  display: flex;
  justify-content: center;  /* centers the inner container */
  align-items: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Keep inner content aligned with the page width */
.hero .container {
  max-width: 662px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

@media (min-width: 900px) {
  .hero .container { max-width: 960px; }
}
@media (min-width: 1200px) {
  .hero .container { max-width: 1040px; }
}

/* Overlay box stays centered within the container */
.hero .overlay {
  background: rgba(0, 0, 0, 0.78);
  padding: 40px;
  border-radius: 12px;
  display: inline-block;
  max-width: 100%;
  text-align: center;
}