body {
  background-color: #63458f; /* Your purple background */
  color: white;              /* White text */
  font-family: sans-serif;   /* Modern text style */
  text-align: center;        /* Centers all text and boxes */
  padding: 40px;
}

/* 📦 THE TITLE FRAME BOX */
.title-box {
  background-color: #240f47;   /* Deep dark purple background inside the box */
  border: 5px solid #240f47;   /* Solid frame line */
  border-radius: 10px;         /* Rounds the corners to match the 3D box */
  max-width: 550px;            /* Matches the exact width of your 3D viewer! */
  margin: 0 auto 30px auto;    /* Centers the box on screen and adds space below it */
  padding: 15px;
}

/* TITLE STYLE INSIDE THE BOX */
h1 {
  font-size: 3.5rem;           
  margin: 0;                   /* Removes default spacing so it sits perfectly in the box */
  letter-spacing: 3px;       
}

/* PARAGRAPHS OUTSIDE THE BOX */
p {
  font-size: 1.2rem;
  margin-bottom: 15px;
}

/* 📺 YOUTUBE BUTTON STYLING */
.youtube-button {
  display: inline-block;
  background-color: #240f47;   /* Deep dark purple to match your frame */
  color: white;                /* White text */
  text-decoration: none;       /* Removes the default ugly underline */
  padding: 12px 24px;          /* Adds puffiness to make it look like a button */
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 8px;          /* Rounds the corners */
  border: 3px solid #240f47;
  margin-top: 10px;
  margin-bottom: 30px;
  transition: all 0.2s ease;   /* Makes the color change smooth */
}

/* ✨ HOVER EFFECT */
.youtube-button:hover {
  background-color: white;     /* Flips background to white on hover */
  color: #240f47;              /* Changes text to dark purple on hover */
  cursor: pointer;
}