body {
    margin: 0;
    font-family: 'Garamond', serif;
    background: #02101e;
    overflow-x: hidden;
    color: #f5faff;
}

.topnav {
  background-color: rgba(10, 10, 30, 0.85);
  overflow: hidden;
  text-align: center;
  padding: 0.5em 0;
  white-space: nowrap;
}

.topnav a {
  display: inline-block;
  color: #f0e6d2;
  padding: 0.75em 2em;
  font-size: 1.1em;
  transition: background-color 0.3s, color 0.3s;
}

.topnav a:hover {
  background-color: #444;
  color: #ffd700;
}

.banner {
    text-align: center;
    padding: 2rem;
    background: rgba(0, 20, 40, 0.85);
    border-bottom: 4px double #3fa9f5;
    position: relative;
    z-index: 1000;
}

h1 {
    font-size: 3rem;
    margin: 0;
}

.poem-box {
    display: inline-block;  /* shrink to fit content width */
    max-width: 90%;         /* stop it from going off-screen */
    border: 12px solid transparent;
    padding: 1rem;
    border-image: url('INSERT-WAVE-OR-ROPE-IMAGE') 30 round;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 20px rgba(63, 169, 245, 0.7);
}

.poem-box h2 {
    font-size: 1.1rem;
    color: #a3d5ff;
}

.poem-box p {
    margin: 0;              /* removes big gaps between lines */
    line-height: 1.1;       /* adjusts vertical spacing */
    white-space: pre-line;  /* keeps your manual breaks intact */
}

/* Chaotic placement of poem boxes */
.pos1 { top: 200px; left: 50px; transform: rotate(2deg); }
.pos2 { top: 450px; left: 350px; transform: rotate(-3deg); }
.pos3 { top: 150px; right: 80px; transform: rotate(1deg); }
.pos4 { top: 500px; right: 200px; transform: rotate(-2deg); }

/* Floating images that act like stickers */
.floating-img {
    position: absolute;
    z-index: 1;
    max-width: 200px;
    opacity: 0.8;
    transform: rotate(-2deg);
}

.ship1 { top: 100px; left: 250px; }
.waves1 { top: 400px; left: 20px; }
.monster1 { top: 350px; right: 50px; }
.storm1 { top: 50px; right: 250px; }
.lighthouse1 { top: 600px; left: 150px; }
.gulls1 { top: 250px; right: 300px; }

@keyframes drift {
    0%   { transform: translate(0, 0) rotate(2deg); }
    25%  { transform: translate(5px, -3px) rotate(3deg); }
    50%  { transform: translate(-4px, 4px) rotate(1deg); }
    75%  { transform: translate(6px, 2px) rotate(2deg); }
    100% { transform: translate(0, 0) rotate(2deg); }
}

.floating-video {
    position: absolute;
    top: 700px;   /* adjust placement */
    right: 100px; /* adjust placement */
    width: 180px;
    height: 200px;
    border: 2px solid #3fa9f5;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(63, 169, 245, 0.5);
    z-index: 5;
    animation: drift 12s ease-in-out infinite;
}

footer {
    text-align: center;
    padding: 1rem;
    background: rgba(0, 20, 40, 0.85);
    font-size: 0.9rem;
    position: relative;
    z-index: 1000;
}