body {
background: #f8dfea;
font-family: Georgia, serif;
color: #7b4b5d;
font-size: 14px;
}

a {
color: #c45d85;
text-decoration: none;
font-weight: bold;
}

a:hover {
background: #ffd3e5;
}

.wrapper {
width: 900px;
margin: 25px auto;
}

.title {
background: #fff7fb;
border: 1px solid #d9a7bb;
padding: 20px;
text-align: center;
margin-bottom: 12px;
}

.title h1 {
font-size: 42px;
margin: 0;
color: #b94f7d;
font-weight: normal;
}

.layout {
display: grid;
grid-template-columns: 180px 1fr 200px;
gap: 12px;
}

.box {
background: #fffafc;
border: 1px solid #d9a7bb;
padding: 14px;
margin-bottom: 12px;
}

.box h2 {
font-size: 18px;
color: #b94f7d;
border-bottom: 1px dotted #d9a7bb;
margin-top: 0;
font-weight: normal;
}

.sidebar a {
display: block;
padding: 5px;
border-bottom: 1px dotted #e8bfd0;
}

.mini {
background: #fdebf3;
padding: 8px;
margin-top: 10px;
border: 1px dotted #d9a7bb;
}

.yellow {
background: #fff4c9;
}

.right {
height: fit-content;
}

hr {
border: none;
border-top: 1px dotted #d9a7bb;
margin: 14px 0;
}

ul {
padding-left: 20px;
}

::selection {
background: #ffd3e5;
}
.playlist-page {
position: relative;
min-height: 600px;
overflow: hidden;
text-align: center;
}

.sticker {
position: absolute;
width: 90px;
}

.top-left {
top: 15px;
left: 15px;
}

.top-right {
top: 15px;
right: 15px;
}

.bottom-left {
bottom: 15px;
left: 15px;
}

.bottom-right {
bottom: 15px;
right: 15px;
}

.tiny-note {
font-size: 12px;
opacity: .7;
}