:root {
  --header-height: 10vw;
  --mobile-header-height: 20vw;
}

body {
  /* border: 2px dashed red; */
}

div {
  box-sizing: border-box;
}
.header-container {
  background-image: url("https://checkitouthomeinspection.com/wp-content/uploads/2020/09/full-service-home-inspections-in-portland-oregon-1.jpg");
  background-repeat: repeat;
  background-size: contain;
  display: flex;
  flex-direction: row;
  flex-wrap: none;
  justify-content: space-between;
  height: var(--header-height);
  max-width: 100vw;
}

.logo-container {
  display: flex;
  height: var(--header-height);
  padding: 0.5vw;
  background-color: rgba(255,255,255,0.3);
  order: 1;
}

#logo {
  height: 100%;
}

.headshot-container {
  display: flex;
  height: calc(var(--header-height) * 1.3);
  transform: translate(2vw, 0);
  order: 2;
  padding-top: 1vw;
  padding-bottom: 1vw;
}

#headshot {
  border-radius: 50%;
  outline: 0.5vw solid #5f6215;
  border: 1px solid white;
  height: 100%;
}

#karen-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  font-family: "Architects Daughter";
  color: white;
  font-weight: 900;
  font-variant: small-caps;
  padding-left: 0.5vw;
}

#name {
  font-size: 2vw;
}

#license {
  font-size: 1.2vw;
}

.menu-container {
  display: flex;
  height: calc(var(--header-height) * 1);
  padding: 2vw;
  order: 3;
}

#menu {
  height: 100%;
}

@media (max-width: 72em) {
  .header-container {
    background: none;
    flex-wrap: wrap;
    height: calc(1.9*var(--mobile-header-height));
  }

  .logo-container {
    order: 1;
    height: var(--mobile-header-height);
  }

  .headshot-container {
    display: flex;
    justify-content: center;
    order: 3;
    justify-content: center;
    background-image: url("https://checkitouthomeinspection.com/wp-content/uploads/2020/09/full-service-home-inspections-in-portland-oregon-1.jpg");
    background-repeat: repeat;
    background-size: contain;
    flex: 0 0 100vw;
    transform: none;
    transform: translate(-2vw);
    height: calc(1 * var(--mobile-header-height));
    /* border: 2px dashed red; */
    max-width: 100vw;
  }

  .menu-container {
    order: 2;
    height: var(--mobile-header-height);
  }

  #headshot {
    outline: 1vw solid #5f6215;
    /* height: var(--mobile-header-height); */
    height: 100%;
    transform: translate(10vw);
  }
  
  #karen-info {
    margin-left: 2vw;
    transform: translate(10vw);

  }
  
  #name {
    font-size: 4vw;
  }

  #license {
    font-size: 2.5vw;
  }
}