/* Basis */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Share Tech Mono', monospace;
  background: #0f0f0f;
  color: #fff;
  scroll-behavior: smooth;
}

/* Hero */
#hero {
  display:flex; justify-content:center; align-items:center;
  height:100vh;
  background: linear-gradient(135deg,#0f0f0f,#001f3f);
  text-align:center;
}
#hero h1 { font-size:4rem; margin-bottom:1rem; color:#00ffff; }
#hero p { font-size:1.5rem; color:#0ff; min-height:2rem; }
.btn { display:inline-block; margin-top:1.5rem; padding:0.7rem 1.5rem; background:#0ff; color:#000; text-decoration:none; border-radius:5px; transition:0.3s;}
.btn:hover { background:#00bfff; }

/* Sections */
section { padding:4rem 2rem; max-width:1000px; margin:auto; }
h2 { color:#0ff; margin-bottom:1rem; text-align:center; }

/* Skills */
.skills { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:1rem; }
.skills span { background: rgba(0,255,255,0.1); padding:0.5rem 1rem; border-radius:5px; transition:0.3s; }
.skills span:hover { background:#0ff; color:#000; }

/* GitHub Repos */
#repo-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; }
.repo-card { background: rgba(0,255,255,0.05); padding:1rem; border-radius:10px; transition:0.3s; }
.repo-card:hover { transform:translateY(-5px); box-shadow:0 0 20px #0ff; }
.repo-card a { color:#0ff; text-decoration:none; }

/* Upcoming Projects */
.upcoming-projects { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.project { background: rgba(0,255,255,0.05); padding:1rem; border-radius:10px; min-width:200px; transition:0.3s; }
.project:hover { transform:translateY(-5px); box-shadow:0 0 20px #0ff; }

/* Fortschrittsbalken */
.progress-bar {
  background: rgba(0,255,255,0.1);
  border-radius: 10px;
  width: 100%;
  height: 20px;
  margin: 0.5rem 0;
  overflow: hidden;
}
.progress {
  background: #0ff;
  height: 100%;
  width: 0;
  border-radius: 10px;
  transition: width 1.5s ease-in-out;
}

/* Contact */
#contact a { color:#0ff; text-decoration:none; }
#contact a:hover { text-decoration:underline; }

/* Footer */
footer { text-align:center; padding:2rem; background:#001f3f; color:#0ff; }