/*
 *
 * 1. Tags
 * 2. Header
 * 3. Main
 * 4. Footer
 *
 */

:root{
  --soft-gray: #abb2a4;
  --dark-gray: #282c34
}

/* 1. Tags */

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--dark-gray);
  color: #fff;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
p {
  font-family: Courier, monospace;
}

nav {
  text-align: right;
  padding: .5em;
  text-align: center;
  background-color: var(--dark-gray);
  opacity: .95;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 10vh;
}
@media screen and (min-width: 768px) {
  nav {
    /* width: 98%; /*otherwise portuguese gets cut off*/
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
}
nav a {
  padding: 1em .5em;
}
a {
  color: var(--soft-gray);
  text-decoration: none;
}
a:hover,
a:focus {
  color: #fff;
}

.btn {
  padding: 1em;
  margin: 1em auto 1em;
  text-decoration: none;
  color: var(--dark-gray);
  background-color: var(--soft-gray)
}
.btn:hover,
.btn:focus {
  color: #000;
}

/* 2. Header */
header {
  height: 90vh;
  /* background-image: url("../imgs/code-blur.jpeg"); */
  animation: heading;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes heading {
  0%   {opacity: 0}
  100% {opacity: 1}
}

#blink {
  animation: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
@keyframes blink {
  0%   {opacity: 0}
  50%  {opacity: 1}
  100% {opacity: 0}
}

/* 3. Main */

.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 90%;
}
@media screen and (min-width: 768px) {
  #about div.flex {
    width: 70%;
    margin: 0 auto;
  }
}

#skills {
  display: flex;
  flex-direction: column;
  background-image: url("../imgs/code-blur.jpeg");
  background-size: cover;
}
@media screen and (min-width: 768px) {
  #skills {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 100vh;
  }
}
#skills img {
  max-width: 40%;
  margin: auto;
}
.skill {
  margin: 1em auto;
  padding: 0 1em;
}
@media screen and (min-width: 768px) {
  .skill {
    width: 30%;
  }
}


#about {
  background-image: linear-gradient(rgba(40, 44, 52, 0.8), rgba(40, 44, 52, 0.8)), url("../imgs/mapa.jpeg");
  background-position: right;
  height: 90vh;
  color: #fff;
}
@media screen and (min-width: 900px) {
  #about {
    background-attachment: fixed;
  }
}

#projects section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90%;
  margin: 1em auto;
}
#projects h2 {
  margin: 4em auto 2em;
}

#grid-projects img {
  height: 100%;
  width: 100%;
  overflow: hidden;

}
#grid-projects figure {
  margin: 0;
}

#grid-projects {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(8, 1fr);
  grid-template-areas:
    "fig1"
    "project1"
    "fig2"
    "project2"
    "fig3"
    "project3"
    "fig4"
    "project4";
  grid-gap: 0px;
}
@media screen and (min-width: 768px) {
  #grid-projects {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
      "fig1 project1"
      "project2 fig2"
      "fig3 project3"
      "project4 fig4";
  }
}

#project1 {
  grid-area: project1;
}
#project2 {
  grid-area: project2;
}
#project3 {
  grid-area: project3;
}
#project4 {
  grid-area: project4;
}
#fig1 {
  grid-area:fig1;
}
#fig2 {
  grid-area:fig2;
}
#fig3 {
  grid-area:fig3;
}
#fig4 {
  grid-area:fig4;
}

/* 4. Footer */

footer {
  background-color: var(--soft-gray);
  color: var(--dark-gray);
  padding: 2em 0;
}
footer a {
  color: var(--dark-gray);
}
footer a:hover,
footer a:focus {
  color: #000;
}
footer span {
  padding: 1em;
}

footer section {
  margin: 1em auto;
}