body{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #f2f2f2;
    background-color: #111;
    line-height: 1.6;
}

/* HTML: <div class="loader"></div> */
/* link from animation site: https://css-loaders.com/spinner/ */
.loader {
    display:  none; /* hidden by default */
    margin: 6px 0;  /* some spacing above player*/
    width: calc(80px / cos(45deg));
    height: 14px;
    background: repeating-linear-gradient(-45deg,#000 0 15px,#0000 0 20px) left/200% 100%;
    animation: l3 2s infinite linear;
}
@keyframes l3 {
    100% {background-position:right}
}

/* Title card for h1 */

h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: white;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

h1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
}
h1 em {
  font-style: normal;
  font-weight: 600;
}


/* Navigation */
nav {
    margin-bottom: 30px;
}

nav a{
    color: #ccc;
    text-decoration: none;

}

nav a:hover{
    text-decoration: underline;
}

/* Title card */
.nine h1 {
  text-align:center; font-size:50px; text-transform:uppercase; color:#ffef33; letter-spacing:1px;
  font-family:"Playfair Display", serif; font-weight:400;
}
.nine h1 span {
  margin-top: 5px;
    font-size:15px; color:white; word-spacing:1px; font-weight:normal; letter-spacing:2px;
    text-transform: uppercase; font-family:"Raleway", sans-serif; font-weight:500;

    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 27px 0;
    grid-gap: 20px;
    align-items: center;
}

.nine h1 span:after,.nine h1 span:before {
    content: " ";
    display: block;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    height: 5px;
  background-color:#f8f8f8;
}



/* Project card that sets up the selection of 3-up*/
.project {
    margin: 0 16px 40px;
}

.project > h1 {
    font-size: 20px;
    margin: 0 0 12px;
    border-bottom: 2px solid #444;
    padding-bottom: 6px;
}



/* each selection of tracks */
.project .music-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 10px;                              /* spacing between cards*/
}


.project .track {
  background: #222;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 10px;

  /* size control */
  max-width: 400px;       /* keeps them from stretching too wide */
  width: 100%;            /* take all the space up to max-width */
  margin: 0 auto;         /* center inside the grid cell */

  box-sizing: border-box;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.track .cover {
    display: block;

    aspect-ratio: 9 / 16;
    object-fit: cover; /*crops nicely */
    margin: -10px -20px 10px;
    background: #151515;

    width: 100%;
    height: 200px;
    margin: 0px;

}

.track .coverBlock {
    display: block;
    aspect-ratio: 1/1;
    object-fit: cover; /*crops nicely */
    margin: -10px -20px 10px;
    background: #151515;

    width: 100%;
    height: 200px;
    margin: 0px;

}

.track:hover{
    background-color: #2a2a2a;
    transform: scale(1.01);
    box-shadow: 0px 4px 12px rgba(255,255,255,0.05);
}
.track h3 {
    margin-top: 0;
    font-size: 20px;
    font-family:'Times New Roman', Times, serif;
    text-align: center;
}

audio {
    margin-top: 4px;
    width: 300px;
    margin: 0 auto;
}

/* 
Make it responsive 
"If the screen is at least 600px wide, show two tracks per row with a gap."

responsive: shrink to 2 per row on tablets, 1 per row on phones
*/
@media (min-width: 900px) {
    .project .music-selection{
        grid-template-columns: repeat(2, 1fr);
    }
    .track{
        width: calc(50%-20%x)
    }
}

@media (max-width: 600px) {
    .project .music-selection {grid-template-columns: 1fr;}
}