/* General page styling */
body {
background: #ffffff;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(217, 217, 217, 1) 21%, rgba(158, 244, 255, 1) 41%, rgba(89, 219, 255, 1) 66%, rgba(88, 147, 214, 1) 89%);
    font-family: Frutiger, MS Gothic;
    margin: 0;
    padding: 0;
    color: #003366;
}

/* 4:3 centered layout */
.container {
    width: 800px;
    margin: 20px auto;
    background: #b0b0b0;
    border: 4px outset #99e4ff;
    box-shadow: 0 0 10px #99e4ff;
}

/* Header */
.header {
background: #ffffff;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(88, 147, 214, 1) 89%);
    border-bottom: 3px solid #99e4ff;
    padding: 15px;
    text-align: center;
    color: white;
}

.header h1 {
    margin: 10px 0 5px 0;
    font-size: 32px;
    color: blue;
}

.header p {
    margin: 0;
    font-size: 14px;
}

/* Home link */
.home-link {
    display: inline-block;
    margin-bottom: 10px;
    color: black;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid white;
    padding: 4px 8px;
background: #ffffff;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(88, 214, 208, 1) 89%);
}

/* Playlist boxes */
.playlist-box {
    margin: 20px;
    padding: 15px;
    border: 3px outset #a1efff;
background: #ffffff;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(163, 255, 250, 1) 100%);
}

.playlist-box h2 {
    margin-top: 0;
    color: #00abcf;
    border-bottom: 2px dashed #a1efff;
    padding-bottom: 5px;
}

/* Description text */
.description {
    font-size: 14px;
    margin-bottom: 10px;
}

/* Embed styling */
.embed {
    border: 2px inset #66ccff;
    padding: 5px;
    background: #ffffff;
}

/* Footer */
.footer {
    text-align: center;
    padding: 10px;
    font-size: 12px;
    background: #b0b0b0;
    border-top: 3px solid #99e4ff;
}