html, body {
        font-family: 'Source Sans Pro', 'Source Sans 3', sans-serif;
        font-size: 16px;
        line-height: 1.2;
        margin: 0;
        background-color: #333;
        color: white;
        font-weight: normal;
}
#main {
        background-color: #333;
        color: white;
}
#fine_print a {
        color: white;
}
::selection {
        background-color: rebeccapurple;
        color: white;
}
#top {
        display: flex;
        align-items: center;
        background: black;
        color: black;
        padding: 24px;
        box-sizing: border-box;
        min-height: 100vh;
}
#top_inner {
        flex: 1 1 auto;
}
#header {
        background: black;
        padding: 24px;
        padding-bottom: 0px;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-content: center;
}
#header_slim {
        background: black;
        padding: 24px;
        padding-bottom: 0px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-content: center;
}
#header_slim * {
        flex: 0 1 auto;
}
#header #logo_top {
        margin: 24px;
        height: 120px;
}
#header_slim #logo_top {
        margin: 24px;
        height: 64px;
}
h1 {
        text-align: center;
        font-family: 'League Gothic', sans-serif;
        text-transform: uppercase;
        color: deeppink;
        padding: 0;
        margin: 24px;
}
#header h1 {
        font-size: 120px;
}
#header_slim h1 {
        font-size: 64px;
        margin-left: 0;
}
#header h1 picture,
#header h1 img {
        width: 100%;
        max-width: 900px;
}
#header_slim h1 img {
        height: 48px;
}

.call_to_action {
        display: block;
        text-decoration: none;
        background-color: yellow;
        background-image: linear-gradient(to bottom right, yellow 0%, yellowgreen 80%);
        font-size: 32px;
        font-weight: 900;
        color: black;
        text-align: center;
        padding: 8px;
        margin: 0;
}
.call_to_action:hover {
        text-decoration: none;
        color: black;
}
a,
a:hover,
a:visited {
        color: rebeccapurple;
        text-decoration: underline;
        text-decoration-style: dashed;
        text-underline-position: under;
}
.step_list {
        display: flex;
        flex-wrap: wrap;
        flex: 1 1 auto;
}
.step {
        flex: 1 0 auto;
        width: 200px;
        background-color: white;
        border: 16px solid;
        border-image: linear-gradient(to bottom right, yellow 0%, yellowgreen 80%);
        border-image-slice: 1;
        padding: 16px;
        margin: 16px;
}
.step_number {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        font-variant: all-small-caps;
        margin: 16px 0;
}
.step_text {
        text-align: center;
        font-size: 32px;
        font-weight: 900;
        line-height: 32px;
        margin: 16px 0;
}
.step_detail {
        text-align: center;
        font-size: 20px;
        font-weight: normal;
        line-height: 32px;
        margin: 16px 0;
}
#fine_print {
        background-color: #222;
        color: #ddd;
        width: 100%;
        box-sizing: border-box;
        padding: 64px 0;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
}
#fine_print div {
        min-width: 240px;
        margin: 24px;
        box-sizing: border-box;
        flex: 1 1 0;
    }
#player {
        border-bottom: 2px solid #222;
        width: 100%;
        display: flex;
        position: sticky;
        top:0;
        z-index: 10;
}
#playpause {
        display: flex;
        background-color: rebeccapurple;
        color: white;
        padding: 16px;
        text-decoration: none;
        font-size: 64px;
        height: 128px;
        width: 128px;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
        flex: 0 0 auto;
        justify-content: center;
        align-content: center;
}
#playpause > img {
        width: 64px;
}
#waveform {
        margin: 0;
        display: inline-block;
        box-sizing: border-box;
        width: 100vh;
        flex: 1 1 auto;
}
#playlist  {
        box-sizing: border-box;
        margin: 0 0 64px 0;
        background-color: #333;
}
#main h2,
#playlist h2 {
        margin: 0;
        font-family: 'League Gothic', sans-serif;
        font-size: 48px;
        font-weight: normal;
        letter-spacing: 0.05ch;
        text-transform: uppercase;
}
#main h3 {
        font-size: 24px;
}
#playall {
        background-color: rebeccapurple;
        color: white;
        font-family: 'League Gothic', sans-serif;
        font-size: 32px;
        letter-spacing: 0.05ch;
        text-transform: uppercase;
        padding: 8px;
        text-decoration: none;
}
#playlist_header {
        margin: 16px 16px 0 16px;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-content: center;
}
#playlist_header > * {
        flex: 0 0 auto;
        align-self: flex-start;
        margin: 16px 0;
        max-width: 100%;
}
.breadcrumb,
.breadcrumb:visited {
        font-size: 20px;
        color: #999;
        text-decoration: none;
        font-weight: bolder;
        font-variant: all-small-caps;
}
.breadcrumb:hover {
        color: white;
        text-decoration: none;
}
#playlist_description {
        margin: 0 16px 24px 16px;
}
/* Explore-By Menus */

