:root {
   --blue: #007bff;
   --indigo: #6610f2;
   --purple: #6f42c1;
   --pink: #e83e8c;
   --red: #dc3545;
   --orange: #fd7e14;
   --yellow: #ffc107;
   --green: #28a745;
   --teal: #20c997;
   --cyan: #17a2b8;
   --white: #fff;
   --gray: #6c757d;
   --gray-dark: #343a40;
   --primary: #007bff;
   --secondary: #6c757d;
   --success: #28a745;
   --info: #17a2b8;
   --warning: #ffc107;
   --danger: #dc3545;
   --light: #f8f9fa;
   --dark: #343a40;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
   --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
   --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
   --main-bg-color: #0099CC;
   --main-color-off-white: white;
   --main-color-light-blue: #66CCFF;
   --main-color-dark-blue: #003399;
}

.songs-container {
   padding:20px
}

.album-title {
   font-size:1.25em;
   font-weight:700;
   padding-top:15px
}

.songs-audio-controls .play_pause {
   font-size:1.5em;
   padding-right:10px
}

.content {
   background-color: #fff;
   min-height: 500px;
   box-shadow: 2px 2px 5px 0 #777;
}

.content div {
   padding: 20px;
}

.testament-title {
   font-size: 1.25em;
   font-weight: 700;
   padding: 5px 10px 5px 5px;
   box-shadow: 0 1px 3px grey;
}

body {
   margin: 0;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #212529;
   text-align: left;
   background-color: #fff;
   background: var(--main-bg-color);
}

#header h1 {
   font-size: 4em;
   font-weight: 700;
   line-height: 50px;
   margin: 0;
   padding: 30px 0;
   text-align: center;
   color: var(--main-color-off-white);
}

#header ul#navigation {
   list-style: none;
   margin: 0;
   padding: 0;
   text-align: center;
}

#header ul#navigation li {
   display: inline;
   line-height: 30px;
   position: relative;
}

#header ul#navigation li a {
   color: white;
   font-size: 20px;
   padding: 0 46px;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   font-weight: 700;
}

#header ul#navigation li a.active {
   color: var(--main-color-dark-blue);
   border-bottom: 1px solid var(--main-color-dark-blue);
}

.container {
   width: 100%;
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto
}

@media (min-width: 768px) {
   .container {
      max-width:720px
   }
}

@media (min-width: 992px) {
   .container {
      max-width:960px
   }
}

@media (min-width: 1200px) {
   .container {
      max-width:1140px
   }
}

#play-all-container > div {
   padding: 0;
}

#songs-playing-details > span {
   display: block;
}

details details {
   background: #eee;
}

details {
   display: block;
   margin-bottom: 1rem;
   padding: .5rem 1rem;
}

details summary {
   display: flex;
   align-items: center;
   border-bottom: 1px solid lightgray
}

details summary::before {
   content: "\25BA";
   margin-right: .5rem;
}

details[open] > summary::before {
   content: "\25BC";
 }


details summary  > h2 {
   flex-grow: 1;
   margin: 0;
   padding: 0 !important;
}

details summary > * { 
   display: inline;
}

table {
   border: 1px solid #aaa;
   border-collapse: collapse;
   width: 100%;
   background-color: transparent
}

table td, table th {
   padding: .75rem;
   vertical-align: top;
   border-top: 1px solid #dee2e6
}

table thead th {
   vertical-align: bottom;
   border-bottom: 2px solid #dee2e6;
   text-align: left;
}

table tbody+tbody {
   border-top: 2px solid #dee2e6
}

.table-striped tbody tr:nth-of-type(odd) {
   background-color: rgba(100,100,200,.2);
   border-bottom: 2px solid rgba(0,0,100,.2);
   border-top: 2px solid rgba(0,0,100,.2);
}