body {
    background-color: #000;
    color: #fff;
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: Courier New;
}

hr {
    color: #f00;
    margin: 10pt 0pt 2pt 6pt !important;
}

.w60 { width: 60px }
.h50 { height: 50px }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.left { text-align: left; margin-left: 0; }
.right { text-align: right; margin-right: 0; }
.icon-32 { width: 32px; height: 32px; }


@media (min-width: 310px) {
    .card { width: 300px }
    .song-cover { max-width: 280px }
}
@media (min-width: 420px) {
    .card { width: 380px }
    .song-cover { max-width: 360px }
}
@media (min-width: 601px) {
    .card { width: 550px }
    .song-cover { max-width: 450px }
}
@media (min-width: 1000px) and (min-height: 1000px) {
    .card { width: 800px }
    .song-cover { max-width: 760px }
}

.navbar-top {
    position: fixed;
    top: 0;
    background-color: #5b5b5b;
    color: #fff;
    width: 100%;
    opacity: 90%;
    padding: 8pt 0pt;
}
.navbar-bottom {
    position: fixed;
    bottom: 0;
    background-color: #5b5b5b;
    color: #fff;
    width: 100%;
    opacity: 90%;
    padding: 4pt 0pt;
    display: flex;
    justify-content: center;
}

.btn-red {
    padding: 2pt 8pt;
    margin: 2pt 0pt 2pt 4pt;
    border-radius: 20pt;
    color: #fff;
    background-color: #f00;
    text-decoration: none;
    cursor: pointer;
    transition-duration: 0.2s;
}
.btn-red:hover {
    color: #f00;
    background-color: #fff;
    text-decoration: underline;
    transition-duration: 0.2s;
}

.bg-rounded {
    cursor: pointer;
    background-color: #ff0000;
    margin: 0 2pt;
    padding: 6px;
    border-radius: 10pt;
    transition-duration: 100ms;
}
.bg-rounded:hover {
    transform: scale(0.9);
}

.pager-link {
    color: #fff;
    text-decoration: none;
    margin: 4pt 0pt 2pt 6pt !important;
    cursor: pointer;
}
.pager-link::after {
    content: " >";
}

.container {
    margin: 80pt auto 60px;
}

.card {
    background-color: #373737;
    padding: 10pt;
    margin: 0 auto 40px;
    border-radius: 8pt;
    border: 2px solid #f00;
}

.song-cover {
    border-radius: 8pt;
}

table.playlist {
    text-align: left;
    border-collapse: collapse;
    width: 100%;
}
.playlist td, .playlist th {
    text-align: left;
    padding: 8px;
}
tbody tr:nth-child(odd) {
    background-color: #2d2d2d;
}
.playlist thead { border-bottom: 2px solid #f00; }

.playlist-song { width: 60%; overflow: scroll }
.playlist-album { width: 30%; overflow: scroll }
.playlist-length { width: 10%; overflow: scroll }