body {
    background-image: linear-gradient(#eeeeee,#dddddd);
    min-height: 100vh;

    /* CSS - Cascading Style Sheet */
    /* Palette color codes */
    /* Palette URL: http://paletton.com/#uid=54W0X0kw0qQlOyerUvvAllSIggE */

    /* Main Primary color */
    --color-primary: 139,  0,139;	
    --color-primary-l2: 172, 55,172;
    --color-primary-l1: 163, 21,163;
    --color-primary-d1: 113,  0,113;
    --color-primary-d2:  86,  0, 86;

    /* Main Secondary color (A) */
    --color-secondary-a: 214, 61,  0;	
    --color-secondary-a-l2: 255,131, 81;
    --color-secondary-a-l1: 251, 94, 32;
    --color-secondary-a-d1: 174, 50,  0;
    --color-secondary-a-d2: 133, 38,  0;

    /* Main Secondary color (B) */
    --color-secondary-b:  22, 22,150;	
    --color-secondary-b-l2:  77, 77,184;
    --color-secondary-b-l1:  45, 45,176;
    --color-secondary-b-d1:  15, 15,122;
    --color-secondary-b-d2:   8,  8, 93;
}

/* Menu Layout */
div#menu {
    background-color: rgba( var(--color-primary-l2),0.15 );
    border-left: 2rem solid rgb( var(--color-primary) );
    margin: 1rem auto;
    padding: 0.75rem 0;
    width: 78rem;
}
div#menu a {
    background-color: #ffffff;
    background: rgba( var( --color-secondary-b-l2 ), 0.15 );
    margin: 0 0.75rem;
    padding: 0.25rem 0.75rem;
    border-left: 1rem solid rgb( var( --color-secondary-b-d2 ) );
    font-size: 1.25em;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: #333333;
}
div#menu a:hover {
    text-decoration: underline;
    color: #000000;
}

/* FAQ Layout */
div#faq {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    top: 2rem;
    bottom: 2rem;
    left: 50%;
    height: 90vh;
    width: 60rem;
    margin-left: -30rem;  /* Negative half of width. */
    border: 0.5rem solid rgb( var(--color-secondary-b-d2) );
    background: #fffffff6;
    overflow-y: scroll;
    transition: visibility 5s, opacity 5s, ease-in-out;
}
div#faq h1 {
    display: inline-block;
    margin: 1rem 2rem;
    width: 40rem;
    color: rgb( var( --color-secondary-b-d2 ));
    font-size: 2.5em;
    font-variant: small-caps;
    letter-spacing: .02rem;
}
button#faqClose {
    float: right;
    margin: 0.25rem;
    padding: 0.25rem;
    border: 0.2rem solid rgb( var( --color-secondary-b-d2 ));
    color: rgb( var( --color-secondary-b-d2 ));
}
h2.faqQuestion {
    margin: 0.5rem 1rem;
    color: rgb( var( --color-secondary-b-d1 ));
    font-size: 1.75em;
    font-variant: small-caps;
    border-left: 0.75rem solid rgb( var( --color-secondary-b-d2 ));
    padding-left: 0.75rem;
}
p.faqAnswer {
    display: block;
    margin: 0.5rem 2rem 1rem 2rem;
    font-size: 1.1em;
    line-height: 1.5em;
    color: #333333;
}
p.faqAnswer span.quote {
    display: block;
    text-align: center;
    font-style: italic;
    margin: 0.5rem auto;
    font-size: 1.05em;
    color: rgb( var( --color-secondary-b ));
}

