/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --background-color: #d8d5af;
  --accent-color: #5e41d5;
  --main-color: #19232c;
}

h1, h2, h3 {
  font-family: 'Fraunces';
  font-weight: bold;
}

a {
  color: var(--accent-color);
  text-decoration: none;
}

h1 {
  text-transform: uppercase;
}

p, a, span {
  font-family: 'Fraunces';
}

.service-link {
  font-size: x-large;
}

#page-title {
  font-size: min(3.6em, 7.6vw);
  margin: 0;
}

iframe{
   border: 0;
   max-width: 1000px;
   height: 671px;
}

main, footer {
  margin: 20px 0px;
}

body {
  background: var(--background-color);
  color: var(--main-color);
}


#album-img-container{
  margin: auto;
  margin-bottom: 10px;

  img {
    max-width: min(100%, 500px);
    height: auto;
  }
}

audio {
 display: none;
}

#play-album-button {
  font-size: xx-large;
  border: none;
  padding: 10px 20px;
  border-radius: 100px;
  background: var(--accent-color);
  color: #FFFFFF;
  font-family: 'Fraunces';
  font-weight: bold;
  cursor: pointer;
}

#tracks {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .track {
    display: flex;
    flex-direction: column;
    gap: 5px;

    .main {
      display: flex;
      gap: 10px;

      button {
        width: 30px;
        height: 30px;
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
        color: white;
        background: var(--accent-color);
        border: none;
        border-radius: 50px;

        img {
          align-self: center;
          filter: invert();
        }
      }
    
      h3 {
        margin: 0;
        font-size: x-large;
      }
    }

    .player-ui {
      display: flex;
      flex-direction: column;

      .time {
        font-size: 24px;
        width: 350px;
        text-align: center;
      }

      .progress-bar {
        width: 350px;
        height: 15px;
        background-color: white;
        border-radius: 30px;
        display: block;
        cursor: pointer;
        overflow: hidden;

        .progress {
          height: 100%;
          background-color: var(--accent-color);
        }
      }
    }
  }
}