body {
  font-family: "Inter", sans-serif;
  background: linear-gradient(135deg, #e0f2fe 0%, #f1f5f9 100%);
  position: relative;
  min-height: 100vh;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Cpath fill="%2306B6D4" fill-opacity="0.05" d="M10 10h10v10H10zM80 80h10v10H80zM20 80h10v10H20zM80 20h10v10H80z"/%3E%3C/svg%3E');
  z-index: -1;
}

.icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 8px;
}

.section-title {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 50%;
  height: 3px;
  background-color: #f59e0b;
}

.hover-scale:hover {
  transform: scale(1.02);
  transition:
    transform 0.3s ease-in-out,
    background-color 0.3s ease-in-out;
  background-color: #e0f2fe;
}

.link-blue {
  color: #1e3a8a;
  transition: color 0.2s ease-in-out;
}

.link-blue:hover {
  color: #06b6d4;
  text-decoration: underline;
}

.container {
  opacity: 0.98;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
}

.github-footer-link {
  color: #1f2937;
  transition:
    color 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.github-footer-link:hover {
  color: #0f172a;
  transform: translateY(-1px);
}

.github-footer-link img {
  margin-right: 10px;
}

@media (max-width: 640px) {
  .container {
    padding: 1rem;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }
}