.explore-by {
	margin: 16px auto;
	background-color: transparent;
    color: white;
}

.clicky-menu {
    display: flex;
    flex: 0 0 100%;
    flex-flow: row wrap;
	justify-content: space-between;
	margin: 16px 0 0 0;
	padding: 0;
	list-style: none;
}

    
/* General Link & Button Styles */
.clicky-menu a,
.clicky-menu button {
	margin: 2px;
	padding: 4px;
	background: transparent;
	color: white;
	font-weight: 900;
    font-variant: all-small-caps;
	text-decoration: none;
	font-family: inherit;
}

.clicky-menu a:hover,
.clicky-menu button:hover {
	background: rebeccapurple;
}

.clicky-menu a:focus,
.clicky-menu button:focus {
	outline: 2px dotted white;
	outline-offset: 2px;
}

/* Top Level Items */
.clicky-menu > li {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.clicky-menu > li > a,
.clicky-menu > li > button {
	flex: 1 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border: 0;
	font-size: inherit;
	line-height: 1.5;
	cursor: pointer;
    min-height: 48px;
}
@media (max-width: 539px) {
    .clicky-menu .pull-to-start button, 
    .clicky-menu .pull-to-left button,
    .clicky-menu .pull-to-start a, 
    .clicky-menu .pull-to-left a {
        justify-content: left;
        padding: 16px;
    }
    .clicky-menu .pull-to-center button, 
    .clicky-menu .pull-to-center a {
        justify-content: center;
    }
    .clicky-menu .pull-to-right button,
    .clicky-menu .pull-to-end button,
    .clicky-menu .pull-to-right a,
    .clicky-menu .pull-to-end a {
        justify-content: right;
        padding: 16px;
    }

    .clicky-menu .pull-to-center {
        width: 100%;
    }
    .clicky-menu .pull-to-right,
    .clicky-menu .pull-to-end,
    .clicky-menu .pull-to-start, 
    .clicky-menu .pull-to-left {
        width: 40%;
    }
}
@media (min-width: 540px) {
    .clicky-menu .pull-to-start {
        order: -1;
        flex: 1 1 15%;
    }
    .clicky-menu .pull-to-left {
        order: 0;
        flex: 1 1 15%;
    }
    .clicky-menu .pull-to-center {
        order: 1;
        flex: 1 0 auto;
    }
    .clicky-menu .pull-to-right {
        order: 2;
        flex: 1 1 15%;
    }
    .clicky-menu .pull-to-end {
        order: 3;
        flex: 1 1 15%;
    }
}
@media (min-width: 540px) {
	.clicky-menu > li > a,
	.clicky-menu > li > button {
		justify-content: center;
	}	
}

/* Submenu Styles */
.clicky-menu ul {
	min-width: 100%;
	width: 12em;
	margin-top: 4px;
	padding: 0;
	list-style: none;
	background-color: rebeccapurple;
}

/* Responsive Submenu Behavior */
.clicky-menu ul[aria-hidden="false"] {
	position: static;
	width: 100%;
	flex: 0 0 auto;
}

@media (min-width: 540px) {
	.clicky-menu ul[aria-hidden="false"] {
		position: absolute;
		width: auto;
	}
}

/* Submenu Links */
.clicky-menu ul a {
	display: block;
	padding-top: 4px;
	padding-bottom: 4px;
}
@media (min-width: 540px) {
	.clicky-menu ul a {
		padding: 2px 4px;
		white-space: nowrap;
	}
}
        
.clicky-menu .pageflip,
.clicky-menu .pagenum {
        font-weight: 900;
        color: rgba(100%, 100%, 100%, 50%);
        text-decoration: none;
        font-variant: all-small-caps;
}
.pagenum {
    display: block;
}


.track td {
    padding: 0;
}

.track.spam {
        background-color: darkorange;
}
#playall:active,
#playpause:active,
.playtrack:active {
        background-color: rebeccapurple;
}
#playall:visited,
#playpause:visited,
.playtrack:visited,
.track:visited {
        color: white;
}
.playtrack {
        display: inline-block;
        color: white;
        height: 48px;
        width: 48px;
        text-decoration: none;
        text-align: center;
        line-height: 48px;
}

.playtrack:hover {
        background-color: rebeccapurple;
        text-decoration: none;
}
.duration {
        color: #888;
}
.track.active {
        background-color: #222;
}
.track a {
        color: white;
        text-decoration: none;
        font-weight: 600;
}

.track a:hover {
        text-decoration: none;
}
#playlist table {
        border-collapse: collapse;
        width: 100%;
}
#playlist table tr {
        height: 48px;
        vertical-align: middle;
        border-bottom: 1px solid #444;
        padding: 0 8px;
}
.transcription,
.creation_dt {
        color: #888;
        font-variant: all-small-caps;
}
#playlist table tr .playing * {
        color: darkorange;
}
.new {
        display: inline-block;
        color: white;
        background-color: rebeccapurple;
        font-variant: all-small-caps;
        border-radius: 4px;
        padding: 2px 4px;
}
.more {
        display: inline-block;
        color: #888;
        background-color: #444;
        font-variant: all-small-caps;
        border-radius: 4px;
        padding: 2px 4px;
        text-decoration: none;
}
.more:hover {
        color: white;
}

