* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "DM Sans", sans-serif;
}

body {
  background: #ebebeb;
  width: 99vw;
  transition: 0.2s;
  overflow-x: hidden;
}

input[type="checkbox"] {
  display: none;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1rem 2rem;

  background-color: #eceff1;

  box-shadow: 0.5px 0.5px 10px 0.5px #000;
}

nav h1 {
  margin-left: 2.8rem;
}

#menu {
  display: flex;
  gap: 1.5rem;
  margin-right: 1.8rem;
  justify-content: space-around;
  cursor: pointer;
}

.change-theme {
  width: 1rem;

  position: absolute;
}

.links-menu {
  text-decoration: none;
  color: #000;
  font-size: 1.2rem;
}

.links-menu:hover {
  color: rgb(63, 190, 46);
  transition: 0.8s;
  font-size: 1.5rem;
}

.dark .links-menu:hover {
  color: rgb(255, 160, 122);
}

span {
  color: rgb(63, 190, 46);
  font-size: 1.6rem;
}

.dark span {
  color: rgb(255, 160, 122);
}

main {
  position: absolute;
  max-width: 80vw;
  height: 2044px;
  left: 12%;
  top: 22%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

header {
  display: flex;
}

.text {
  text-align: center;
  width: 55%;
  margin-left: 145px;
}

#skills {
  margin: 38% 72% 0% 17%;
  width: 450px;

  transform: translatey(0px);
  animation: float 5s ease-in-out infinite;
}

#skills h2 {
  margin: 11% 39% 2%;
  font-weight: bold;
}

svg {
  max-width: 17%;
  margin: 4px;
  max-width: 13%;
  filter: drop-shadow(0 0 0.4em rgb(63, 190, 46));
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

.eu img {
  max-width: 12.12rem;
  border-radius: 5.93rem;
  border: 1px solid #000;
}

.texth2 {
  height: 10%;
  margin-top: 2%;
  text-align: justify;
  font-weight: bold;
}

.eu h3 {
  max-width: 86%;
  margin-left: 5%;
  font-weight: 300;
}

.eu h4 {
  margin-left: 45%;
}

.titulos {
  margin: 17% 0% 10% 43%;
}

.projetos {
  display: flex;
  perspective: 900px;
  gap: 3rem;
  justify-content: space-around;

  margin-top: 5%;
  height: 25.5rem;
  width: 100%;
}

.img {
  width: 30rem;
  height: 16rem;

  border-radius: 4px;
  position: relative;
  will-change: transform;
  transition: transform 0.2s;
  filter: drop-shadow(0 0 0.4em rgba(68, 67, 67, 0.979));
}

.link {
  text-decoration: none;
  color: black;
}

.title {
  font-size: 1.3rem;
  color: black;
}

.imagem {
  background-size: contain;
  width: 97%;
  height: 135%;
  margin: 1rem;
}

.linha {
  height: 0.6rem;
  width: 100%;

  margin: 0.9rem;
}

.linha span {
  font-size: 2.5rem;
}

#btnTop {
  position: fixed;
  bottom: 3.12rem;
  right: 3.12rem;
  width: 3.12rem;
  height: 3.12rem;
  background-color: black;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.arrow {
  border: solid #ebebeb;
  border-width: 0 7px 7px 0;
  padding: 5px;
  display: inline-block;
  margin-top: 19px;
  margin-left: 16px;
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

#contato {
  height: 8rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

#contato h2 {
  display: flex;
  justify-content: center;
}

.icon-contato {
  display: flex;
}

#contato .icon-contato .link {
  margin: 1px solid white;
  display: flex;
  justify-content: center;
}

#contato svg {
  height: 4rem;
  width: 25rem;
}

.bi {
  font-size: 1.3rem;
  cursor: pointer;
}

.bi-moon {
  display: none;
}

.dark .bi-sun {
  display: none;
}

.dark .bi-moon {
  display: block;
}

.dark .links-menu:hover {
  color: rgb(255, 160, 122);
  transition: 0.5s;
}

