@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;500;800&display=swap');

:root{
  --yellow:#facc15;
  --black:#020617;
  --red:#ef4444;
  --white:#f8fafc;
}

*{box-sizing:border-box;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--yellow);
  color:var(--black);
  font-family:'Inter', sans-serif;
}

header{
  position:fixed;
  top:0;
  width:100%;
  background:rgba(2,6,23,0.95);
  z-index:100;
}

.navbar{
  display:flex;
  justify-content:center;
  gap:25px;
  padding:15px;
}

.nav-link{
  color:white;
  text-decoration:none;
  font-weight:700;
  letter-spacing:1px;
}

/* СТИЛИ ВЫПАДАЮЩЕГО МЕНЮ */
.dropdown { position: relative; }
.dropbtn { background:none; border:none; color:white; font-family:inherit; font-size:inherit; font-weight:700; cursor:pointer; padding:0; }
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #020617;
  border: 3px solid black;
  min-width: 160px;
  margin-top: 10px;
  box-shadow: 6px 6px 0 black;
}
.dropdown-content.active { display: block; }
.dropdown-content a { color:white; padding:10px; text-decoration:none; display:block; font-size:14px; }
.dropdown-content a:hover { background: var(--red); }

section{ padding:120px 8%; min-height:100vh; }

.hero{ display:flex; align-items:center; justify-content:space-between; gap:40px; }
.hero h1{ font-family:'Bebas Neue', sans-serif; font-size:4rem; letter-spacing:4px; text-transform:uppercase; }

.typing{ font-weight:800; background:black; color:var(--yellow); display:inline-block; padding:6px 12px; margin-top:15px; }
.avatar{ width:260px; border:6px solid black; transform:rotate(-3deg); }

.btn{ display:inline-block; margin-top:15px; padding:12px 25px; background:black; color:white; text-decoration:none; font-weight:800; border:3px solid black; transition:.2s; cursor:pointer; }
.btn:hover{ background:var(--red); }

.bar{ background:white; height:12px; border:3px solid black; }
.bar div{ background:linear-gradient(90deg,var(--red),black); height:100%; }

.cards, .games-container { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:25px; }
.card, .project-card { background:white; border:5px solid black; padding:15px; box-shadow:8px 8px 0 black; transition:.2s; }

input,textarea{ border:3px solid black; padding:10px; font-weight:600; width:100%; margin-bottom:10px; }
footer{ text-align:center; padding:20px; background:black; color:white; }

/* КЛЕТКИ ЛАБИРИНТА */
.maze-cell { width:100%; aspect-ratio:1; background:white; }
.maze-wall { background:black; }
.maze-player { background:var(--red); border-radius:50%; }
.maze-exit { background:var(--yellow); }