/* Import Playpen Sans font */
@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap');

/* Global Styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Playpen Sans', sans-serif; /* Now using Playpen Sans */
  background-color: #87CEEB; /* Light background for a fresh look */
  color: #333;
}

.container {
  max-width: 95%;
  margin: 30px auto;
  overflow: hidden;
  padding: 10px;
  background-color: #bbe8fa; /* Lighter blue container background */
  border-radius: 10px; /* Rounded corners for the container */
  box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.content {
  margin: 40px 0;
  text-align: center; /* Center content text */
}

.player-wrapper {
  max-width: 640px;
  margin: 0 auto 40px; /* Center the player with margin */
  aspect-ratio: 16 / 9;
  border-radius: 10px; /* Rounded corners for the player */
  overflow: hidden; /* Ensure corners stay rounded */
}

@media (max-width: 640px) {
  .player-wrapper {
    width: 100%;
  }
}

footer {
  background: #87CEEB
  color: #073b4f;
  text-align: center;
  padding: 20px 0;
  margin-top: 40px;
  font-family: 'Playpen Sans', sans-serif; /* Now using Playpen Sans */
  font-size: 1em;
}

/* Interactive elements hover effect */
a,
button {
  transition: transform 0.2s ease;
}

a:hover,
a:focus,
button:hover,
button:focus {
  transform: translateY(-3px); /* Slight raise effect */
  text-decoration: none;
}

/* Animation for the header and footer text */
@keyframes fadeIn {
  from { opacity: 0;}
  to { opacity: 1;}
}

header,
footer {
  animation: fadeIn 1s ease-in;
}

/* Simple separator style */
.simple-separator {
  margin: 40px auto;
  height: 1px;
  width: 80%; /* Control the width to suit your layout */
  background-color: #429abd; /* A neutral color for the separator line */
  border: none; /* No border for simplicity */
}