@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

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

body {
  font-family: 'Poppins', sans-serif;
  background: #f7f8fa;
  color: #222;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  transition: background 0.4s, color 0.4s;
}

/* ---------------- HEADER ---------------- */
header {
  position: relative;
  margin-bottom: 2rem;
}

/* Circular profile logo */
.profile-logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 3px solid #1967d2;
}

/* Responsive logo for small screens */
@media (max-width: 400px) {
  .profile-logo {
    width: 70px;
    height: 70px;
  }
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #1967d2;
}

.intro {
  font-size: 1.2rem;
  max-width: 700px;
  line-height: 1.6;
  color: #444;
}

/* ---------------- CONTENT ---------------- */
main.content {
  max-width: 700px;
  margin-bottom: 3rem; /* space for back link above footer */
}

.project {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
  transition: background 0.3s;
}

/* ---------------- LINKS ---------------- */
.links {
  display: flex;
  gap: 1.5rem;
  margin: 2rem 0;
}

.links a, .back-link {
  text-decoration: none;
  background: #1967d2;
  color: white;
  padding: 0.8rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s;
}

.links a:hover, .back-link:hover {
  background: #0d47a1;
  transform: translateY(-2px);
}

/* Ensure back-link doesn’t overlay footer */
.back-link {
  display: inline-block;
  margin-top: 2rem;
  clear: both;
}

/* ---------------- FOOTER ---------------- */
footer {
  margin-top: auto;
  font-size: 0.9rem;
  color: #666;
}

/* ---------------- GOOGLE STYLE SWITCH ---------------- */
.theme-toggle {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}

#theme-switch {
  display: none;
}

.google-switch {
  width: 52px;
  height: 28px;
  background: #ccc;
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}

.google-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

#theme-switch:checked + .google-switch {
  background: #1967d2;
}

#theme-switch:checked + .google-switch::after {
  transform: translateX(24px);
}

/* ---------------- DARK MODE ---------------- */
body.dark {
  background: #202124;
  color: #e0e0e0;
}

body.dark h1 { color: #8ab4f8; }
body.dark .intro { color: #ccc; }

body.dark .links a,
body.dark .back-link {
  background: #8ab4f8;
  color: #202124;
}

body.dark .links a:hover,
body.dark .back-link:hover {
  background: #5a95f5;
}

body.dark .project {
  background: #303134;
  color: #e0e0e0;
}

body.dark footer { color: #aaa; }

/* ---------------- MOBILE OPTIMIZATIONS ---------------- */
@media (max-width: 500px) {
  body { padding: 1rem; }
  h1 { font-size: 2rem; }
  .intro { font-size: 1rem; }
  .links a, .back-link { padding: 0.6rem 1rem; font-size: 0.9rem; }
}