:root {
  --text: rgba(255, 255, 255, 0.92);
  --glass: rgba(255, 255, 255, 0.10);
  --glass-strong: rgba(255, 255, 255, 0.14);
  --border: rgba(255, 255, 255, 0.12);
}

body {
  margin: 0;
  font-family: "JetBrains Mono", Arial, sans-serif;
  color: var(--text);

  background: linear-gradient(
    180deg,
    #121a2a,
    #0f1422,
    #151a2c
  );
  min-height: 100vh;
}

/* HEADER */
header {
  text-align: center;
  padding: 50px;
  border-radius: 0 0 24px 24px;

  background: var(--glass);
  backdrop-filter: blur(14px);

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

/* SECTIONS */
section {
  max-width: 850px;
  margin: auto;
  padding: 40px 20px;
}

/* PROJECT BOX */
.project-box {
  padding: 20px;
  margin: 15px 0;
  border-radius: 16px;

  background: var(--glass);
  backdrop-filter: blur(14px);

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

  transition: transform 0.2s ease;
}

.project-box:hover {
  transform: translateY(-3px);
}

/* LINKS */
.project-link {
  color: #8bd5ff;
}

.project-link:hover {
  color: #c4b5fd;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 20px;
  margin-top: 20px;

  background: var(--glass);
  backdrop-filter: blur(14px);

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

/* PIZZA */
.pizza {
  display: block;
  text-align: center;
  font-size: 50px;
  margin-top: 20px;
}

/* ===================== */
/*  DESKTOP */
/* ===================== */
@media (min-width: 769px) {
  header,
  footer,
  .project-box {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
  }
}

/* ===================== */
/*  MOBILE */
/* ===================== */
@media (max-width: 768px) {
  body {
    background: linear-gradient(180deg, #1a2233, #141a2a);
  }

  header,
  footer,
  .project-box {
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.06);
  }
}