/* This is used just for controlling the music player stuff on the music part of the site (duh) */

html {
        scroll-behavior: smooth;
}

body {
        max-width: 700px;
        margin: 0 auto;
        padding: 0 20px;
        font-size: 16px;
}

h1 {
        margin-right: 5px;
        font-family: Serif;
}

nav a {
        margin-right: 5px;
        font-family: Serif;
}

h2 {
        font-family: monospace;
}

h2 a {
        color: inherit;
        text-decoration: none;
}

h2 a:visited {
        color: inherit;
}

h2 a::after {
        content: " ¶";
        opacity: 0;
        margin-left: 3px;
        font-size: 0.8em;
}

h2:hover a::after {
        opacity: 1;
}

h2 a:hover {
        text-decoration: none;
}

p {
        font-size: 14px;
        font-family: monospace;
}

.social {
        font-family: Serif;
        font-size: 12px;
}

.cover img {
        height: 150px;
        width: 150px;
        float: right;
}

ul.posts {
        padding-left: 20px;
        list-style-type: circle;
        font-family: Serif;
}

.player {
        margin-top: 20px;
}

.controls {
        cursor: pointer;
        font-size: 16px;
        user-select: none;
}

.controls .amplitude-play-pause {
        display: inline-block;
        cursor: pointer;
        user-select: none;
}

.amplitude-play-pause.amplitude-paused::after {
        content: "play";
}

.amplitude-play-pause.amplitude-playing::after {
        content: "pause";
}

.song-title {
        margin: 15px 0;
        display: block;
        font-size: 14px;
        font-family: monospace;
}

progress {
        width: 100%;
        height: 6px;
        margin: 10px 0;
}

/* ASCII progress bars */
.ascii-progress1,
.ascii-progress2 {
        font-family: monospace;
        margin: 8px 0;
        font-size: 14px;
}

.time {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
}

.playlist {
        list-style: none;
        padding: 0;
        font-family: monospace;
        cursor: pointer;
}

.playlist li::before {
        content: "  ";
}

.playlist li.active::before {
        content: "> ";
}