/* Reset da página */

.page-reset {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Faz com que ele ocupe 100% da altura da tela */
}

/* Faz com que a barra de scroll só apareça quando necessario */
html,
body {
  overflow-x: auto;
  overflow-y: auto;
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
}

/* Barra de navegação */


header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22px;
  margin: 1.5rem 1rem;
}
/* Titulo */

header nav .title {
  white-space: normal;
  margin-left: 10px;
}

.title .name,
.title .second-name {
  display: inline-block;
  text-transform: uppercase;
}

header nav .title .name {
  font-family: "Outfit-SemiBold";
  color: #000000;
}

header nav .title .second-name {
  color: #000046;
  text-decoration: underline 1px;
  text-underline-offset: 4px;
}

/* Conteudo principal */

/* Meu nome no perfil */
.img-box p {
  font-family: "Outfit-SemiBold";
  text-transform: uppercase;
  font-size: clamp(20px, 5vw, 25px);
  color: #000046;
  border-bottom: 1px solid #000046;
}

/* Titulo da caixa de texto */

.title-container h1 {
  font-size: clamp(28px, 5vw, 32px);
  text-transform: uppercase;
  color: #000046;
}
/* Efeito de digitacao */
#text-typing {
  white-space: nowrap;
  display: inline-block;
  border-right: 1px solid #000046;
  overflow: hidden;

  width: 0ch;
  animation: mark 0.7s step-end infinite, write 10s steps(11, end) infinite;
}

@keyframes mark {
  50% {
    border-right-color: transparent;
  }
}

@keyframes write {
  20% {
    width: 9.5ch;
  }
  80% {
    width: 9.5ch;
  }

  85% {
    width: 0;
  }

  115% {
    width: 9.5ch;
  }
}
/* Conteudo da caixa de texto */
.projects-btn-container a {
  text-transform: uppercase;
  color: #000;
}
/* Contatos */
.contact-box a {
  color: #000;
}