.dark,
.dark nav {
  background-color: #263238;
  color: #fff;
}

.dark a {
  color: #fff;
}

.dark svg {
  filter: drop-shadow(0 0 0.4em rgb(255, 160, 122));
}

.dark h1 {
  color: #fff;
}

.dark .eu img {
  border: 1px solid #fff;
}

.dark .title {
  color: white;
}

.init-hidden {
  opacity: 1;
  transition: opacity 1s linear;
}

.init-hidden-off {
  opacity: 1;
}

.box {
  transform: translateX(400%);
  transition: transform 0.8s ease;
}

.box:nth-of-type(even) {
  transform: translateX(-400%);
}

.box.show {
  transform: translateX(0);
}

@media screen and (max-width: 1281px) {
  .bi {
    margin-right: 24.3rem;
  }

  #menu {
    margin-left: 0.6rem;
  }

  #menu div {
    width: 14.2rem;
  }

  .icon-contato svg {
  }
  .links-menu {
    margin-left: 1rem;
    font-size: 1.6rem;
    margin-left: 6rem;
  }

  header {
    width: 62.5rem;
    height: 37.5rem;
  }
}

@media screen and (max-width: 890px) {
  .eu {
    margin-right: 15px;
  }

  header {
    width: 699px;
    height: 787px;
  }

  nav {
    width: 101%;
  }

  .bi {
    margin-right: 100px;
    margin-left: 40px;
  }

  #menu {
    margin-left: 2px;
  }

  #skills {
    width: 311px;
    display: grid;
    height: 438px;
  }

  #skills svg {
    max-width: 20%;
    margin-left: 62px;
    margin-bottom: 79px;
  }
  #skills h2 {
    margin-left: 63px;
  }

  main {
    max-width: 100vw;
  }

  .projetos {
    margin-left: -49px;
  }

  #contato {
    margin-left: 137px;
  }
}

@media screen and (max-width: 769px) {
  main {
    max-width: 100vw;
  }

  nav {
    width: 768px;
  }

  nav h1 {
    margin-left: 0px;
    width: 186px;
  }

  .bi {
    margin-right: 80px;
    margin-left: 23px;
  }

  header {
    display: contents;
  }

  main {
    top: 80px;
  }

  .texth2 {
    margin-top: 3%;
    text-align: center;
  }

  #skills h2 {
    margin-left: 38%;
  }

  #skills {
    width: 438px;
    margin-left: 105px;
    margin-top: 78px;
  }

  .img {
    height: 63%;
  }

  #contato {
    margin-left: 165px;
  }
}

@media screen and (max-width: 600px) {
  main {
    max-width: 125vw;
  }
}

@media screen and (max-width: 400px) {
  nav {
    width: 800px;
    height: 109px;
  }

  main {
    max-width: 184vw;
  }

  nav h1 {
    font-size: 26px;
  }

  a {
    font-size: 25px;
  }

  .eu {
    width: 566px;
    height: 738px;
  }

  #skills {
    display: grid;
    justify-items: center;

    position: static;

    max-width: 229px;
    height: 657px;
    margin-top: 18px;
    margin-left: -44px;
  }

  #skills h2 {
    margin-left: 0;
  }

  svg {
    max-width: 34%;
  }
}

@media screen and (max-width: 376px) {
  nav {
    width: 374px;
    height: 72px;
  }

  nav h1 {
    margin-left: 0px;
    font-size: 30px;
  }

  .bi {
    margin-right: 0px;
  }

  #menu {
    border: 1px solid black;
    display: none;
  }

  .eu {
    width: 306px;
    height: 738px;
    margin-top: 20px;
  }

  #skills {
    margin-left: 45px;
  }

  #skills h2 {
    margin-left: 87px;
  }

  .linha {
    font-size: 11px;
    margin-bottom: 30px;
  }

  .projetos {
    margin-bottom: -114px;
  }

  #contato {
    margin-left: 0px;
    width: 100%;
  }

  #contato a {
    font-size: 19px;
    margin-left: 52px;
  }

  #btnTop {
    margin-right: 255px;
  }
}