.banner {
  background-color: rebeccapurple;
 color: white;
  width: 100%;
  min-height: 30vh;
  padding: 16px;
  box-sizing: border-box;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.banner h2 {
  font-family: 'League Gothic', sans-serif;
  font-size: 48px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.05ch;
  }

.banner > * {
  text-align: center;
}
.banner a {
  color: white;
  }
.dc_logo {
  background: center / contain no-repeat url('/static/dawn_chorus_crop.png');
}

/* Typography Utilities */
.large {
  font-size: 20px;
}
.bold {
  font-weight: 900;
}
.centered {
  text-align: center;
}
#scream_card {
}
.scream_id {
        background-color: black;
        color: white;
        font-size: 80px;
        margin: 0;
        padding: 24px;
        font-family: 'League Gothic';
        text-transform: uppercase;
        text-align: center;
}
.scream_id a,
.scream_id a:hover {
        color: inherit;
        text-decoration: inherit;
}
.scream_details {
        padding: 24px;
        margin: 0;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-content: center;
        background-color: #222;
        color: white;
}
.scream_details * {
        margin: 0 24px;
        color: white;
        text-align: center;
}
.scream_details a,
.scream_details a:hover,
.scream_details a:visited {
        color: white;
}
.playlist_label {
        display: inline-block;
        color: white;
        background-color: rebeccapurple;
        font-variant: all-small-caps;
        border-radius: 4px;
        padding: 2px 4px;
        margin-top: -2px;
        text-decoration:none;
}
.playlist_label:hover {
        color: white;
        background-color: darkorange;
        text-decoration: none;
}
#playlist_grid {
  display: grid;
  background: black;
  grid-gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: minmax(160px, auto);
}
#playlist_grid .playlist_link {
        display: block;
        text-decoration:none;
        background-color: white;
        color: black;
        border: 16px solid;
        border-image: linear-gradient(to bottom right, rebeccapurple 0%, indigo 80%);
        border-image-slice: 1;
        padding: 16px;
}
#playlist_grid .playlist_link:hover {
      }



.playlist_link h3 {
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05ch;
  font-size: 32px;
  font-weight: normal;
  margin: 0;
}
.track_count {
        color: #888;
        font-variant: all-small-caps;
      }
.page {
        display: grid;
}

/* Utility Classes */
.grow { transition: all 200ms ease-in-out; }
.grow:hover { transform: scale(1.01); } 

.bg-black { background-color: black; }
.pad { padding: 16px; }
.text-white, .text-white a { color: white; }

@media (min-width: 481px) {
        #header h1 {
                font-size: 240px;
        }
        .step {
                width: 320px;
        }
        .step_text {
                font-size: 48px;
                line-height: 48px;
        }
        .step_detail {
                font-size: 24px;
                line-height: 36px;
        }
        #header #logo_top { 
                height: 160px;
        }
        #header_slim #logo_top {
                height: 80px;
        }
        #header_slim h1 {
                font-size: 80px;
        }
        #header_slim h1 img {
                height: 80px;
        }
        #playlist {
                margin: 0 24px 64px 24px;
        }
        .pad { padding: 24px; }
}

@media (min-width: 769px) {
        #top {
                padding: 48px;
        }

        #header {
                padding: 48px;
                padding-bottom: 0px;
        }
        .call_to_action {
                font-size: 48px;
        }
        #header #logo_top {
                height: 240px;
        }
        #header_slim #logo_top {
                height: 96px;
        }
        #header_slim h1 {
                font-size: 96px;
        }
        #header_slim h1 img {
                height: 96px;
        }
        .step {
                width: 320px;
        }
        #playlist  {
                margin: 0 128px 64px 128px;
        }
        #playlist_header {
                margin-top: 48px;
        }
        #playlist_header > * {
                margin-bottom: 48px;
        }
        #playlist_description {
                margin-bottom: 48px;
        }
        #fine_print div {
                margin: 16px 48px;
        }
        .pad { padding: 48px; }
}

@media (min-width: 1025px) {
  #playlist  {
    width: 768px;
    margin: 0 auto 64px auto;
  }
  .page {
    width: 768px;
    margin: 0 auto 64px auto;
}
  .large {
    font-size: 24px;
  }
}