* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  
    font-family: 'Lato', sans-serif;
    list-style: none;
    text-decoration: none;
    scroll-behavior: smooth;
  }
  
  :root {
    font-size: 62.5%;
  
    --bg-color: #000000;
    --second-bg-color: #2c41bb;
    
    --text-color: #ffffff;
    --second-text-color: #2c41bb;
    --card-bg-color: hsla(204, 80%, 44%, 0.5);
  
    --first-font: 'Lato', sans-serif;
    --second-font: 'Inter', sans-serif;
  
    --highlight-color: rgba(255, 255, 255, 0.2);
    --switch-bg-url: url("./imgs/moon-star.svg");
    
    --stroke-color: rgba(255, 255, 255, 0.5);
    --surface-color: rgba(255, 255, 255, 0.1);
    --surface-color-hover: rgba(3, 0, 0, 0.308);
    
    
    --position-bg-home: 15rem -7rem;
    --logo-github: url("./imgs/logo-github-white.svg");
    --logo-github-hover: url("./imgs/logo-github-black.svg");
    --logo-linkedin: url("./imgs/logo-linkedin-white.svg");
    --logo-linkedin-hover: url("./imgs/logo-linkedin-black.svg");
    
    --button-text-color-hover: #FFFFFF;
  
    --bg-contact: url("./imgs/bg-contact-dark.png");
    --border-form: none;
    --bg-form: rgba(24, 24, 24, 0.726);
    --border-form: 2px solid rgb(35, 97, 211);
  
    --color-social-media: #FFFFFF;
  }
  
  .light {
    --bg-color: #ffffff;
    --second-bg-color: #2c41bb;
    
    --text-color: #000000;
    --second-text-color: #2c41bb;
    --card-bg-color: rgb(32, 81, 216);
  
    --highlight-color: rgba(0, 0, 0, 0.25);
    --switch-bg-url: url("./imgs/sun.svg");
    
    --stroke-color: rgba(0, 0, 0, 0.5);
    --surface-color: rgba(0, 0, 0, 0.1);
    --surface-color-hover: rgba(3, 0, 0, 0.308);
  
   
    --position-bg-home: -70rem 0;
    --logo-github: url("./imgs/logo-github-black.svg");
    --logo-github-hover: url("./imgs/logo-github-white.svg");
    --logo-linkedin: url("./imgs/logo-linkedin-black.svg");
    --logo-linkedin-hover: url("./imgs/logo-linkedin-white.svg");
  
    --button-text-color-hover: #000000;
  
    --bg-contact: url("./imgs/bg-contact-white.png");
    --border-form: 2px solid rgb(35, 97, 211);
    --bg-form: rgba(255, 255, 255, 0.726);
  
    --color-social-media: #2c41bb;
  }
  
  body {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: var(--first-font);
    
  }
  
  
    
  /* ------------------- nav ------------------- */
  
  nav {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
  
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    background: var(--bg-color);
    border-bottom: 1px solid black;
    background-size: cover;
  
    padding: 1rem 10rem;
    /* border-bottom: 1px solid transparent; */
  
    opacity: 0.8;
    transition: all .45s ease;
  }
  
  .navlist{
    display: flex;
    gap: 4rem;
  }
  
  .navlist a{
    font-family: var(--second-font);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--text-color);
  
    transition: all .45s ease;
  }
  
  .navlist a:hover {
    color: var(--second-text-color);
  }
  
  .navlist a.active {
    color: var(--second-text-color);
    font-weight: bolder;
  
  }
  
  /* switch */
  #switch {
    position: relative;
    width: 4rem;
    margin: 0.5rem 5rem;
  }
  
  #switch button {
    position: absolute;
    z-index: 1;
    transform: translateY(-50%);
    top: 50%;
    left: 0;
    cursor: pointer;
    
    width: 2.5rem;
    height: 2.5rem;
    background: white;
    border: 0;
    border-radius: 50%;
    background-image: var(--switch-bg-url);
    background-repeat: no-repeat;
    background-position: center ;
    transition: all 0.3s;
    
    animation: slide-back 0.4s;
    border: 1px var(--highlight-color) solid;
  }
  
  #switch button:hover {
    outline: 0.5rem solid var(--highlight-color);
  }
  
  .light #switch button {
    animation: slide-in 0.4s forwards;
  }
  
  #switch span {
    display: block;
    width: 4rem;
    height: 1.7rem;
    background: var(--surface-color);
    border: 1px solid var(--stroke-color);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 624.94rem;
  }
  
  
  .social-network{
    display: flex;
    gap: 2rem;
  }
  
  figure {
    height: 3rem;
    width: 3rem;
  }
  
  #fig1 {
    background-image: var(--logo-linkedin);  
    background-size: 3rem;
    transition: all .45s ease;
  }
  
  #fig1:hover {
    background-image: var(--logo-linkedin-hover);  
    background-size: 3rem;
    transform: scale(0.9);
  }
  
  #fig2 {
    background-image: var(--logo-github);  
    background-size: 3rem;
    transition: all .45s ease;
  }
  
  #fig2:hover {
    background-image: var(--logo-github-hover);  
    background-size: 3rem;
    transform: scale(0.9);
  }
  
  #menu-icon {
    font-size: 4rem;
    color: var(--text-color);
    transition: all .45s ease;
    z-index: 11;
    cursor: pointer;
    margin-left: 2.5rem;
    display: none;
  }
  
  #menu-icon:hover{
    color: var(--second-text-color);
  }
  
  section {
    padding: 5rem 10rem 5rem;
  }
  
  .home {
    /* background-image: var(--bg-image-home); */
    /* background-position: var(--position-bg-home); */
    /* background-size: cover; */
    /* background-repeat: no-repeat; */
  
    width: 100%;
    height: 100vh;
    
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
  }
  
  .home .home-mac {
    width: 50%;
    position: absolute;
    z-index: -2;
    right: 5rem;
  }
  
  .home-presentation {
    min-width: 45rem;
  }
  
  .home-presentation p {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 2rem;
    line-height: 3rem;
    padding-left: 2px;
  }
  
  .home-presentation #name{
    font-weight: 800;
    font-size: 7rem;
    line-height: 10rem;
    color: var(--text-color);
    letter-spacing: -2px;
    line-height: 0.8;
  }
  
  .home-presentation #last-name{
    font-weight: 300;
    font-size: 6rem;
    line-height: 0.8;
    font-weight: 300;
    color: var(--text-color);
    letter-spacing: -2px;
    padding-bottom: 1.5rem;
  
  }
  
  .home-presentation h3 p {
    color: var(--text-color);
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.7rem;
    line-height: 3rem;
    display: inline;
  }
  
  .home-presentation h3{
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 4.2rem;
  
    color: var(--second-text-color);
    letter-spacing: 1.5px;
    padding-bottom: 8rem;
  }
  
  .home-presentation h3 span strong{
    color: var(--text-color);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 4.2rem;
  
  }
  
  .home-presentation h3 span{
    letter-spacing: 1.5px;
    color: var(--text-color);
    font-weight: 400;
    font-size: 2rem;
    line-height: 32px;
  
  }
  
  .button {
    max-width: 44rem;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    gap: 3rem;
    /* margin: 0 auto; */
  }
  
  .project-button, .contact-button {
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 3rem;
  
    padding: 0.5rem 6rem;
  
    border: 2px solid var(--text-color);
    border-radius: 3rem;
    color: var(--text-color);
    letter-spacing: 1px;
    transition: all .45s ease;
  }
  
  .project-button:hover, .contact-button:hover {
    transform: scale(0.9);
    color: var(--second-text-color);
    border: 2px solid var(--second-text-color);
  }
  
  /* ---------------- About ----------------------- */
  
  .about {
    position: relative;
    display: flex;
    gap: 5rem;
    align-items: center;
    justify-content: space-around;
  
    width: 100%;
    height: 100vh;
    margin: 0;
  }
  
  .about-img {
    transition: all .45s ease;
  }
  
  .about-img img {
    max-width: 45rem;
  }
  
  .about-img:hover{
      transform: translateY(-8px);
      cursor: pointer;
  }
  
  .about-text {
    max-width: 55rem;
    transition: all .45s ease;
  }
  
  .about-text h2 {
    font-size: var(--h2-font);
    line-height: 1;
    font-weight: normal;
    padding-bottom: 3rem;
    color: var(--second-text-color);
  
    font-weight: 400;
    font-size: 5.5rem;
    line-height: 6.6rem;
  }
  
  .about-text h2 span{
    padding-top: 10px;
    color: var(--text-color);
    border-top: 2px solid var(--second-text-color) ;
  }
  
  .about-text p {
    color: var(--text-color);
    font-size: var(--p-font);
    margin-bottom: 2rem;
    word-spacing: 1px;
    text-align: justify;
  
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
  
  .button-cv {
    margin: 3rem auto 0;
      background: var(--bg-color);
    transition: all .45s ease;
    display: flex;
    border: 0;
  }
  
  .btn-cv {
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.2rem;
    background: transparent;
    border: 1px solid var(--second-bg-color);
    color: var(--second-text-color);
    padding: 1rem 2.5rem;
    border-radius: 0.8rem;
    transition: all .45s ease;
  }
  
  .button-cv:hover {
    transform: scale(0.9);
  }
  
  .btn-cv:hover {
    background: var(--second-bg-color);
    border: 1px solid var(--text-color);
    color: var(--button-text-color-hover);
  }
  
  img.balls {
    position: absolute;
    bottom: -6rem;
    right: 5rem;
  }
  @media screen and (max-width: 768px) {
    .about {
      flex-direction: column; /* Empilha os elementos verticalmente */
      align-items: center;   /* Centraliza os elementos */
      padding: 2rem;         /* Adiciona um espaçamento interno */
      height: auto;          /* Permite que a altura se ajuste automaticamente */
    }
  
    .about-img img {
      max-width: 100%; /* Ajusta a largura da imagem para caber no container */
      height: auto;    /* Mantém a proporção da imagem */
    }
  
    .about-text {
      text-align: center; /* Centraliza o texto */
    }
  
    .about-text h2 {
      font-size: 4rem;  /* Reduz o tamanho do texto para telas menores */
      line-height: 5rem;
    }
  
    .about-text p {
      font-size: 1.6rem; /* Ajusta o tamanho da fonte do parágrafo */
      line-height: 2rem;
    }
  
    .button-cv {
      margin: 2rem 0; /* Ajusta a margem do botão */
    }
  
    img.balls {
      display: none; /* Remove a imagem decorativa em telas menores */
    }
  }
  
  /*************************SECTION ********************/

  section {
    padding: 100px 20px; /* Aplica 100px apenas no topo e no fundo */
}
.banner {
  padding: 0;
}

.banner {
  position: relative;
  min-height: 100vh;
  background: url(imgs/banner\ Dh.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  justify-content: flex-start; /* Alinha o conteúdo à esquerda */
  align-items: center;
  text-align: left; /* Mantém o texto alinhado à esquerda */
  width: 100%;
  padding-left: 4%; /* Ajuste conforme necessário para afastar um pouco da borda */
}
.textBx {
  max-width: 600px; /* Define um limite para o texto não esticar demais */
}


.banner h2{
    font-size: 3em;
    color: #fff;
    font-weight: 500;
    line-height: 1.5em;
}

.banner h2 span{
    font-size: 1.5em;
    font-weight: 700;
}

.banner h3{
    font-size: 1.5em;
    color: #77aac2;
    font-weight: 500;
}

@keyframes slide-bottom{0%{transform:translateY(0)}100%{transform:translateY(15px)}}

.btn{
    animation: slide-bottom 2s ease-in-out infinite alternate 0.5s both;
    position: relative;
    background: #1E90FF; /*Mudar o Background e a cor */
    display: inline-block;
    color: #fff;
    margin-top: 20px;
    padding: 10px 30px;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 500;
    transition-duration: 1s;
    border-radius: 10px;
}

.textBx .btn:hover{
    background: #00BFFF;
}

/*Animação*/
#log{
    font-family:'Courier New', Courier;
    color: #ffffff;
}
#log:after{
 content: '|';
 margin-left: 5px;
 opacity: 1;
 animation: pisca .7s infinite;
}
/* Animação aplicada ao content referente a classe *.tlog* resultando efeito de cursor piscando. */

