@font-face {
    font-family: Inter-SemiBold;
    src: url(https://robert-wilson.life/fonts/Inter-SemiBold.ttf) format("truetype"),
      url(https://robert-wilson.life/fonts/Inter-SemiBold.woff) format("woff"),
      url(https://robert-wilson.life/fonts/Inter-SemiBold.svg) format("svg");
  }
  
  @font-face {
    font-family: Inter-Medium;
    src: url(https://robert-wilson.life/fonts/Inter-Medium.ttf) format("truetype"),
      url(https://robert-wilson.life/fonts/Inter-Medium.woff) format("woff"),
      url(https://robert-wilson.life/fonts/Inter-Medium.svg) format("svg");
  }
  
  @font-face {
    font-family: Inter-Regular;
    src: url(https://robert-wilson.life/fonts/Inter-Regular.ttf) format("truetype"),
      url(https://robert-wilson.life/fonts/Inter-Regular.woff) format("woff"),
      url(https://robert-wilson.life/fonts/Inter-Regular.svg) format("svg");
  }
  
  @font-face {
    font-family: Inter-Light;
    src: url(https://robert-wilson.life/fonts/Inter-Light.ttf) format("truetype"),
      url(https://robert-wilson.life/fonts/Inter-Light.woff) format("woff"),
      url(https://robert-wilson.life/fonts/Inter-Light.svg) format("svg");
  }
  
  
  :root {
    /* Colors */
    --primary-white: 255, 255, 255;
    --primary-black: 29, 29, 29;
    --primary-blue: 7, 73, 118;
    --primary-gray: 78, 80, 84;
    --accent-gray: 232, 232, 232;
    --secondary-blue: 0, 122, 237;
    --primary-transition: all 0.4s cubic-bezier(0.15, 0.97, 0.47, 0.97);
  }
  
  body,
  html {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    position: relative;
    background-color: rgba(var(--primary-white), 1);
  }
  
  p {
    font-family:Inter-Medium;
    margin:0;
  }
  
  .header-container {
    background-color:rgba(var(--primary-blue),1);
    width:100%;
    display:flex;
    justify-content:center;
    column-gap:40px;
    position:relative;
    box-sizing:border-box;
    padding-top:80px;
    padding-bottom:80px;
    padding-left:30px;
    padding-right:30px;
    overflow:hidden;
  }
  
  .header-background {
      background-image:url("https://www.robert-wilson.life/images/kauai%20background%20image%202-u94-fr.png");
    background-size:cover;
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
    opacity:0.3;
    top:0;
    left:0;
  }
  
  
  .header-column {
    color:rgba(var(--primary-white),1);
    display:flex;
    flex-direction:column;
    justify-content:center;
    z-index:2;
    width:50%;
    max-width:440px;
  }
  
  .header-column:nth-child(1) {
    max-width:300px;
  }
  
  
  .bio-name {
     font-size: 55px;
    margin-bottom:5px;
    
  }
  
  .bio-titles {
    font-size:16px;
    margin-bottom:15px;
  }
  
  .bio-locations {
    font-size:15px;
    color:rgba(var(--primary-white),0.8);
    font-family:Inter-Medium;
  }
  
  .menu-container {
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    box-sizing:border-box;
    width:100%;
    display:flex;
    align-items:center;
    padding-left:10px;
    padding-right:10px;
    height:60px;
  }
  
  .menu-container-background {
    position:fixed;
    height:60px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(var(--primary-white),0.3);
    top:-60px;
    left:0;
    width:100%;
    z-index:9998;
    transition:var(--primary-transition);
    align-items:center;
    box-sizing:border-box;
    display:flex;
    padding-left:10px;
    padding-right:10px;
  }
  
  .menu-container-background.active {
    top:0px;
  }
  
  .menu-bio-name {
    font-size:20px;
    font-family:Inter-Semibold;
    color:rgba(var(--primary-white),1);
  }
  
  .menu-bio-name.active {
    color:rgba(var(--primary-black),1);
  }
  
  .socials-container {
    margin-left:auto;
    display:flex;
    gap:10px;
  }
  
  .socials-button {
    width:45px;
    height:45px;
    background-color:rgba(var(--primary-blue),1);
    border-radius:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
  }
  
  .socials-button:nth-child(1) {
    background-color:rgba(var(--secondary-blue),1);
  }
  
  .socials-button-icon {
    height:16px;
    width:16px;
    fill:rgba(var(--primary-white),1);
  }
  
  .body-container {
    width:100%;
    box-sizing:border-box;
    margin:0 auto;
    max-width:1100px;
    padding-left:80px;
    padding-right:80px;
    margin-bottom:100px;
  }
  
  .section-wrapper {
    border-top:1px solid rgba(var(--accent-gray),1);
    box-sizing:border-box;
      padding-top:40px;
    padding-bottom:40px;
  }
  
  .section-wrapper:first-child {
    border-top:1px solid rgba(var(--accent-gray),0);
    padding-top:60px;
  }
  
  .section-body {
    font-size:16px;
    color:rgba(var(--primary-black),1);
    margin-bottom:20px;
  }
  
  .experience-wrapper {
    margin-bottom:60px;
  }
  
  .experience-wrapper:last-child {
    margin-bottom:0px;
  }
  
  .section-title {
    color:rgba(var(--primary-blue),1);
    font-size:40px;
    margin-bottom:20px;
  }
  
  .section-title.professional {
    margin-bottom:40px;
  }
  
  .experience-title {
    font-family:Inter-Semibold;
    font-size:16px;
    margin-bottom:15px;
  }
  
  .experience-details {
    color:rgba(var(--primary-gray),1);
    margin-bottom:20px;
  }
  
  .experience-details a {
    color:rgba(var(--secondary-blue),1);
  }
  
  .experience-locations {
    margin-bottom:25px;
    font-size:15px;
    color:rgba(var(--primary-gray),1);
  }
  
  .highlight-list {
      font-family: Inter-Medium;
    margin-left: 20px;
    padding: 0;
    color:rgba(var(--primary-black),1);
    font-size:16px;
  }
  
  .highlight-list li {
    margin-bottom: 20px; 
  }
  
  @media (max-width: 900px) {
    .header-column:nth-child(1) {
      max-width:260px;
  }
  }
  
  @media (max-width: 800px) {
      .bio-name {
     font-size: 48px;
  }
  }
  
  @media (max-width: 700px) {
    .header-container {
    display:grid;
  }
    .header-column {
    max-width:none;
      width:100%;
  }
    .header-column:nth-child(1) {
      margin:0 auto;
      max-width:240px;
      height:220px;
  }
    .bio-name {
      text-align:center;
  }
  
  .bio-titles {
      text-align:center;
  }
  
  .bio-locations {
      text-align:center;
  }
  }
  
  @media (max-width: 650px) {
  .section-title {
    font-size:35px;
  }
  }
  
  @media (max-width: 375px) {
    .bio-name {
     font-size: 42px;
  }
  }
  
  @media (max-width: 650px) {
  .body-container {
    padding-left:40px;
    padding-right:40px;
  }
  }