* {
    box-sizing: border-box;
}
@media (prefers-color-scheme: light) {
    :root {
        --text: #17051f;
        --background: #fcf6fe;
        --primary: #591376;
        --secondary: #c9b0a1;
        --accent: #1db968;
        --inverse: var(--background)   
    }
    #btn2 {color: var(--background)}
    #btn3 {color: var(--background)}
    #btn4 {color: var(--background)}
    #btn5 {color: var(--background)}
}
@media (prefers-color-scheme: dark) {
    :root {
        --text: #f2e0fa;
        --background: #070109;
        --primary: #ce89ec;
        --secondary: #5e4536;
        --accent: #46e291;
        --inverse: var(--text)
    }
}

body {
    font-family: 'IBM Plex Sans', monospace;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: var(--background);
    color: var(--text);
}
.container {
    display: flex;
    align-items: center;
}
.playlist-info {
    margin-top: 20px;
    text-align: center;
}
h1 {
    text-align: left;
    display: flex;
    flex-direction: column;
}
h1 span {
    display: block;
}
h1 span:last-child {
    margin-right: 10px;
}
@media (min-width: 768px) {
    .container {
        flex-direction: row;
        justify-content: space-between;
        max-width: 800px;
    }
}
.playlist-info > p:nth-child(3) {margin-top: 14px;}
@keyframes ldio-mkz3fiu9tmp {
    0% { opacity: 1 }
    100% { opacity: 0 }
}
.ldio-mkz3fiu9tmp div {left: 97px; top: 37px; position: absolute; animation: ldio-mkz3fiu9tmp linear 1.4492753623188404s infinite; background: #ffffff; width: 6px; height: 42px; border-radius: 3px / 3.36px; transform-origin: 3px 63px;} .ldio-mkz3fiu9tmp div:nth-child(1) {transform: rotate(0deg); animation-delay: -1.3526570048309177s; background: #ffffff;} .ldio-mkz3fiu9tmp div:nth-child(2) {transform: rotate(24deg); animation-delay: -1.256038647342995s; background: #ffffff;} .ldio-mkz3fiu9tmp div:nth-child(3) {transform: rotate(48deg); animation-delay: -1.1594202898550723s; background: #ffffff;} .ldio-mkz3fiu9tmp div:nth-child(4) {transform: rotate(72deg); animation-delay: -1.0628019323671496s; background: #ffffff;} .ldio-mkz3fiu9tmp div:nth-child(5) {transform: rotate(96deg); animation-delay: -0.9661835748792269s; background: #ffffff;} .ldio-mkz3fiu9tmp div:nth-child(6) {transform: rotate(120deg); animation-delay: -0.8695652173913042s; background: #ffffff;} .ldio-mkz3fiu9tmp div:nth-child(7) {transform: rotate(144deg); animation-delay: -0.7729468599033815s; background: #ffffff;} .ldio-mkz3fiu9tmp div:nth-child(8) {transform: rotate(168deg); animation-delay: -0.6763285024154588s; background: #ffffff;} .ldio-mkz3fiu9tmp div:nth-child(9) {transform: rotate(192deg); animation-delay: -0.5797101449275361s; background: #ffffff;} .ldio-mkz3fiu9tmp div:nth-child(10) {transform: rotate(216deg); animation-delay: -0.48309178743961345s; background: #ffffff;} .ldio-mkz3fiu9tmp div:nth-child(11) {transform: rotate(240deg); animation-delay: -0.38647342995169076s; background: #ffffff;} .ldio-mkz3fiu9tmp div:nth-child(12) {transform: rotate(264deg); animation-delay: -0.28985507246376807s; background: #ffffff;} .ldio-mkz3fiu9tmp div:nth-child(13) {transform: rotate(288deg); animation-delay: -0.19323671497584538s; background: #ffffff;} .ldio-mkz3fiu9tmp div:nth-child(14) {transform: rotate(312deg); animation-delay: -0.09661835748792269s; background: #ffffff;} .ldio-mkz3fiu9tmp div:nth-child(15) {transform: rotate(336deg); animation-delay: 0s; background: #ffffff;} .ec749m4jmk {width: 200px; height: 200px; display: inline-block; overflow: hidden; background: rgba(NaN, NaN, NaN, 0);} .ldio-mkz3fiu9tmp {width: 100%; height: 100%; position: relative; transform: translateZ(0) scale(1); backface-visibility: hidden; transform-origin: 0 0;} .ldio-mkz3fiu9tmp div { box-sizing: content-box; }
.loadiv {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #1C1B22;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 768px) {
    body {font-size: 16px;}
    .container {
        flex-direction: column; /* Stack elements vertically */
        padding: 0 20px; /* Add some horizontal padding */
    }
    .playlist-info {width: 100%; /* Make playlist info full width */}
}
svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 50%; /* Adjust as needed */
    height: 50%; /* Adjust as needed */
    z-index: -1;
    filter: blur(100px);
}
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: fit-content;
    width: 20rem;
    position: relative;
    margin: 5px;
}
a {
    color: inherit;
    text-decoration: none;
    padding: 0.8rem 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: all ease 0.3s;
}
.card > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    width: 100%;
    background-color: rgba(60, 60, 60, 0.35);
}
.card::before {
    content: '';

    background-color: rgba(255,255,255,0.01);
    position: absolute;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(50px);
    clip-path: polygon(evenodd,
        0 0,
        100% 0,
        100% 100%,
        0 100%,
        0 0, 0.3rem 0.3rem, calc(100% - 0.3rem) 0.3rem, calc(100% - 0.3rem) calc(100% - 0.3rem), 0.3rem calc(100% - 0.3rem), 0.3rem 0.3rem)
}
#btn1 {background-color: #a09590; color: var(--background);}
#btn2 {background-color: #C13584;}
#btn3 {background-color: rgba(30,215,96,.1);}
#btn4 {background-color: #1DA1F2;}
#btn5 {background-color: #2b3137;}
#btn1:hover, #btn2:hover, #btn3:hover, #btn4:hover, #btn5:hover, #btn6:hover {
    background-color: var(--secondary);
    color: white;
}
.button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    height: 100px;
    width: 160px;
    z-index: 9999;
}
button {
    height: 100px;
    width: 115px;
    border: none;
    border-radius: 25px;
    background-color: var(--background);
    box-shadow: 0px -3px 15px 0px var(--primary) inset;
    color: var(--primary);
    font-family: "Manrope";
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateY(0px);
    transition: all 0.2s ease;
}
.button:hover > span {
    opacity: 60%;
}
.button:hover > button {
    transform: translateY(5px);
}
.button.third > button {
    background-color: var(--secondary);
    box-shadow: 0px -3px 15px 0px var(--secondary) inset;
    color: var(--secondaryFg);
}
.button.third > span {
    background-color: var(--secondary);
}