* {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
}

body {
    background: url(/images/film-composer-background.jpg) center top no-repeat fixed;
    background-color: #050506;
}

.social {
    display: inline-block;
    height: 28px;
    color: #A8AAA1;
    font-weight: 300;
    line-height: 12px;
}

.social:hover {
    color: #e11d48;
    cursor: pointer;
}

.social.link {
    padding: 2px 10px 2px 10px;
    border: 1px solid rgba(225, 29, 72, 0);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

.social.link:hover {
    border: 1px solid rgba(225, 29, 72, 1);
}

h2 {
    word-spacing: 0.5rem;
}

.notes h2 {
    word-spacing: 0.1rem;
    line-height: 2rem;
}

h3.genre {
    color: #E6E7E4;
}

h4.genre-keywords {
    word-spacing: 0.5rem;
    color: #A8AAA1;
    white-space: nowrap;
}

.playlist {
    background-color: rgba(162, 165, 151, 0.3);
}

.track-list {
    height: 202px;
    padding-bottom: 0px;
}

.track {
    background-color: rgba(161, 161, 170, 0);
    margin-bottom: 1px;
}

.track.active {
    background-color: rgba(161, 161, 170, 0.2);
}

.now-playing-info {
    width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.time-display {
    min-width: 25%;
    text-align: right;
}

.track-title {
    font-weight: 200;
    color: white;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.prose p {
    font-weight: 200;
    margin-bottom: 20px;
    text-shadow: 0px 1px 3px rgba(11, 11, 9, 1);
}

.prose a {
    color: white;
    font-weight: 400;
}

.prose a:hover {
    color: #A8AAA1;
    transition-duration: 200ms;
}

form label {
    color: #D7D8D4;
    font-weight: 200;
    margin-bottom: 12px;
    text-shadow: 0px 1px 3px rgba(11, 11, 9, 1);
}

form input, form textarea {
    font-weight: 200;
    color: white;
    background-color: rgba(162, 165, 151, 0.2);
    border: solid 1px #787A71;
    margin-bottom: 16px;
}

form button {
    color: white;
    background-color: rgba(162, 165, 151, 0.6) !important;
}

form button:hover {
    background-color: rgba(225, 29, 72, 1) !important;
}

@media only screen and (min-width: 300px) {  /* small */
  body {
    background-position: center top fixed !important;
    background-size: 1080px !important;
    }
}

@media only screen and (min-width: 768px) {  /* medium */
  body {
    background-position: center top fixed !important;
    background-size: 1440px !important;
  }
}

@media only screen and (min-width: 1200px) {  /* large */
  body {
    background-position: center top fixed !important;
    background-size: 2560px !important;
  }
}


/* Audio controls overrides */
input[type="range"] {background: #E6E7E4; color: #595B52;}

/* Styling for the thumb/knob */
.volume-control::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  background: #595B52; /* Blue color for the knob */
  border-radius: 50%;
  cursor: pointer;
}

/* Firefox */
.volume-control::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: #595B52; /* Blue color for the knob */
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* Edge/IE */
.volume-control::-ms-thumb {
  width: 15px;
  height: 15px;
  background: #595B52; /* Blue color for the knob */
  border-radius: 50%;
  cursor: pointer;
}


/* Colors */

.text-rose-600, .hover\:text-rose-600:hover  {
    color: #e11d48;
}

.bg-rose-600 {
    background-color: #e11d48;
}

.border-rose-600 {
    border-color: #e11d48;
}


/* Zinc Text Colors */
.text-zinc-50 {
    color: #fafafa;
}

.text-zinc-100 {
    color: #f5f5f4;
}

.text-zinc-200 {
    color: #E6E7E4;
}

.text-zinc-300 {
    color: #D7D8D4;
}

.text-zinc-400 {
    color: #A8AAA1;
}

.text-zinc-500 {
    color: #787A71;
}

.text-zinc-600 {
    color: #595B52;
}

.text-zinc-700 {
    color: #45463F;
}

.text-zinc-800 {
    color: #292A27;
}

.text-zinc-900 {
    color: #1A1B18;
}

.text-zinc-950 {
    color: #0B0B09;
}

/* Zinc Background Colors */
.bg-zinc-50 {
    background-color: #fafafa;
}

.bg-zinc-100 {
    background-color: #f5f5f4;
}

.bg-zinc-200 {
    background-color: #E6E7E4;
}

.bg-zinc-300 {
    background-color: #D7D8D4;
}

.bg-zinc-400 {
    background-color: #A8AAA1;
}

.bg-zinc-500 {
    background-color: #787A71;
}

.bg-zinc-600 {
    background-color: #595B52;
}

.bg-zinc-700 {
    background-color: #45463F;
}

.bg-zinc-800 {
    background-color: #292A27;
}

.bg-zinc-900 {
    background-color: #1A1B18;
}

.bg-zinc-950 {
    background-color: #0B0B09;
}

/* Zinc Border Colors */
.border-zinc-50 {
    border-color: #fafafa;
}

.border-zinc-100 {
    border-color: #f5f5f4;
}

.border-zinc-200 {
    border-color: #E6E7E4;
}

.border-zinc-300 {
    border-color: #D7D8D4;
}

.border-zinc-400 {
    border-color: #A8AAA1;
}

.border-zinc-500 {
    border-color: #787A71;
}

.border-zinc-600 {
    border-color: #595B52;
}

.border-zinc-700 {
    border-color: #45463F;
}

.border-zinc-800 {
    border-color: #292A27;
}

.border-zinc-900 {
    border-color: #1A1B18;
}

.border-zinc-950 {
    border-color: #0B0B09;
}