.box {
  max-width: 1000px;
  margin: 50px auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 250px auto;
}

header, nav, main, footer {
  border: black 4px solid;
  background: linear-gradient(270deg, #1e3a8a, #3b82f6, #60a5fa);
  background-size: 400% 400%;
  animation: blueGradient 12s ease infinite;
  font-family: papyrus;
  /* Add this here so it applies to everything at once */
  background-clip: padding-box; 
  color: white;
}


header {
  border: 20px solid; 
  padding: 0px;
  overflow: hidden;
  border-image: url(border.png) 30 stretch;
  text-align: center;
  font-size: 30px;
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}


nav {
  border: 20px solid; 
  padding: 0px;
  overflow: hidden;
  border-image: url(border.png) 30 stretch;
  text-align: center;
  font-size: 10px;
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

main {
    border: 20px solid transparent; 
    border-image: url("border.png") 30 stretch;
    overflow: visible; /* Changed from hidden so the TV frame can show */
    text-align: center;
    font-size: 25px;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    position: relative; 
    min-height: 400px;
    padding: 20px;
    background-clip: padding-box;
}

main iframe {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 280px;
    height: 180px;
    
    /* The Bubble TV Frame */
    border: 18px solid transparent; 
    border-image: url("Bubble.gif") 30 round;
    
    /* This pushes the bubbles outside the video so they don't hide */
    border-image-outset: 5px; 
    
    background-color: black;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

footer {
  border: 20px solid; 
  padding: 0px;
  overflow: hidden;
  border-image: url(border.png) 30 stretch;
  text-align: center;
  font-size: 30px;
  grid-row: 3 / 4;
  grid-column: 1 / 3;
}

ul { 
  padding: 0;
}

ul li:: marker {
  display: none;
}

body {
    background-color: #03b6fc;
    background-image: url('Background.gif');
    background-size: cover;
   background-position: center;
}
   
   @keyframes blueGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
 
 nav a {
  color: white;
  text-decoration: none; /* Removes the underline if you want a cleaner look */
}

nav a:hover {
  color: #93c5fd; /* Light blue glow when you hover over them */
}
nav a:hover {
  color: #ffeb3b; /* A golden yellow to contrast the blue */
  text-shadow: 0px 0px 8px #fff; /* A soft glow */
  letter-spacing: 1px; /* Subtle expansion when hovered */
  transition: 0.3s;
}