@font-face {
  font-family: "COMIC";
  src: url("COMIC.TTF");
}

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

body {
  font-family: "COMIC", sans-serif;
  min-height: 100vh;
  color: white;
  overflow-x: hidden;

  /* espaço nas bordas (isso muda MUITO o visual) */
  padding: 1.5rem;

  background:
    radial-gradient(circle at 10% 10%, #1a1b3a, transparent 40%),
    radial-gradient(circle at 90% 20%, #0a3b5a, transparent 45%),
    radial-gradient(circle at 50% 90%, #3a0a5a, transparent 50%),
    linear-gradient(120deg, #05060f, #0b0f22);

  background-size: 200% 200%;
  animation: bgShift 14s ease infinite;
}

@keyframes bgShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* glow leve */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 200, 255, 0.10), transparent 40%),
    radial-gradient(circle at 80% 40%, rgba(255, 0, 180, 0.08), transparent 45%),
    radial-gradient(circle at 50% 70%, rgba(0, 255, 170, 0.07), transparent 50%);
  pointer-events: none;
  filter: blur(25px);
}

/* containers com MAIS respiro e menos “colado” */
header, main section, footer section {
  max-width: 85rem;
  margin: 2rem auto;   /* mais espaço entre blocos */
  padding: 1.8rem;     /* menos apertado */

  border-radius: 22px;

  background: rgba(255, 255, 255, 0.06); /* menos forte */
  border: 1px solid rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(18px); /* ↓ reduzido (era insano) */
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 15px 45px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.12);

  transition: 0.35s ease;
}

/* hover mais leve */
header:hover,
main section:hover {
  transform: translateY(-4px) scale(1.005);
}

/* títulos */
h1 {
  font-size: 2.6rem;
  text-align: center;
  text-shadow: 0 0 25px rgba(120,200,255,0.25);
}

h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

p {
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
}

/* grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}

/* cards mais “clean Apple” */
.project-card {
  padding: 1.2rem;
  border-radius: 18px;

  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow:
    0 12px 35px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.1);

  transition: 0.3s ease;
}

/* hover leve, sem exagero */
.project-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 55px rgba(0,0,0,0.55),
    0 0 25px rgba(120,200,255,0.10);
}

/* links clean */
a {
  text-decoration: none;
  color: #7dd3fc;
}

a:hover {
  color: #38bdf8;
}

/* footer */
footer {
  text-align: center;
  opacity: 0.75;
  padding-bottom: 1rem;
}