:root {
    --h1-font-size-rem: 1rem; /* for grid row height */
    --h1-font-size-vw: 4vw; /* for dynamically sizing h1 */
    --h1-line-height: .9;
    --h1-num-of-lines: 2; /* number of lines of h1 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  width: 100vw;
  height: 100vh;
  background-image: url(images/wireframe-sphere.png);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;  
  background-color: #F5F5DB;
}

.nav-bar {
  background-image: url(images/wireframe-sphere.png);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed; 
  padding: 0;
  margin: 0;
  position: fixed;
  top: 0;
  width: 70vw;
  height: 10vh;
  margin-left: 15vw;
  margin-right: 15vw;
  background-color: #F5F5DB;
  display: grid;
  grid-template-areas: 
    ". about portfolio contact";
  grid-template-columns: 4fr 1fr 1fr 1fr;
  gap: 1vw;
  font-family: sans-serif;    
  font-size: calc(.5rem + 1vw);
}

.nav-bar div {
  width: 100%;
  display: flex;
  border-radius: 10px;
  align-items: center; /* Center text horizontally and vertically within div */
}

.nav-bar div:nth-child(1) {
  grid-area: about;
}

.nav-bar div:nth-child(2) {
  grid-area: portfolio;
}

.nav-bar div:nth-child(3) {
  grid-area: contact;
}

.nav-bar a {
  flex: 1;
  text-decoration: none;
  outline: none;
  text-align: center;
  line-height: 3;
  color: black;
}

.nav-bar a:hover {
  color: #7a4d59;
  font-weight: bold;
}

.active a {
  width: 75%;
  display: flex;
  border-radius: 10px;
  align-items: center; /* Center text horizontally and vertically within div */
  justify-content: center;
  background-color: #e6ded3;
  color: #7a4d59;
  font-weight: bold;   
}

  section {
    display: grid;
    padding-top: 10vh;
    margin-left: 15vw;
    margin-right: 15vw;
    width: 70%;
    height: 90vh;
    /* previous
    max-width: 100%;
    min-height: 100vh;
    */
   
}

h1 {
    font-family: 'League Spartan', sans-serif;
    /* works
    font-size: calc(1rem + 4vw);
    */
    font-size: calc( 1rem + var(--h1-font-size-vw));
    line-height: var(--h1-line-height);
}

h2 {
    font-family: 'Lora', serif;
    color: #7a4d59;
    font-size: calc(1rem + 1vw);
}

p {
    font-family: 'Lora', serif;
    font-size: calc(.3rem + 1vw);
    line-height: 1.1;
}

.about-container {
    height: 90vh;
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    /* works
    grid-template-rows: 15vh repeat(auto-fill, minmax(15vh, 1fr));
    */
    /* calc(h1 font size * line-height) * (number of lines) */
    /*
    grid-template-rows: calc((var(--h1-font-size-rem) * (var(--h1-line-height))) * var(--h1-num-of-lines)) repeat(auto-fill, minmax(calc((var(--h1-font-size-rem) * (var(--h1-line-height))) * var(--h1-num-of-lines)), 1fr));
    */
    grid-template-rows: calc( (var(--h1-font-size-rem) + var(--h1-font-size-vw)) * var(--h1-line-height) * var(--h1-num-of-lines)) 
        repeat(auto-fill, minmax(calc( (var(--h1-font-size-rem) + var(--h1-font-size-vw)) * var(--h1-line-height) * var(--h1-num-of-lines)),1fr));
    column-gap: 20px;
  }

  .about-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
  }

  .about-image {
    grid-column: 1 / span 3;
    grid-row: 1 / span 10;
  }

  .about-header {
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 11;
    height: fit-content;

  }
  
  .about-subheader {
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 2;
  }

.about-bodytext {
    grid-column-start: 6;
    grid-column-end: -1;
    grid-row-start: 3;
    border-left: solid #422235 1rem;
    padding-left: 1em;

    height: fit-content;
}

.contact-container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    gap: 1vw;
    grid-template-rows: repeat(auto-fill, minmax(5vh, 1fr));

}

.contact-container h1 {
    grid-column-start: 5;
    grid-column-end: -1;
    grid-row-start: 4;
    font-family: 'Bebas Neue', cursive;
    font-size: calc(1rem + 4vw);
    font-weight: normal;
    /*text-align: center;*/
}

/* hacky way to get to <p> in contact-container */
.contact-container div:nth-child(3) {
    color: #7a4d59;
    width: fit-content;
    height: fit-content;
    grid-column-start: 5;
    grid-column-end: -1;
    grid-row-start: 5;
    font-size: calc(.75rem + 1vw);

}

.contact-container div:nth-child(3)  p {
    padding-top: 3vw;
    font-size: calc(.75rem + 1vw);
}

.selfie {
  
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 9;
  }

  .selfie img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    
    filter: drop-shadow(0px 4px 4px rgb(0 0 0 / .25));
    border-radius: 50%;
  }

  svg {
    width: calc(1rem + 6vw);
    height: calc(1rem + 6vw);
    fill: black;
    padding-right: 3vw;
}
  
svg:hover {
    fill: #7a4d59;
}
  
.icon-bar {
    grid-column-start: 5;
    grid-column-end: 8;
    grid-row-start: 8;
    display: inline-flex;
    justify-content: space-between;     
    max-height: 5rem;
}