@keyframes pisca{
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}


.contentBx .btn:hover{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    background: #00BFFF;
    color: black;
}


.heading h2{
    font-weight: 600;
    font-size: 40px;
}

.heading{
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    color: #111;
}

.content{
    display: flex;
    justify-content: space-between;
}

.contentBx{
    padding-right: 30px;
}

.contentBx h3{
    font-size: 24px;
    margin-bottom: 10px;
}



.w50 .img-th{
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin: 20px;
}
  
  
  /* ------------ skills ------------------ */
  
  .skills {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }
  
  .line {
    border: 2px #1E90FF solid;
    width: 17rem;
    margin-bottom: 1rem;
  }
  
  .tech h2 {
    margin-bottom: 3rem;
    font-weight: 400;
    font-size: 5rem;
    line-height: 6.6rem;
  }
  
  .techs {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    max-width: 80rem;
    margin-bottom: 5rem;
  }
  
  .tool h2 {
    font-weight: 400;
    font-size: 3rem;
    line-height: 4.7rem;
    margin-bottom: 3rem;
  }
  
  .tools {
    max-width: 65rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  
  .card {
    padding: 3rem;
    background: var(--card-bg-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: 8px;
    transition: all 0.4s ease;
    color: white;
  }
  
  .card p {
    font-weight: 400;
    font-size: 2rem;
    line-height: 3.9rem;
  }
  
  .card:hover {
    cursor: pointer;
    background-color: #1E90FF;
    transform: translateY(-10px);
  }
  
  .card img {
    width: 7rem;
    height: 7rem;
  }
  
  .tools .card img {
    height: 5rem;
    width: 5rem;
  }
  
  
  /* ------------ projects ------------------ */
  
  /* ===== PROJECT CARDS ===== */

.projects-grid {
  width: 100%;
  max-width: 1200px;   /* LIMITA A LARGURA */
  margin: 0 auto;
  padding: 0 2rem 6rem;
}


.project-card {
  width: 320px;        /* TAMANHO FIXO */
  min-width: 320px;
  max-width: 320px;
  height: 420px;

  background: var(--bg-form);
  border-radius: 12px;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.4s ease;
  scroll-snap-align: start;
}

.project-card:hover {
  transform: translateY(-8px);
}

/* imagem */
.project-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* conteúdo com scroll */
.project-content {
  padding: 2rem;
  text-align: left;
  max-height: 150px;          /* ALTURA FIXA */
  overflow-y: auto;           /* SCROLL */
}

/* barra de rolagem personalizada */
.project-content::-webkit-scrollbar {
  width: 6px;
}

.project-content::-webkit-scrollbar-thumb {
  background: var(--second-text-color);
  border-radius: 10px;
}

.project-content h3 {
  font-size: 2rem;
  color: var(--second-text-color);
  margin-bottom: 1rem;
}

.project-content p {
  font-size: 1.5rem;
  line-height: 1.8rem;
  margin-bottom: 1.5rem;
}

/* tecnologias */
.project-techs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.project-techs span {
  font-size: 1.2rem;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  background: var(--card-bg-color);
  color: white;
}

/* ações */
.project-actions {
  margin-top: auto;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.project-actions a {
  flex: 1;
  text-align: center;
  padding: 0.8rem;
  border-radius: 8px;
  font-size: 1.4rem;
  color: white;
  background: var(--second-bg-color);
  transition: all 0.3s ease;
}

.project-actions a:hover {
  background: var(--text-color);
  color: var(--second-text-color);
}

/* responsivo */
@media screen and (max-width: 768px) {
  .projects-grid {
    padding: 0 2rem 4rem;
  }
}
.projects .main-text {
  width: 100%;
  display: flex;
  justify-content: center;
}

.projects .main-text h2 {
  font-size: 4rem;     /* aumenta o título */
  line-height: 7rem;  /* espaçamento vertical */
  font-weight: 400;   /* mantém elegante */
}

.projects .line {
  margin-left: auto;
  margin-right: auto;
  
}

.projects .line {
  border-width: 3px;  /* espessura */
  margin-bottom: 1rem;
  border: 2px #1E90FF solid;
  width: 17rem;
   
}
.project-content {
  max-height: 260px;   /* controla o tamanho do conteúdo */
  overflow-y: auto;   /* ativa scroll interno */
  padding-right: 8px; /* espaço para barra */
}
.project-videos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.project-video {
  width: 100%;
  height: 160px;      /* tamanho do vídeo dentro do card */
  margin: 1rem 0;
  border-radius: 8px;
  overflow: hidden;
}

.project-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.projects-slider {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  padding: 2rem 0;
  scroll-snap-type: x mandatory;
}


.projects-slider::-webkit-scrollbar {
  height: 6px;
}

.projects-slider::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 10px;
}

.project-card {
  min-width: 300px;      /* controla quantos aparecem por vez */
  flex-shrink: 0;
  scroll-snap-align: start;
}
.slider-wrapper {
  position: relative;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}

.slider-btn.left {
  left: -40px;
}

.slider-btn.right {
  right: -40px;
}




  
  /* --------------- contact ----------------------- */
  
  .contact{
      background-image: var(--bg-contact);
    background-position: center;
    background-size: cover;
      display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
      align-items: center;
      gap: 2.5rem;
  }
  
  .contact-text h2{
      font-size: var(--h2-font);
      line-height: 1;
    text-align: initial;
    font-size: 40px;
  }
  
  .contact-text h2 span {
    color: var(--second-text-color);
  }
  
  .contact-form form{
      position: relative;
  }
  .contact-form form input,
  form textarea{
    word-spacing: 2px;
      width: 100%;
      padding: 14px;
      background: var(--bg-form);
      color: var(--text-color);
      border: var(--border-form);
      outline: none;
      font-size: 18px;
      border-radius: 8px;
      margin-bottom: 10px;
  }
  .contact-form textarea{
      resize: none;
      height: 240px;
    margin-bottom: 4rem;
  }
  .contact-form .submit{
      display: inline-block;
      background: var(--second-bg-color);
      color: white;
      width: 160px;
    font-weight: 500;
    font-size: 2rem;
    line-height: 1rem;
    margin-bottom: 6rem;
    border: none;
    
    
      transition: all .45s ease;
  }
  .contact-form .submit:hover{
    background: var(--text-color);
      color: var(--second-text-color);
    cursor: pointer;
    
  }
  
  .contact-icons i{
      height: 45px;
      width: 45px;
      background: var(--main-color);
      color: var(--color-social-media);
      font-size: 3rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      margin-right: 15px;
      transition: all .45s ease;
  }
  .contact-icons i:hover{
      background: var(--second-bg-color);
      color: white;
  }
  
  
  .end{
    position: relative;
      padding: 10px 3%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      background: var(--bg-form);
  }
  
  .top {
    position: absolute;
    right: 10px;
    bottom: 5px;
  }
  
  .top i{
      padding: 10px;
      border-radius: 8px;
      font-size: 15px;
      color: white;
      background: var(--second-text-color);
    transition: all .45s ease;
  }
  
  .top i:hover{
    transform: scale(1.1);
    background: var(--text-color);
      color: var(--second-text-color);
  }
  
  .last-text p{
    display: flex;
    text-align: initial;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }
  .last-text img{
    width: 25px;
    text-align: center;
  }
  
  /* animation */
  @keyframes slide-in {
    from {
      left: 0;
    } to {
      left: 50%;
    }
  }
  
  @keyframes slide-back {
    from {
      left: 50%;
    } to {
      left: 0;
    }
  }
  
  
  /* media queries */
  
  @media (max-width: 1480px){
      header{
          padding: 0px 3%;
          transition: .1s;
      }
      header.sticky{
          padding: 0px 3%;
          transition: .1s;;
      }
      section{
          padding: 110px 8% 100px;
      }
      .end{
          padding: 10px 3%;
      }
    .home-text #nome, .home-text #sobre-nome{
      font-size: 60px;
    }
  }
  
  @media screen and (max-width: 1180px){
    .home {
      flex-direction: column;
    }
  
    /* .home .home-presentation {
      justify-content: flex-start;
      width: 100%;
    } */
    
    .home .home-mac {
      width: 100%;
      position: static;
      z-index: 1;
      right: 5rem;
    }
  }
  
  @media screen and (max-width: 1100px){
      :root{
          --big-font: 4rem;
        --h2-font: 2.5rem;
        --p-font: 1rem;
        transition: .1s;
      }
  
      .home-text h3{
          font-size: 2.5rem;
      }
      .home{
          height: 87vh;
      }
  }
  
  @media screen and (max-width: 1080px) {
    .about-img img{
      max-width: 35rem;
    }
  }
  
  @media (max-width: 920px){
      .button {
      max-width: 44rem;
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 3rem;
      margin: 0 auto;
    }
  
    .button .project-button,
    .button .contact-button {
      margin: 0;
      padding-inline: 7rem;
    }
    
    .about{
          display: flex;
      flex-direction: column;
      }
      .about-img{
          text-align: center;
          order: 2;
      }
      .about-img img{
          width: 100%;
          height: auto;
          max-width: 80%;
      }
  
    img.balls {
      display: none;
    }
  
    .contact{
          grid-template-columns: 1fr;
      }
    .services-content{
      display: grid;
        grid-template-columns: repeat(1, minmax(200px, auto));
      padding: 10px;
    }
    .about-img{
      padding-left: 0;
    }
    .premios img{
      width: 95%;
    }
    .home-text{
      width: 70%;
    }
    .layer, .layer h5, .layer p{
      width: 84%;
    }
    .layer p {
      line-height: 0.9;
    }
    .row img{
      width: 80%;
    }
    
    .button a{
      font-size: 15px;
      padding: 10px 10px;
      margin: auto;
    }
    .button{
      padding-bottom: 50px;
    }
    .home-text #nome, .home-text #sobre-nome{
      font-size: 40px;
    }
    .home-text h3 {
      font-size: 30px;
    }
    .box h2{
      font-size: 20px;
    }
    header{
      width: auto;
      align-items: initial;
      left: 0;
    }
  }
  
  @media screen and (max-width: 840px){
      #menu-icon{
          display: block;
      }
  
    #switch {
      margin: 0.5rem 1rem;
    }
  
      .navlist{
          position: absolute;
          top: -1000px;
          right: 0;
          left: 0;
          display: flex;
          flex-direction: column;
          background: var(--bg-color);
          text-align: left;
          transition: all .45s ease;
      }
      .navlist a{
          display: block;
          font-size: 20px;
          transition: all .45s ease;
          color: var(--text-color);
      text-align: center;
      }
      .navlist a:hover{
          color: var(--main-color);
      }
  
      .navlist.open{
          top: 100%;
      }
  }
  
  @media screen and (max-width: 768px) {
    .techs {
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(3, 1fr);
    }
  
    .tools {
      max-width: 65rem;
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media screen and (max-width: 612px) {
    .home {
   
      width: 100%;
      height: 100vh;
      
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    
  
    .home-presentation {
      min-width: 30rem;
    }
    
    .home-presentation p {
      font-size: 1.3rem;
    }
    
    .home-presentation #name{
      font-size: 5rem;
      margin-bottom: 0.3rem;
  }
    
    .home-presentation #last-name{
      font-size: 4rem;
    }
    
    .home-presentation h3 p {
      font-size: 1.1rem;
    }
    
    .home-presentation h3{
      font-size: 1.5rem;
     }
    
    .home-presentation h3 span{
      letter-spacing: 1.5px;
      color: var(--text-color);
      font-weight: 400;
      font-size: 1.2rem;
      line-height: 32px;
    
    }
    
    .button {
      display: none;
    }
    
    .techs {
      display: grid;
      grid-template-rows: repeat(4, 1fr);
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media screen and (max-width: 448px) {
    .techs {
      display: grid;
      /* grid-template-rows: repeat(4, 1fr); */
      grid-template-columns: repeat(1, 1fr);
    }
  
  }