/* Header */

header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 100px;
  align-items: center;
}

.logo {
  grid-column: 2/3;
}

nav {
  grid-column: 8/12;
}

@media (max-width: 1450px) {
  nav {
    grid-column: 4/-1;
  }
}

@media (max-width: 950px) {
  nav {
    grid-column: 3/-1;
  }
}

@media (max-width: 650px) {
  nav {
    display: none;
  }
}

nav ul {
  display: flex;
  justify-content: space-evenly;
}

nav ul li {
  display: inline;
}

#menu {
  grid-column: 10/11;
}

.open ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 40px;
  padding: 0;
}

.open ul li {
  display: inline;
}

/* Developer */

#developer {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 300px 100px 100px 100px;
}

#profile-container {
  grid-column: 1/-1;
  display: grid;
  justify-content: center;
  padding-top: 50px;
  transform: scale(0.8);
  transition: 1s;
}

#developer h3 {
  grid-column: 1/-1;
  grid-row: 3/4;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 0;
}

#developer h1 {
  grid-column: 1/-1;
  grid-row: 4/5;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

@media (min-width: 1230px) {
  #developer h3,
  #developer h1 {
    grid-column: 2/6;
  }

  #profile-container {
    transform: scale(1);
    grid-column: 3/5;
    transition: 1s;
  }
}

/* Icons */

.about-image {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

.icons {
  width: 600px;
  height: 200px;
  transition: height 0.4s linear;
  transition: width 0.2s linear;

  /* Could have used this -> transform: scale(.5) */
}

@media (max-width: 750px) {
  .about-image {
    padding-top: 0px;
  }

  .icons {
    width: 360px;
    height: 120px;
  }
}

/* About */

.para {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1230px) {
  .para {
    width: auto;
  }
}

/* Portfolio */

.cards {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 300px 300px;
  grid-gap: 40px;
}

@media (max-width: 650px) {
  .cards {
    display: block;
    width: 100%;
  }

  .card1,
  .card2,
  .card3,
  .card4 {
    height: 250px;
    width: 100%;
    margin: 15px 0px;
  }
}

/* Contact */
.top {
  height: 20px;
  display: flex;
  justify-content: center;
}

.top-icon {
  height: 35px;
  width: 45px;
}

#contact {
  display: block;
  text-align: center;
  padding-top: 20px;
}

#contact h3 {
  padding-bottom: 20px;
}

.contact-info {
  text-align: center;
}

.contact-icons {
  display: flex;
  justify-content: center;
}

.contact-icons ul {
  padding-top: 20px;
  padding-left: 0;
}

.contact-icons ul li {
  list-style: none;
  display: inline;
}

.contact-icons ul li a i {
  padding: 10px;
}