html {
  scroll-behavior: smooth;
  width: 100%;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Afacad", "Verdana", sans-serif;
  width: 100%;
}

/* flex container of all nav bar buttons and logo
  stays fixed at top of page */
.nav-bar {
  width: 100%;
  background-color: white;
  position: fixed;
  top: 0;

  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: 30px;

  font-family: "Afacad", "Verdana", sans-serif;
}
/* 
#dropdown {
  display: none;
} */

 /* h1 and .btn: flex items contained in nav bar, margin keeps them aligned 
  within the bar.  */
.nav-bar h1 {
  margin: 25px 0 0 30px;
}

.nav-bar .btn {
  margin: 25px 30px 10px 20px;
  font-size: 2em;
  font-weight: light;
  text-decoration: none;
  color: #8c8c8c;
  transition: color 1s;
}

.nav-bar .btn:hover {
  color: #c9c9c9;
}

/* grid container for info-card-frame, portfolio, about-me, and contact-me */
#main-content {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 600px 800px 480px 480px;
  grid-template-areas: 
    "home"
    "portfolio"
    "about"
    "contact";
}

/* home card */
#info-card-frame {
  background: linear-gradient(90deg, #7eaa91 0%, #66aa91 35%, #72cedd  100%);
  width: 100%;
  height: 100%;
  grid-area: home;
}

#info-card {
  margin: auto;
  padding-top: 12.5%;
  width: 50%;
  min-width: 420px;
  height: 40%;
}

#info-card-content {
  font-family: "Afacad", "Verdana", sans-serif;
  background-color: white;
  display: grid;
  grid-template-columns: 30% 60% 10%;
  grid-template-rows: 30% 30% 40%;
  grid-template-areas: "head name logo"
    "head blurb ."
    "head . .";
  height: 100%;
  border-radius: 8px;
}

#info-card-content .img1 {
  height: 170.25px;
  width: 135px;
  grid-area: head;
  margin: 20px;
  border-radius: 8px;
}

#info-card-content .img2 {
  width: 31.75px;
  height: 27px;
  grid-area: logo;
  margin: 30px 10px 10px 15px;
  padding: 0;
}

#info-card-content .img2 img{
  width: 31.75px;
  height: 27px;
  padding: 0;
}

#info-card-content h1 {
  grid-area: name;
}

#info-card-content p {
  grid-area: blurb;
}

/* portfolio */
#portfolio {
  width: 100%;
  height: 100%;
  padding-top: 75px;
  background: linear-gradient(90deg, #7eaa91 0%, #66aa91 35%, #72cedd  100%);
  display: flex;
  flex-flow: row wrap;
  grid-area: portfolio;
}


.portfolio-entry {
  flex-flow: row wrap;
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.portfolio-entry p {
  color: white;
  font-size: 1em;
}

.portfolio-entry a{
  text-decoration: none;
  color: white;
  font-size: 2em;
}

.portfolio-entry img {
  width: 324px;
  height: 182px;
}

/* about */
#about-me {
  height: 480px;
  width: 100%;
  background-color: #39acaf;
  grid-area: about;
}

#about-me p{
  width: 60%;
  font-size: 2em;
  padding-top: 100px;
  margin: auto;
}

/* contact */
#contact-me {
  height: 480px;
  width: 100%;
  background-color: white;
  grid-area: contact;
}

/* media queries for responsive nav bar */
@media all and (max-width:  1100px) {
  .nav-bar {
    justify-content: center;
  }
  .nav-bar h1 {
    display: none;
  }

  #info-card {
    padding-top: 20%;
  }

  #info-card-content {
    grid-template-columns: 40% 45% 15%;
    grid-template-rows: 40% 60%;
    grid-template-areas: "head name logo"
      "head blurb .";
  }
}

@media all and (max-width: 600px) {
  .nav-bar{
    flex-flow: column wrap;
    gap: 0;
  }
  .nav-bar .btn {
    margin: 0 0 0 0;
    font-size: 1em;
  }

  /* #dropdown {
    display: block;
  } */

  #info-card {
    padding-top: 50%;
  }
}
/* color pallete */
/* #72cedd #7eaa91 #6f765e #39acaf #22e6e2*/