/* Basic page styling */
body {
  background-color: #3e8a1e;
  color: white;
  font-family: Verdana;
  margin: 0;
}

/* Coconut banner styling — EXACT Google Forms size */
#banner {
  width: 1600px;      /* Google Forms width */
  height: 400px;      /* Google Forms height */
  display: block;
  margin: 20px auto;  /* centers it */
  object-fit: cover;  /* crops like Google Forms */
  object-position: center;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Coconut floating animation */
@keyframes coconutFloat {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}

/* YouTube button styling */
.yt-button,
.yt-button:link,
.yt-button:visited {
  display: inline-block;
  background-color: #FF0000; /* red fill */
  color: white;              /* text color */
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-family: Verdana;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.yt-button:hover,
.yt-button:active {
  background-color: #CC0000; /* darker red on hover */
  transform: scale(1.05);
}

.yt-button:hover {
  background-color: #CC0000; /* darker red on hover */
  transform: scale(1.05);
}

/* Content box styling */
.content-box {
  background: rgba(255, 255, 255, 0.15);
  padding: 20px;
  border-radius: 12px;
  max-width: 900px;
  margin: 0 auto;
  backdrop-filter: blur(4px);
}