body{
    margin:0;
    padding:40px;
    background:url("sky.png") top center/cover no-repeat fixed;
    font-family:Georgia,serif;
}

.wrapper{
    width:500px;
    margin:220px auto 40px;
    position:relative;
}

.gate{
    position:absolute;
    top:0;
    width:180px;
    height:100%;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    pointer-events:none;
}

.left{
    left:-160px;
    background-image:url("leftgate.png");
}

.right{
    right:-160px;
    background-image:url("rightgate.png");
}

.panel{
    background:rgba(255,255,255,.9);
    border:4px solid #fff;
    border-radius:20px;
    padding:35px;
    min-height:1100px;
    text-align:center;
    box-shadow:0 0 20px #fff,0 0 45px rgba(255,255,255,.6);
    overflow:hidden;
}

h1{
    margin-top:0;
    line-height:1;
}

.small-title{
    display:block;
    font-size:24px;
    color:#7d97e8;
    letter-spacing:2px;
    text-transform:uppercase;
}

.big-title{
    display:block;
    font-size:72px;
    font-family:Georgia, serif;
    color:#84a1f7;
    text-shadow:
        0 0 8px #fff,
        0 0 18px rgba(132,161,247,.6);
}

.big-title em{
    font-style:italic;
    
}
h1{
    margin-top:25px;
    margin-bottom:60px;
    line-height:1;
}
h1 em{
    font-style:italic;
}
.title-star{
    width:60px;
    height:auto;
    margin:0 10px;
    animation:starFloat 2.5s ease-in-out infinite;
}

@keyframes starFloat{
    0%{ transform:translateY(0px); }
    50%{ transform:translateY(-4px); }
    100%{ transform:translateY(0px); }
}
h2{
    color:#6980cf;
    margin-top:35px;
}

p{
    color:#444;
    line-height:1.8;
}

a{
    color:#6c8df2;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

.info-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.info-box{
    background:#d8b4ff;
    border:2px solid #b06cff;
    padding:10px 14px;
    text-align:left;
    font-size:14px;
    line-height:1.6;
    color:#2a003f;
    box-shadow:2px 2px 0 #7a2cff;
}

.angel{
    width:110px;
    transform-origin:top center;
    animation:swing 3s ease-in-out infinite;
}

@keyframes swing{
    0%{transform:rotate(-4deg);}
    50%{transform:rotate(4deg);}
    100%{transform:rotate(-4deg);}
}

/* Divider */

img[alt="divider"]{
    display:block;
    margin:20px auto;
}

/* Infinite banners */

.banner-slider{
    width:100%;
    overflow:hidden;
    margin:35px 0;
}

.banner-track{
    display:flex;
    gap:20px;
    width:max-content;
    animation:marquee 12s linear infinite;
}

.banner-track:hover{
    animation-play-state:paused;
}

.banner-track a{
    flex:none;
}

.banner-track img{
    width:200px;
    height:40px;
    display:block;
}

@keyframes marquee{
    from{transform:translateX(0);}
    to{transform:translateX(-660px);}
}
/* ===== Spotify ===== */

.music-box{
    text-align:center;
    margin:25px 0;
}

.music-row{
    position: relative;
    width: 250px;
    margin: 0 auto;
    left: -30px; /* increase to -40px, -50px, etc. */
}

.music-row iframe{
    display:block;
}

.music-angel{
    position:absolute;
    width:120px;
    right:-90px;
    bottom:-5px;
    z-index:10;

    animation: floatAngel 3s ease-in-out infinite;
}

@keyframes floatAngel{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-8px);
    }
    100%{
        transform:translateY(0px);
    }
}
.bottom-gif{
    width:420px;
    display:block;
    margin:60px auto 20px auto; /* more space above it */
}
.bottom-text{
    text-align:center;
    font-size:12px;
    color:#7d97e8;
    margin-top:10px;
    letter-spacing:1px;
}

/* wip */
.wip-title{
    font-size:28px;
    color:#84a1f7;
    margin-top:20px;
    text-shadow:0 0 10px rgba(255,255,255,.6);
}

.wip-text{
    font-size:14px;
    color:#444;
    margin-top:10px;
    line-height:1.6;
}

.back-link{
    display:inline-block;
    margin-top:25px;
    color:#6c8df2;
    text-decoration:none;
}

.back-link:hover{
    text-decoration:underline;
}