:root {
  --padheader: 1rem;
  --bgsection: #080a0c;
  --fontfamily: "Poppins", sans-serif;
  --colorcinza: #7b899d;
  --colorblue: #1be4cf;
}

.container {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  margin: auto;
  background-color: #0b0f14;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.header {
  width: 80%;
  margin: auto;
  padding: var(--padheader);
  font-family: var(--fontfamily);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav .logo {
  color: var(--colorblue);
  text-shadow: 0px 0px 8px var(--colorblue);
}
.nav .logo::before {
  content: ">_ ";
}
.nav .navUl {
  display: flex;
  gap: 1rem;
}
.nav .navUl li a {
  color: var(--colorcinza);
  transition: color 200ms ease-in;
}
.nav .navUl li a:hover {
  color: var(--colorblue);
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.hero .hero__code {
  color: var(--colorblue);
}
.hero .hero__title {
  color: white;
  font-size: 4.5rem;
  font-family: var(--fontfamily);
}
.hero .hero__title span {
  background-image: linear-gradient(to right, #00f5ff, #00ff88);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 1px 1px 8px rgba(27, 228, 207, 0.39);
}
.hero .hero__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "buttonprimary buttonsecondary";
  gap: 1rem;
  align-items: center;
}
.hero .hero__actions .hero__button {
  justify-self: center;
  border-radius: 4px;
  font-family: var(--fontfamily);
  font-size: 0.87em;
  padding: 12px 24px;
  cursor: pointer;
}
.hero .hero__actions .hero__button--primary {
  grid-area: buttonprimary;
  background-color: var(--colorblue);
  color: #0b0f14;
}
.hero .hero__actions .hero__button--secondary {
  grid-area: buttonsecondary;
  background-color: transparent;
  color: var(--colorblue);
  outline: 1px solid var(--colorblue);
  transition: background-color 200ms ease-in;
}
.hero .hero__actions .hero__button--secondary:hover {
  background-color: rgba(19, 230, 200, 0.1);
}
.hero__carroceu {
  color: var(--colorcinza);
  font-size: 1.125em;
  font-family: var(--fontfamily);
}
.hero__carroceu::before {
  content: "> ";
  color: var(--colorblue);
}

.main,
.footer {
  background-color: var(--bgsection);
}

.tech {
  width: 80%;
  margin: auto;
  padding: 4em 0 0 0;
  color: white;
  font-family: var(--fontfamily);
}
.tech__stacks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-template-areas: "Heeader . ." "frontend backend tools";
  gap: 3em;
}
.tech__stacks .header {
  grid-area: Heeader;
}
.tech__stacks .frontend {
  grid-area: frontend;
}
.tech__stacks .backend {
  grid-area: backend;
}
.tech__stacks .tools {
  grid-area: tools;
}
.tech__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tech__header .tech__code {
  color: var(--colorblue);
}
.tech__header .tech__title {
  font-size: 2.25em;
}
.tech__header .tech__title span {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(to right, #00f5ff, #00ff88);
}
.tech__category {
  padding: 1.5rem;
  background-color: #111318;
  flex-grow: 1;
  font-size: 0.875em;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  outline: 1px solid #111318;
  transition: outline 200ms ease-in;
}
.tech__category:hover {
  outline: 1px solid var(--colorblue);
}
.tech__list li + li {
  padding-top: 1rem;
}
.tech__category-title {
  color: var(--colorblue);
}
.tech__category-title::before {
  content: "<";
}
.tech__category-title::after {
  content: " />";
}
.tech .boxporcentagem {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tech .boxporcentagem span {
  color: var(--colorcinza);
}
.tech__progress {
  width: 100%;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  border-radius: 5px;
}
.tech__progress::-webkit-progress-value {
  background-image: linear-gradient(to right, #00f5ff, #00ff88);
  border-radius: 4px;
}
.tech__projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-template-areas: "Heeader ." "primary secondary" "tertiary quaternary";
  gap: 3rem;
}
.tech__projects .header__projects {
  grid-area: Heeader;
  margin-top: 3rem;
}
.tech__projects .project-card {
  background-color: #111318;
  padding: 1rem;
  border-radius: 5px;
  outline: 1px solid #21242c;
  transition: outline 200ms ease-in;
  cursor: pointer;
}
.tech__projects .project-card:hover {
  outline: 1px solid var(--colorblue);
}
.tech__projects .project-card--primary {
  grid-area: primary;
}
.tech__projects .project-card__header {
  display: flex;
  justify-content: space-between;
}
.tech__projects .project-card__title {
  font-size: 1.125em;
}
.tech__projects .project-card__icon {
  color: var(--colorcinza);
  transition: color 200ms ease-in;
}
.tech__projects .project-card__icon:hover {
  color: var(--colorblue);
}
.tech__projects .project-card__description {
  font-size: 0.875em;
  color: var(--colorcinza);
}
.tech__projects .project-card__tech-list {
  display: flex;
  gap: 1rem;
  font-size: 0.75em;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.tech__projects .project-card__tech {
  background-color: #12282b;
  padding: 0.3rem 1rem;
  border-radius: 15px;
  color: #19e6d5;
  outline: 1px solid #134544;
}
.tech__projects .project-card--secondary {
  grid-area: secondary;
}
.tech__projects .project-card--tertiary {
  grid-area: tertiary;
}
.tech__projects .project-card--quaternary {
  grid-area: quaternary;
}
.tech .contact {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  padding: 5rem 0;
  border-bottom: 1px solid var(--colorcinza);
}
.tech .contact__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tech .contact__code {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(to right, #00f5ff, #00ff88);
}
.tech .contact__title {
  font-size: 2.25em;
}
.tech .contact__title span {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(to right, #00f5ff, #00ff88);
}
.tech .contact__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}
.tech .contact__link {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #111318;
  padding: 16px 24px;
  border-radius: 5px;
  outline: 1px solid #21242c;
  gap: 1rem;
}
.tech .contact__link:hover {
  box-shadow: 0px 0px 20px rgba(25, 229, 212, 0.1);
  outline: 1px solid rgba(25, 229, 212, 0.5);
}
.tech .contact__name {
  color: white;
  font-size: 0.875em;
}
.tech .contact__value {
  color: var(--colorcinza);
  font-size: 0.75em;
}
.tech .contact__icon {
  color: var(--colorblue);
}

.footer {
  color: var(--colorcinza);
  font-family: var(--fontfamily);
  font-size: 0.875em;
  text-align: center;
}
.footer__text {
  padding: 5rem 0;
}
.footer__text::before {
  content: ">_ ";
  color: var(--colorblue);
}

@media (max-width: 1024px) {
  .tech__projects {
    grid-template-columns: 100%;
    grid-template-areas: "Heeader" "primary" "secondary" "tertiary" "quaternary";
  }
}
@media (max-width: 768px) {
  .tech {
    grid-template-columns: 1rem 1fr 1rem;
    gap: 1rem;
  }
  .tech__stacks {
    grid-template-areas: "Heeader" "frontend" "backend " "tools";
  }
  .contact__list {
    grid-template-columns: 1fr;
    grid-template-areas: "github" "linkedin" "email";
  }
}
@media (max-width: 425px) {
  .nav {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  .hero .hero__title {
    text-align: center;
  }
}