/* Attribution Layout */
div#atrb {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    top: 2rem;
    bottom: 2rem;
    left: 50%;
    height: 90vh;
    width: 60rem;
    margin-left: -30rem;  /* Negative half of width. */
    border: 0.5rem solid rgb( var(--color-secondary-b-d2) );
    background: #fffffff6;
    overflow-y: scroll;
    transition: visibility 5s, opacity 5s, ease-in-out;
}
div#atrb h1 {
    display: inline-block;
    margin: 1rem 2rem;
    width: 40rem;
    color: rgb( var( --color-secondary-b-d2 ));
    font-size: 2.5em;
    font-variant: small-caps;
    letter-spacing: .02rem;
}
button#atrbClose {
    float: right;
    margin: 0.25rem;
    padding: 0.25rem;
    border: 0.2rem solid rgb( var( --color-secondary-b-d2 ));
    color: rgb( var( --color-secondary-b-d2 ));
}
#atrb h2 {
    margin: 0.5rem 1rem;
    color: rgb( var( --color-secondary-b-d1 ));
    font-size: 1.75em;
    font-variant: small-caps;
    border-left: 0.75rem solid rgb( var( --color-secondary-b-d2 ));
    padding-left: 0.75rem;
}
#atrb p {
    display: block;
    margin: 0.5rem 2rem 1rem 2rem;
    font-size: 1.1em;
    line-height: 1.5em;
    color: #333333;
}
#atrb span.quote {
    display: block;
    text-align: center;
    font-style: italic;
    margin: 0.5rem auto;
    font-size: 1.05em;
    color: rgb( var( --color-secondary-b ));
}


/* Header Design */
div#header {
    background: rgb( var( --color-primary-d2 ));
    color: #eeeeee;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: baseline;
    text-align: center;
    margin: 0 auto;
    width: 80rem;
    font-variant: small-caps;
}
div#header img {
    height: 3rem;
    padding: 0;
    margin: 2.5em 0.15em;
    text-align: center;
}

/* Footer Block */
#footer {
    width: 80rem;
    margin: 0 auto;
    padding: 1rem 0;
    background-color: rgb( var(--color-primary-d2) );
}
#footer span {
    display: block;
    color: rgba( var(--color-secondary-a-l2),1 );
    font-size: 1.2em;
    letter-spacing: 0.1em;
    text-align: center;
}


div#content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 80rem;
    margin: 1rem auto;
    background: rgba( var( --color-secondary-b-l2 ),0.05 );
}

div#content iframe {
    width: 854px;
    height: 480px;
    margin: auto;
    border: 0;
}

/* Filter Lists */
div#FilterList {
    min-width: 200px;
    width: 20%;
    margin: 0;
}
#FilterList .filter {
    width: 100%;
    margin: 0.5em 0;
}
#FilterList .filter:nth-child(1) { margin-top: 0; }
#FilterList .filter:nth-last-child(1) { margin-bottom: 0; }
.filter h1 {
    display: block;
    float: right;
    text-align: center;
    font-variant: small-caps;
    font-size: 1.5em;
    letter-spacing: 0.2em;;
    width: calc(100% - 2rem);
    margin: 0 auto;
    color: rgb( var( --color-secondary-b-d2 ) );
    background: rgba( var(--color-secondary-a-l2),0.15 );
}
.filter span.filterBlock {
    display: block;
    float: left;
    content: "+";
    text-align: center;
    width: 2rem;
    font-size: 1.5em;
    font-weight: bold;
    background: rgb( var(--color-secondary-a));
}

.filter div.tags {
    padding-left: 1em;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    line-height: 1.5rem;
    width: 98%;
    margin: 0 auto;
}
.filter div.tags label {
    text-align: left;
    font-size: 1.15em;
    font-variant: small-caps;
    color: rgb( var( --color-secondary-a-d1 ));
    text-decoration: none;
    margin: 0.05em 0.5em;
}
.filter div.tags label:hover {
    color: rgb( var( --color-secondary-a-d2 ));
    text-decoration: underline;
    cursor: pointer;
}

.tagHighlight {
    color: rgb( var( --color-secondary-b-d1 ));
    text-decoration: none;
    background: rgba( var(--color-secondary-a),0.25 );
}

.filter input.tagCheck:checked + label {
    color: rgb( var( --color-secondary-b-d1 ));
    text-decoration: none;
    background: rgba( var(--color-secondary-a),0.25 );
}
.filter input.tagCheck:checked + label:hover {
    color: rgb( var( --color-secondary-b-d2 ));
    text-decoration: none;
    cursor: default;
}
.filter div.tags label::after {
    content: " [" attr(data-value) "]";
    font-size: 0.9em;
}
.filter label[data-value="0"] {
    display: none;
}

