:root{
  --bg: #111111;
  --bg-secondary: #1a1a1a;
  --card: rgba(28,28,28,0.82);

  --text: #f1f1f1;
  --text-secondary: #b8b8b8;

  --primary: #d8c3a5;
  --primary-dark: #b89b76;

  --border: rgba(255,255,255,0.06);

  --shadow:
    0 10px 30px rgba(0,0,0,0.35);

  --blur: blur(12px);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',sans-serif;
  background:
    radial-gradient(circle at top, #2b2b2b 0%, #111111 45%);
  color:var(--text);
  line-height:1.7;
}

/* HEADER */

header{
  text-align:center;
  padding:80px 20px 60px;
}

header img{
  width:320px;
  max-width:90%;
  border-radius:20px;

  border:1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.45);

  transition:0.4s ease;
}

header img:hover{
  transform:
    translateY(-6px)
    scale(1.01);
}

h1{
  margin-top:30px;
  font-size:3rem;
  font-weight:600;
  letter-spacing:-1px;

  color:#ffffff;
}

header p{
  margin-top:12px;
  color:var(--text-secondary);
  font-size:1.05rem;
}

/* MAIN */

main{
  max-width:950px;
  margin:auto;
  padding:20px;
}

/* CARDS */

.card{
  background:var(--card);

  backdrop-filter:var(--blur);

  border:1px solid var(--border);

  border-radius:22px;

  padding:28px;

  margin-bottom:24px;

  box-shadow:var(--shadow);

  transition:0.35s ease;

  opacity:0;
  transform:translateY(20px);
}

.card.visible{
  opacity:1;
  transform:translateY(0);
}

.card:hover{
  transform:translateY(-6px);

  border-color:rgba(216,195,165,0.18);

  box-shadow:
    0 20px 45px rgba(0,0,0,0.45);
}

/* TITULOS */

h2{
  font-size:1.4rem;
  margin-bottom:18px;

  color:var(--primary);

  font-weight:600;
}

/* TEXTO */

p, li{
  color:var(--text-secondary);
}

ul{
  padding-left:18px;
}

li{
  margin-bottom:8px;
}

/* LINKS */

a{
  color:var(--primary);
  text-decoration:none;

  transition:0.3s ease;
}

a:hover{
  color:#ffffff;
}

/* SKILLS */

.skills{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.skills span{
  background:#232323;

  border:1px solid rgba(255,255,255,0.06);

  color:#d6d6d6;

  padding:10px 16px;

  border-radius:999px;

  font-size:0.92rem;

  transition:0.3s ease;
}

.skills span:hover{
  background:#2d2d2d;

  transform:translateY(-2px);
}

/* ARTIGOS */

.artigos{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.artigo{
  background:#1d1d1d;

  border:1px solid rgba(255,255,255,0.05);

  border-radius:16px;

  padding:18px;

  transition:0.35s ease;
}

.artigo:hover{
  transform:translateY(-4px);

  border-color:rgba(216,195,165,0.16);

  background:#242424;
}

.artigo h3{
  margin-top:8px;

  color:#f3f3f3;

  font-size:1.05rem;

  font-weight:500;
}

.artigo .data{
  color:#8f8f8f;

  font-size:0.82rem;
}

/* FOOTER */

footer{
  text-align:center;

  padding:40px 20px;

  color:#777;

  font-size:0.9rem;
}

/* RESPONSIVO */

@media(max-width:768px){

  h1{
    font-size:2.1rem;
  }

  header{
    padding-top:50px;
  }

  .card{
    padding:22px;
  }

  header img{
    width:260px;
  }
}