body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #001d3f;
    margin: 0;
}

.canvas {
    width: 550px;
    height: 822px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 40px auto;
    background: #181818;
    border-radius: 24px;
    border: 6px solid #fff;
    box-shadow: 0 12px 48px 0 rgba(0,0,0,0.35), 0 2px 8px 0 rgba(49,133,252,0.08);
    transition: box-shadow 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.canvas:hover {
    box-shadow: 0 24px 64px 0 rgba(49,133,252,0.18), 0 8px 32px 0 rgba(0,0,0,0.45);
    transform: rotate(-1.5deg) scale(1.015);
}

/* Animate the title with a gentle floating effect */
.title {
    position: absolute;
    margin-left: 220px;
    margin-top: 80px;
    width: 280px;
    animation: floatTitle 4s cubic-bezier(0.4,0,0.2,1) infinite alternate;
}
@keyframes floatTitle {
  0% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-10px); filter: brightness(1.08); }
  100% { transform: translateY(0); filter: brightness(1); }
}

/* Parallax effect for moon and clouds */
.moon {
    position: absolute;
    width: 150px;
    margin-top: 5px;
    margin-left: 410px;
    animation: moonParallax 8s cubic-bezier(0.4,0,0.2,1) infinite alternate;
}
@keyframes moonParallax {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
.clouds {
    position: absolute;
    width: 340px;
    margin-left: 200px;
    margin-top: 20px;
    animation: cloudsParallax 12s cubic-bezier(0.4,0,0.2,1) infinite alternate;
}
@keyframes cloudsParallax {
  0% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(18px); opacity: 0.92; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Enhance leaves with a little scale and rotation for more realism */
.leaves1, .leaves2, .leaves3, .leaves4 {
    animation-name: wind, leafFloat;
    animation-duration: 15s, 6s;
    animation-timing-function: ease, cubic-bezier(0.4,0,0.2,1);
    animation-iteration-count: infinite, infinite;
    animation-direction: normal, alternate;
}
@keyframes leafFloat {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.08) rotate(-8deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.background {
    width: 550px;
    height: 822px;
    position: absolute;
}

.leaves1 {
    position: absolute;
    width: 230px;
    margin-top: 25px;
    margin-left: -20px;
    animation: wind;
    animation-duration: 15s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

.leaves2 {
    position: absolute;
    width: 160px;
    margin-top: 70px;
    margin-left: 115px;
    animation: wind;
    animation-delay: 0.5s;
    animation-duration: 15s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

.leaves3 {
    position: absolute;
    width: 110px;
    margin-top: 90px;
    margin-left: -50px;
    animation: wind;
    animation-delay: 1s;
    animation-duration: 15s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

.leaves4  {
    position: absolute;
    width: 110px;
    margin-top: 105px;
    margin-left: 100px;
    animation: wind;
    animation-delay: 1.5s;
    animation-duration: 15s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

.title {
    position: absolute;
    margin-left: 220px;
    margin-top: 80px;
    width: 280px;
    animation: floatTitle 4s cubic-bezier(0.4,0,0.2,1) infinite alternate;
}

.clouds {
    position: absolute;
    width: 340px;
    margin-left: 200px;
    margin-top: 20px;
    animation: cloudsParallax 12s cubic-bezier(0.4,0,0.2,1) infinite alternate;
}

.moon {
    position: absolute;
    width: 150px;
    margin-top: 5px;
    margin-left: 410px;
    animation: moonParallax 8s cubic-bezier(0.4,0,0.2,1) infinite alternate;
}

.gandalfBody {
    position: absolute;
    margin-top: 510px;
    margin-left: 300px;
    width: 200px;
}

.gandalfHead {
    position: absolute;
    margin-top: 400px;
    margin-left: 330px;
    width: 120px;
    animation: headBop2;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

.bilboHead {
    position: absolute;
    margin-top: 464px;
    margin-left: 215px;
    width: 120px;
    animation: headBop;
    animation-duration: 8s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

.bilboBody {
    position: absolute;
    margin-top: 540px;
    margin-left: 180px;
    width: 140px;
}

.credits {
    position: absolute;
    margin-top: 770px;
    margin-left: 150px;
    width: 275px;
}

.overlay {
    width: 550px;
    position: absolute;
}

@keyframes headBop {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    75% {
        transform: rotate(15deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes headBop2 {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes moon {
    0% { filter: brightness(100%); }
    25% { filter: brightness(90%); }
    50% { filter: brightness(100%); }
    75% { filter: brightness(85%); }
    100% { filter: brightness(100%); }
}

@keyframes wind {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-5px, -5px); }
    50% { transform: translate(5px, 10px); }
    75% { transform: translate(-10px, 5px); }
    100% { transform: translate(0, 0); }
}