@import url('https://fonts.googleapis.com/css2?family=Jacquard+12&family=Pixelify+Sans:wght@400;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: #fca7d9;
    background-image: url('https://64.media.tumblr.com/01022cdc35cf42aca5469591819d3df5/tumblr_inline_ml8041zEvG1qz4rgp.gif');
    font-family: 'Pixelify Sans', 'Courier New', Courier, monospace;
    color: #e8a8c6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* floating deco, same as rest of the site */
.floatdeco {
    position: fixed;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
    image-rendering: pixelated;
}

.deco1  { top: 5%;   left: 1%;   animation: floaty 4s   ease-in-out infinite; }
.deco2  { top: 15%;  left: 4%;   animation: floaty 5s   ease-in-out infinite 0.5s; }
.deco3  { top: 28%;  left: 0%;   animation: floaty 3.5s ease-in-out infinite 1s; }
.deco4  { top: 42%;  left: 3%;   animation: floaty 4.5s ease-in-out infinite 0.2s; }
.deco5  { top: 55%;  left: 1%;   animation: floaty 4s   ease-in-out infinite 1.5s; }
.deco6  { top: 68%;  left: 4%;   animation: floaty 5s   ease-in-out infinite 0.8s; }
.deco7  { top: 80%;  left: 0%;   animation: floaty 3.8s ease-in-out infinite 0.3s; }
.deco8  { top: 90%;  left: 3%;   animation: floaty 4.2s ease-in-out infinite 1.2s; }
.deco9  { top: 8%;   right: 1%;  animation: floaty 4s   ease-in-out infinite 0.7s; }
.deco10 { top: 20%;  right: 3%;  animation: floaty 5s   ease-in-out infinite 0.4s; }
.deco11 { top: 33%;  right: 0%;  animation: floaty 3.6s ease-in-out infinite 1.1s; }
.deco12 { top: 46%;  right: 4%;  animation: floaty 4.8s ease-in-out infinite 0.9s; }
.deco13 { top: 58%;  right: 1%;  animation: floaty 4.1s ease-in-out infinite 0.1s; }
.deco14 { top: 70%;  right: 3%;  animation: floaty 3.9s ease-in-out infinite 1.3s; }
.deco15 { top: 82%;  right: 0%;  animation: floaty 4.4s ease-in-out infinite 0.6s; }
.deco16 { top: 92%;  right: 4%;  animation: floaty 5s   ease-in-out infinite 1.8s; }

@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

/* page wrap */
.page-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* big banner */
.banner-wrap {
    width: 100%;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.banner-window {
    border: 2px solid #df387d;
    background-color: #FFB9D8;
    padding: 4px;
    padding-bottom: 0px;
    box-shadow:
        inset 0px 3px 0px 0px #ffd6e8,
        inset 0px -3px 0px 0px #d4709e,
        inset 3px 0px 0px 0px #ffd6e8,
        inset -3px 0px 0px 0px #d4709e;
}

.banner-window .banner-title {
    border: 2px solid #fb80b4;
    background-color: #FFF4F6;
    background-image: linear-gradient(180deg, transparent 40%, rgba(255,255,255,0.7) 48%, rgba(255,255,255,0.7) 52%, transparent 60%);
    font-family: 'Pixelify Sans', monospace;
    font-weight: bold;
    color: #fb80b4;
    font-size: 20px;
    height: 22px;
    line-height: 22px;
    padding: 0 6px;
}

.banner-window .banner-content {
    border: 2px solid #fb80b4;
    background-color: #FFF4F6;
    margin-top: 4px;
    padding: 0px;
}

#banner-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    width: 100%;
    image-rendering: pixelated;
}

.page-header {
    text-align: center;
    padding: 10px 0 16px;
}

.page-header .subtext {
    font-size: 13px;
    color: #e84287;
    max-width: 480px;
    margin: 6px auto 0;
}

.backhome {
    font-size: 14px;
    margin-top: 10px;
    color: #df387d;
}

.backhome a {
    color: #e84287;
    text-decoration: none;
    border-bottom: 1px dashed #fbbfda;
}

.backhome a:hover { color: #b11d5b; }

/* the grid of codes */
.playlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    margin-bottom: 30px;
}

.playlist-card {
    border: 2px solid #f9a9cd;
    background-color: #ffedf3;
    padding: 4px;
    text-decoration: none;
    display: block;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.playlist-card:hover {
    transform: translateY(-4px) rotate(-0.5deg);
    border-color: #e8a8c6;
}

.code-frame {
    border: 2px solid #fbbfda;
    background-color: #fffafd;
    overflow: hidden;
}

.code-frame img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: auto;
}

.playlist-label {
    text-align: center;
    padding: 8px 4px 6px;
}

.playlist-label .title {
    font-size: 14px;
    font-weight: bold;
    color: #f9a9cd;
    display: block;
}

.playlist-label .tag {
    font-size: 11px;
    color: #fcb9d7;
    display: block;
    margin-top: 2px;
}
/* footer */
.footer {
    text-align: center;
    padding: 20px 0;
    font-size: 12px;
    color: #fbbfda;
    border-top: 2px dashed #ffe8f3;
    margin-top: 20px;
}

.footer p { margin-top: 6px; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #fffafd; }
::-webkit-scrollbar-thumb { background: #ffe8f3; }
::-webkit-scrollbar-thumb:hover { background: #fbbfda; }

@media (max-width: 650px) {
    .floatdeco { display: none; }
    .playlist-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
}