/* Home page grid */
.home-wrap {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-columns: 100%;
  grid-template-rows: 50% 50%;
  grid-template-areas: 
    "greeting"
    "nav-buttons";
  justify-content: center;
  align-content: center;
}

.greeting-section {
  grid-area: greeting;
}

.nav-buttons-section {
  grid-area: nav-buttons;
}

.greeting-section, .nav-buttons-section{
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-button {
  margin: 10px;
}

/* Grids and flexboxes for portfolio */
.portfolio {
  display: flex;
  flex-direction: column;
}

.project-section {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center; 
  justify-items: center;
  color: #000000;
}

/* Flexbox for icons under project image */
.tech-icons-div {
  overflow: auto;
  padding: 5px;
  text-align: center;
}

/* About Me grids and flex-boxes */
.about-me-wrap {
  display: grid;
  height: 200%;
  min-height: 1260px; 
  width: 100%;
  grid-template-columns: 100%;
  grid-template-rows: 45% 50%;
  grid-template-areas:
    "bio"
    "skillset"
    "portfolio-link";
  justify-content: start;
  justify-items: center;
  align-content: start;
  align-items: start;
  background: url(./images/what-the-hex-dark.png);
}

.portfolio-link {
  grid-area: portfolio-link;
}

.bio-div {
  display: flex;
  flex-direction: column;
}

.bio-div {
  grid-area: bio;
  padding: 10px;
  justify-content: center;
  align-items: stretch;
}

.skillsets-div {
  grid-area: skillset;
  padding: 10px;
  justify-content: center;
  align-items: center;
}

.frontend-skill-div {
  display: flex;
  flex-direction: row;
}

.frontend-skills-div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: .2fr 1fr 1fr 1fr;
  grid-template-areas:
    "header header"
    "html css"
    "js jquery"
    "react redux";
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: baseline;
}

.front-skills-h3 {
  grid-area: header;
}

.backend-skills-div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: .2fr 1fr 1fr;
  grid-template-areas: 
    "header header"
    "node express"
    "jwt mongo";
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: baseline;
}

.back-skills-h3 {
  grid-area: header;
}

/* Grid for contact page */
.contact-methods-wrap {
  display: flex;
  flex-direction: column;
  justify-items: center;
  justify-content: center;
  align-content: center;
  align-items: center;
}