:root {
    color: white;
    background-color: transparent;

    --screen: hsla(313, 96%, 78%, 0.4);
    --high: hsla(303, 100%, 81%, 0.5);
    --content: hsl(304, 100%, 97%);
    --header: hsl(234, 100%, 90%);
    --link: hsl(57, 100%, 93%);

    font-size: 16px;
    font-weight: normal;
    line-height: normal;
}

html,
body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
    font-family: "Sarasa UI TC", "Noto Color Emoji" !important;

    --edgeColor: hsl(266, 9%, 16%);
    --edgeColorLowOpacity: hsl(266, 9%, 16%, 20%);

    text-shadow: 0 -1px var(--edgeColor), 0 1px var(--edgeColor),
        -1px 0 var(--edgeColor), 1px 0 var(--edgeColor), 0 -2px var(--edgeColor),
        0 2px var(--edgeColor), -2px 0 var(--edgeColor), 2px 0 var(--edgeColor),
        -1px -1px var(--edgeColor), 1px -1px var(--edgeColor),
        -1px 1px var(--edgeColor), 1px 1px var(--edgeColor),
        -2px -2px var(--edgeColorLowOpacity),
        2px -2px var(--edgeColorLowOpacity), -2px 2px var(--edgeColorLowOpacity),
        2px 2px var(--edgeColorLowOpacity), 0 0 1px var(--edgeColor),
        0 0 2px var(--edgeColor) !important;

    -webkit-text-stroke-width: 0 !important;
    -webkit-text-stroke-color: none !important;
}

#nowplaying,
#slime2-root {
    border: var(--high) solid 6px !important;
    border-radius: 16px !important;
    overflow: hidden;
    background-color: var(--screen) !important;
}

#np-text {
    display: flex;
    flex-direction: column;
    margin-block: 0.3em;
}

#np-title {
    flex: 1;
    color: var(--header);
}

#np-album {
    font-size: 0.8em;
    color: var(--content);
}

#np-artist {
    color: #ffcad9;
    margin-top: 0.75em;
    font-weight: 600;
}

#np-position {
    color: var(--link);
    text-align: end;
    font-size: 16px;
    font-weight: bold;
}

span.text {
    color: var(--content);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

a {
    color: var(--link) !important;
}