/* ===== GLOBAL RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== BACKGROUND ===== */
body {
  font-family: Verdana, sans-serif;
  background: radial-gradient(circle at top, #d7f5c8, #a8e08a);
  color: #333;
  text-align: center;
}

/* ===== MAIN CENTER LAYOUT ===== */
.container {
  width: 800px;
  margin: 30px auto;
  background: #2f7d1f;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* ===== HEADER BAR ===== */
.header {
  height: 180px; /* controls crop height */
  background-image: url("https://html-games-4w2.pages.dev/pictures/5.png");
  background-size: cover;        /* fills area */
  background-position: top;   /* crops nicely */
  background-repeat: no-repeat;

  border-radius: 6px;
  margin-bottom: 10px;

  display: flex;
  align-items: flex-end; /* pushes text to bottom */
  padding: 15px;
}

.header h1 {
  color: white;
  background: rgba(0,0,0,0.4); /* readable overlay */
  padding: 5px 10px;
  border-radius: 4px;
}

/* ===== CONTENT BOX (this is your “center white bar” idea) ===== */
.content {
  background: #fff8dc;
  padding: 20px;
  border-radius: 6px;
  text-align: left;
}

/* ===== TEXT ===== */
.content h2 {
  margin-bottom: 10px;
  color: #2f7d1f;
}

.content p {
  margin-bottom: 10px;
  line-height: 1.5;
}

/* ===== IMAGES (prevents full-screen breakage) ===== */
.content img {
  max-width: 300px;   /* change this value */
  width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
  border-radius: 6px;
}

/* ===== FUN HOVER EFFECT ===== 
.content:hover {
  transform: translateY(-2px);
  transition: 0.2s ease;
}
*/

/*
✔ centered
✔ smaller width
✔ rounded corners
✔ shadow (that “floating card” feel)
*/

.video-3d {
  width: 90%;
  max-width: 200px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  margin: 1.5rem auto;
  display: block;
}

.video-3d:hover {
  transform: scale(1.03);
  transition: 0.2s;
}