.filter input.tagCheck {
    display: none; 
}
#explicitFilter label, #searchFilter label {
    font-size: 1.05em;
    font-variant: small-caps;
    color: rgb( var( --color-secondary-a-d1 ));
    margin: 0.5rem;
    padding-left: 1em;
}

#searchFilter input {
    margin-left: 1em;
}

.filterExpand {
    cursor: pointer;
}

.filterExpand[data-status="min"] ~ div,
.filterExpand[data-status="min"] ~ label,
.filterExpand[data-status="min"] ~ input,
.filterExpand[data-status="min"] ~ button {
    display: none;
}

.filterExpand[data-status="max"] ~ div {
    display: flex;
}
.filterExpand[data-status="max"] ~ label,
.filterExpand[data-status="max"] ~ input,
.filterExpand[data-status="max"] ~ button {
    display: initial;
}

#ccLicense {
    --border: 2rem;
    --width: calc(80rem - var(--border));
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    background-color: rgba( var(--color-primary-l2),0.15 );
    border-left: var(--border) solid rgb( var(--color-primary) );
    text-align: center;
    width: var(--width);
    margin: 1.5rem auto 0.25rem;
    padding: 0.5rem 0;
    font-size: 1.05em;
}

.resultNavigation {
    display: flex;
    flex-direction: row;
    justify-content: right;
    width: 100%;
}

a.pageNav {
    display: inline-block;
    font-weight: bold;
    padding: 0 0.25rem;
    color: rgb( var( --color-secondary-b-d2 ));
    border: 0.1em solid rgba( var(--color-secondary-a-d2),0 );
}

a.currentPage {
    border-bottom: 0.1em solid rgba( var(--color-secondary-b-d2),1 );
}

a.pageNav[data-value] {
    cursor: pointer;
}

a.pageNav[data-value]:hover {
    background: rgba( var( --color-primary-l2 ),0.1 );
}

/* Music List */
#MusicList {
    display: flex;
    flex-direction: column;
    min-width: 600px;
    width: 75%;
    margin: 0 auto;
    border-collapse: collapse;
}
.mixListDetails {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 1rem 0;
}
.mixListDetails:nth-child(odd) { background: rgba( var( --color-primary-l2 ),0.2 ); }
.mixListDetails:nth-child(even) { background: rgba( var( --color-primary-l2 ),0.1 ); }
.mixListDetails h1 {
    height: 1.5rem;
    width: 78%;
    font-size: 1.5rem;
    margin: 0 auto;
}
.mixListDetails h1 a {
    display: block;
    font-variant: small-caps;
    text-align: left;
    text-decoration: none;
    color: rgb( var( --color-secondary-b-d1 ));
}
.mixListDetails h1 a:hover {
    text-decoration: underline;
    color: rgb( var( --color-secondary-b-d2 ));
}
.mixListDetails h1 a[data-explicit="True"]::after {
    content: " [ Explicit Lyrics ]";
    font-size: 0.8em;
    color: rgb( var( --color-secondary-a-d2 ));
}

.mixListDetails audio {
    width: 15%;
    height: 1rem;
    margin: 0 0.5rem;
    padding: 0;
    border: 0.2rem solid rgb( var(--color-primary-d2) );
}

span.tagList {
    width: 95%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin: 0.1rem auto;
}
span.tagList a {
    display: block;
    border-left: 0.2rem solid rgba( var( --color-secondary-a ), 0.5 );
    border-right: 0.2rem solid rgba( var( --color-secondary-a ), 0.5 );
    margin: 0.15rem 0.2rem;
    padding: 0 0.15rem;
    font-variant: small-caps;
    font-size: 1.05em;
    letter-spacing: 0.05em;
}
span.tagList a.activeFilter {
    color: rgb( var( --color-secondary-b-d1 ));
    text-decoration: none;
    background: rgba( var(--color-secondary-a-l1),0.25 );
}


