*{

  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Segoe UI',sans-serif;
  
  }
  
  
  html{
  
  scroll-behavior:smooth;
  
  }
  
  
  body{
  
  background:#0b0b14;
  color:white;
  
  }
  
  
  /* CABEÇALHO */
  
  header{
  
  position:fixed;
  top:0;
  
  width:100%;
  
  background:#111124;
  
  padding:20px;
  
  z-index:10;
  
  }
  
  
  /* FOTO NO CANTO SUPERIOR ESQUERDO */
  
  .foto-perfil{
  
  position:absolute;
  
  left:25px;
  top:15px;
  
  }
  
  
  .foto-perfil img{
  
  width:90px;
  height:90px;
  
  border-radius:50%;
  
  object-fit:cover;
  
  border:3px solid #7c3cff;
  
  box-shadow:
  0 0 20px #7c3cff;
  
  }
  
  
  
  /* MENU */
  
  
  nav{
  
  display:flex;
  
  justify-content:center;
  
  align-items:center;
  
  flex-direction:column;
  
  }
  
  
  nav h1{
  
  color:#7c3cff;
  
  }
  
  
  nav ul{
  
  display:flex;
  
  gap:25px;
  
  list-style:none;
  
  margin-top:15px;
  
  }
  
  
  nav a{
  
  color:white;
  
  text-decoration:none;
  
  }
  
  
  nav a:hover{
  
  color:#7c3cff;
  
  }
  
  
  
  /* INÍCIO */
  
  
  .inicio{
  
  height:100vh;
  
  display:flex;
  
  justify-content:center;
  
  align-items:center;
  
  text-align:center;
  
  background:
  linear-gradient(
  135deg,
  #0b0b14,
  #202050
  );
  
  }
  
  
  .conteudo h2{
  
  font-size:45px;
  
  }
  
  
  .conteudo span{
  
  color:#7c3cff;
  
  }
  
  
  .conteudo h3{
  
  margin:20px;
  
  font-size:25px;
  
  }
  
  
  button{
  
  background:#7c3cff;
  
  color:white;
  
  border:none;
  
  padding:12px 25px;
  
  border-radius:30px;
  
  cursor:pointer;
  
  transition:.3s;
  
  }
  
  
  button:hover{
  
  background:#9d70ff;
  
  transform:scale(1.05);
  
  }
  
  
  
  
  /* SEÇÕES */
  
  
  section{
  
  padding:100px 10%;
  
  text-align:center;
  
  }
  
  
  section h2{
  
  font-size:35px;
  
  margin-bottom:30px;
  
  }
  
  
  
  /* CARDS */
  
  
  .container{
  
  display:flex;
  
  justify-content:center;
  
  gap:25px;
  
  flex-wrap:wrap;
  
  }
  
  
  .card{
  
  background:#18182b;
  
  width:280px;
  
  padding:30px;
  
  border-radius:20px;
  
  box-shadow:
  0 10px 30px #000;
  
  transition:.4s;
  
  }
  
  
  .card:hover{
  
  transform:translateY(-15px);
  
  }
  
  
  
  /* HABILIDADES */
  
  
  .habilidades{
  
  display:flex;
  
  justify-content:center;
  
  gap:20px;
  
  flex-wrap:wrap;
  
  }
  
  
  .habilidades div{
  
  background:#7c3cff;
  
  padding:15px 30px;
  
  border-radius:30px;
  
  }
  
  
  
  /* FORMULÁRIO */
  
  
  form{
  
  max-width:500px;
  
  margin:auto;
  
  display:flex;
  
  flex-direction:column;
  
  gap:15px;
  
  }
  
  
  input,
  textarea{
  
  padding:15px;
  
  border:none;
  
  border-radius:10px;
  
  }
  
  
  textarea{
  
  height:120px;
  
  }
  
  
  
  /* FOOTER */
  
  
  footer{
  
  background:#050509;
  
  padding:25px;
  
  text-align:center;
  
  }
  
  
  
  /* CELULAR */
  
  
  @media(max-width:700px){
  
  
  .foto-perfil{
  
  position:relative;
  
  left:auto;
  top:auto;
  
  margin-bottom:15px;
  
  }
  
  
  .foto-perfil img{
  
  width:70px;
  height:70px;
  
  }
  
  
  nav ul{
  
  flex-direction:column;
  
  align-items:center;
  
  }
  
  
  .conteudo h2{
  
  font-size:30px;
  
  }
  
  
  }