/* Reset & Basic Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: linear-gradient(135deg, #0d1117, #0f1320, #0d1117, #0c1a2e);
  color: #e6edf3;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-size: 400% 400%;
  animation: backgroundShift 30s ease infinite;
}

/* Animated subtle blue glint */
@keyframes backgroundShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: center; /* center the header content */
  padding: 20px;
  background-color: #0c1a2e; /* match the dark-blue gradient glint */
}

.header .brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #e6edf3;
}

.header .pfp {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
  border: 2px solid #00ff66;
}

.header .logo-text {
  font-size: 1.8rem;
  font-weight: bold;
}

.header .highlight {
  color: #f3d633; /* yellow highlight for "Paradise" */
}

/* Hero Section */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 50px 20px;
}

.hero-pfp {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid #00ff66;
  margin-bottom: 20px;
  animation: spin 20s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero h1 {
  font-size: 3rem;
}

.hero .subtitle {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #c0c0c0;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.btn {
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: 0.3s;
}

.btn.primary {
  background-color: #00ff66;
  color: #0d1117;
}

.btn.primary:hover {
  background-color: #00cc55;
}

.btn.outline {
  border: 2px solid #00ff66;
  color: #00ff66;
}

.btn.outline:hover {
  background-color: #00ff66;
  color: #0d1117;
}

/* Projects Section */
.projects, .music, .videos {
  padding: 50px 20px;
  text-align: center;
}

.projects h2, .music h2, .videos h2 {
  font-size: 2.5rem;
  margin-bottom: 30px;
}

.project, .video-card {
  margin-bottom: 30px;
}

.project iframe, .video-card iframe {
  width: 100%;
  max-width: 600px;
  height: 340px;
  border-radius: 12px;
}

/* Music Section */
.music iframe {
  max-width: 660px;
  border-radius: 12px;
}

/* Video Grid */
.video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.video-card {
  flex: 1 1 300px;
  text-align: center;
}

/* YouTube Profile Placeholder */
.youtube-profile {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #00ff66;
}