/* Music Details */
#mixDetails {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    text-align: center;
    width: 80rem;
    margin: 0.1rem auto;
    padding: 1rem 0;
}
#mixDetails h1 {
    width: 65%;
    height: 2.5rem;
    margin: 0 0 0.5rem 1rem;
    margin-right: auto;
    text-align: left;
    color: rgb( var(--color-secondary-b-d2) );
}
#mixDetails h1[data-explicit="True"]::after {
    content: " [ Explicit Lyrics ]";
    font-size: 0.8em;
    color: rgb( var( --color-secondary-a-d2 ));
}
#mixDetails .audioPreview {
    width: 15%;
    border: 0.2rem solid rgb( var(--color-primary-d2) );
    justify-content: center;
}
.mixListDetails .audioPreview {
    width: 18%;
    justify-content: flex-start;
}

.audioPreview {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 2rem;
    margin: 0 0.5rem;
    padding: 0;
}

.audioPreview img {
    visibility: visible;
    height: 1.5rem;
    margin: 0.25rem;
    cursor: pointer;
}

.audioPreview span {
    display: block;
    margin: 0.1rem;
    padding: 0 0.5em;
    font-size: 1.2em;
    letter-spacing: 0.25em;
    font-weight: bold;
    font-variant: small-caps;
}

.audioPreview .display-none {
    display: none;
}

.volume-slider {
    -webkit-appearance: none;
    width:100%;
    border:2px solid rgb( var( --color-secondary-b-d2 ));
    border-radius:5px;
}

.volume-slider::-webkit-slider-runnable-track {
   background-color: rgb( var( --color-secondary-a-l2 ));
   padding:5px;
}
.volume-slider::-webkit-slider-runnable-track:hover {
   background-color: rgb( var( --color-secondary-a ));
}


.volume-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
    height: 20px;
    width: 40px;
    border-radius: 10%;
    background: rgb( var( --color-secondary-a-l1 ));
    box-shadow: 2px 2px 1px #000000;
}


#mixDetails .download {
    width: 15%;
    height: 2.4rem;
    margin: 0 1.5rem 0.5rem 0;
    padding: 0.5rem 0;
    font-size: 1rem;
    background-color: rgba( 159, 159, 159, 0.15 );
    border: 0.2rem solid rgb( var(--color-primary-d2) );
    border-radius: 0.25rem;
}
.tagLists, .detailLists {
    display: flex;
    flex-direction: column;
    font-size: 1.2em;
}

.detailLists {
    width: 30%;
    background-color: rgba( var(--color-secondary-b-l2),0.15 );
    border-left: 1.75rem solid rgb( var(--color-secondary-b) );
    padding: 0.75rem 0;
    margin: 0.1rem auto 0.1rem 0.1rem;
}
.tagLists {
    width: 60%;
    background-color: rgba( var(--color-secondary-a-l2),0.15 );
    border-left: 1.75rem solid rgb( var(--color-secondary-a) );
    padding: 0.75rem 0;
    margin: 0.1rem 0.1rem 0.1rem auto;
}

.genreList, .moodList, .instrumentList {
    width: 95%;
    margin: 0.1rem 0.1rem auto 1rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.tagLists span a {
    display: inline;
    margin: 0 0.5rem;
}

.mixLength, .mixBPM, .mixKey {
    display: block;
    width: 90%;
    margin: 0.1rem 0.1rem auto 1rem;
    text-align: left;
}
.mixLength::before {
    content: "Length:";
    font-size: 1em;
    padding-right: 0.5rem;
    font-weight: bold;
    font-variant: small-caps;
}
.mixLength::after {
    content: "min";
    font-size: 1em;
    padding-left: 0.2rem;
}
.mixBPM::before {
    content: "Tempo:";
    font-size: 1em;
    padding-right: 0.5rem;
    font-weight: bold;
    font-variant: small-caps;
}
.mixBPM::after {
    content: "BPM";
    font-size: 1em;
    padding-left: 0.2rem;
}
.mixKey::before {
    content: "Key/Scale:";
    font-size: 1em;
    padding-right: 0.5rem;
    font-weight: bold;
    font-variant: small-caps;
}

.genreList::before {
    content: "Genres:";
    font-size: 1em;
    padding-right: 0.3rem;
    font-weight: bold;
    font-variant: small-caps;
}
.moodList::before {
    content: "Moods:";
    font-size: 1em;
    padding-right: 0.3rem;
    font-weight: bold;
    font-variant: small-caps;
}
.instrumentList::before {
    content: "Instruments:";
    font-size: 1em;
    padding-right: 0.3rem;
    font-weight: bold;
    font-variant: small-caps;
}

div.mixExtras {
    width: 80rem;
    margin: 1rem auto 0 auto;
    text-align: center;
    font-size: 1.1em;
}
.mixYouTube {
    width: 32rem;
    height: 18rem;
    margin: 0 auto;
}
div.mixExtras p {
    margin: 0.5rem 0;
    padding: 0;
    text-align: left;
}



div.cloud {
    background-image: linear-gradient(#dddddd,#cccccc);
    border-radius: 1.5rem;
    width: 30%;
    min-width: 10rem;
    margin: 0 auto;
    visibility: hidden;
}

.cloud h1 {
    text-align: center;
    font-variant: small-caps;
    width: 100%;
    margin: 0 auto;
    color: #111111;
    background: #cccccc;
    border-radius: 1.5rem 1.5rem 0 0;
    border-bottom: 1px solid #000000;
}

.cloud ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    width: 95%;
    margin: 0 auto;
}

.cloud ul a {
    --color: 17, 17, 17;
    color: rgb( var( --color ));
    display: block;
    font-size: 1.5rem;
    padding: 0.125em 0.25rem;
    text-decoration: none;
    position: relative;
    --size: 4;
    font-size: calc( var(--size) * 0.1em + 0.5em );
    opacity: calc( (20 - (10 - var(--size)) / 20) ); 
}

.cloud ul a[data-rank="1"] { --size: 1; }
.cloud ul a[data-rank="2"] { --size: 2; }
.cloud ul a[data-rank="3"] { --size: 3; }
.cloud ul a[data-rank="4"] { --size: 4; }
.cloud ul a[data-rank="5"] { --size: 5; }
.cloud ul a[data-rank="6"] { --size: 6; }
.cloud ul a[data-rank="7"] { --size: 7; }
.cloud ul a[data-rank="8"] { --size: 8; }
.cloud ul a[data-rank="9"] { --size: 9; }
.cloud ul a[data-rank="10"] { --size: 10; }

.cloud ul a::after {
    content: " (" attr(data-value) ")";
    font-size: 1rem;
}

.cloud ul li:nth-child(2n+1) a { --color: 34, 34, 34; }
.cloud ul li:nth-child(3n+1) a { --color: 0, 0, 0; }
/*
.cloud ul li:nth-child(4n+1) a { --color: rgb( var( (--color-secondary-a-d1 )); }
.cloud ul li:nth-child(5n+1) a { --color: rgb( var( (--color-secondary-a-d2 )); }
*/

.cloud ul a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    background: rgb( var( --color ));
    transform: translate(-50%, 0);
    opacity: 0.25;
    transition: width 0.25s;
}

.cloud ul a:focus::before,
.cloud ul a:hover::before {
    width: 100%;
}

.cloud ul * {
    transition: none !important;
}

/* Development Layout */
div.dev {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
div.dev div {
    width: 20%;
    height: 2rem;
    min-width:  18%;
    margin: 0 0;
}
pre {
    font-family: "Lucida Console", "Courier New", monospace;
    --color: 0, 255, 102;
    font-size: 0.75rem;
    border: 0.1rem solid rgb( var( --color ));
    width: 60%;
    margin: 0 auto;
    padding: 0.5rem;
    color: rgb( var( --color ));
    background: #000000;
}