/* General */

:root {

  /* Colors */
  --bg-primary: var(--gray-9);
  --bg-footer: #f1f3f5;
  --bg-button: #e9ecef;
  --text-white: #f8f9fa;


  --gray-9: #212529;
  --gray-5: #adb5bd;
  --gray-4: #ced4da;
  --gray-3: #182029;
  --gray-2: #e9ecef;
  --gray-1: #f1f3f5;
  --gray-0: #f8f9fa;


  /* Font sizes */

  --fs--2: 0.75rem;
  --fs--1: 0.8rem;
  --fs-0: 0.9rem;
  --fs-1: 1rem;
  --fs-2: 1.08rem;
  --fs-3: 1.25rem;
  --fs-4: 1.5rem;
  --fs-5: 2rem;
  --fs-6: 2.3rem;
}




body {
    font-size: var(--fs-1);
    font-weight: 300;
  }
  
  h1,
  h2,
  h3 {
    font-weight: 600;
  }
  
  
  h1 {
    font-size: var(--fs-4);
  }
      
  h2 {
    font-size: var(--fs-3);
  }
      
  h3 {
    font-size: var(--fs-1);
  }
    
  figcaption,
  p {
    font-size: var(--fs-0);
  }
  
    @media (min-width: 650px) {
    
      h1 {
        font-size: var(--fs-5);
      }
        
      h2 {
        font-size: var(--fs-4);
      }
        
      h3 {
        font-size: var(--fs-2);
      }
      
      
      p {
        font-size: var(--fs-1);
      }
     
    }
  
  
    @media (min-width: 900px) {
      h1 {
        font-size: var(--fs-6);
      }
        
      h2 {
        font-size: var(--fs-5);
      } 
  
      h3 {
        font-size: var(--fs-3);
      } 
    }
  
  p {
    max-width: 70ch;
  }
  
  
  /* Strong */
  
  strong {
    font-weight: 500;
  }
  
  /* Horizontal rule */
  
  hr {
    border: none;
    border-top: 1px solid var(--border-top-color, var(--gray-4));
    background-color: transparent;
  }
  

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.container--content {
  max-width: 800px;
}


/* Header */

.header {
    /* [Splitter] */
    --splitter-align: center;
    --splitter-justify: space-between;
    --splitter-wrap: wrap;
    --splitter-gap: 1rem;
  
    padding: 1rem 0;
    background-color: var(--bg-primary);
  }
  
  .header .nav {
    /* [Link] */
    --link-color: var(--text-white);
    --link-decoration: none;
    --link-display: block;
  
    /* [Nav] */
    --nav-fs: var(--fs-0);
    --nav-fw: 400;
  
    /* [List] */
    --list-style-type: none;    
  }

  @media(min-width: 650px) {
    .header .nav {
      /* [Nav] */
      --nav-fs: var(--fs-1);
    }
    
  }

  .header-logo a {
    display: block;
    color: var(--text-white);
  }
  
/* Footer */

.footer {
  padding: 1rem 0;
  background-color: var(--gray-9);
}

.footer .nav {
  /* [Nav] */
  --nav-justify: center;
  --nav-fs: var(--fs-0);
  --nav-fw: 400;

  /* [Link] */
  --link-color: var(--text-white);
  --link-decoration: none;
  --link-display: block;

  /* [List] */
  --list-style-type: none;

}

@media(min-width: 650px) {
  .footer .nav {
    /* [Nav] */
    --nav-fs: var(--fs-1);
  }
  
}

/* [Img] */

.article img {
  border-radius: 12px;
}


/* [Button] */

.button {  
  /* [Link] */
  --link-decoration: none; 

  display: inline-block;
  background-color: var(--button-bg, var(--bg-button));
  border-radius: 32px;
  padding: var(--button-padding-y, 0.55em) var(--button-padding-x, 0.85em);
  text-align: center;
  font-size: var(--button-fs);
  font-weight: var(--button-fw, 300);
}

.button--cta {
  /* [Link] */
  --link-outline-color: var(--bg-primary); 

  background-color: var(--button-bg, #e80a45);
  color: var(--text-white);
}

.button-group {
  display: flex;
  gap: var(--button-gap, 1rem);
  flex-wrap: var(--button-wrap, wrap);
  align-content: start;
}


/* Social banner */

.social {
  /* [Link] */
  --link-outline-color: var(--text-white);
  
  background-color: var(--bg-primary);
  padding: 2rem 0;
}

.nav--social {
  /* [Nav]  */
    --nav-justify: center;
    --nav-gap: 1.5rem;
    
  /* [List]  */
    --list-style-type: none;
}

.nav--social a {
  display: block;
  color: var(--text-white);
}

@media (min-width: 650px) {

  .social {
    padding: 3rem 0;
  }

  .nav--social {
    /* [Nav]  */
      --nav-gap: 3rem;
  }
}

.bandcamp {
  margin-top: 2px;
}

/* Article */

.article {
  /* [Flow] */
  --flow-space: 2rem;

  /* [Auto-fit] */
  --autofit-gap: 2rem;

  /* [List]  */
  --list-style-type: none;

  /* [Title] */
  --title-fs: var(--fs-5);
  --title-fw: 600;

  /* [Button] */
  --button-fs: var(--fs-0);

  padding: 2rem 0;
  background-color: white;
}

@media (min-width: 650px) {
  .article {
  /* [Button] */
  --button-fs:var(--fs-1);
  }
}

@media(min-width: 850px) {
  .article {
    /* [Title] */
    --title-fs: var(--fs-6);

    padding: 4rem 0;
  }
  
}


/* [Reusable components] */

/* [Title] */

.title {
  font-size: var(--title-fs);
  font-weight: var(--title-fw, 500);
}

/* [Subtitle] */

.subtitle {
  font-size: var(--subtitle-fs);
  font-weight: var(--subtitle-fw, 300);
}


/* [Link] */

a {
    color: var(--link-color, inherit);
    text-decoration: var(--link-decoration, underline);
    display: var(--link-display);
  }
  
  a:hover {
    opacity: var(--link-hover-opacity, 0.8);
  }
  
  a:focus-visible {
    outline: 1px solid var(--link-outline-color, currentColor);
    outline-offset: var(--link-outline-offset, 4px);
  }

/* [List] */

ul,
ol {
  list-style-position: outside;
  list-style-type: var(--list-style-type, square);
  padding: var(--list-padding-y) var(--list-padding-x);
}


/* [Nav] */

.nav {
    display: flex;
    flex-direction: var(--nav-direction);
    justify-content: var(--nav-justify);
    align-items: var(--nav-align);
    gap: var(--nav-gap, 1rem);
    flex-wrap: var(--nav-wrap, wrap);
    font-size: var(--nav-fs);
    font-weight: var(--nav-fw);
  }


/* [Auto-fit] */

.auto-fit {
    /* Flex backup */
    display: flex;
    flex-wrap: wrap;
    /* Grid layout */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--autofit-width, 350px)), 1fr));
    gap: var(--autofit-gap, 1rem);
  }


  /* [Flow] */

.flow > * + * {
    margin-top: 1rem;
    margin-top: var(--flow-space, 1rem);
  }
  
  /* [Splitter] */
  
  .splitter {
    display: var(--splitter-display, flex);
    align-items: var(--splitter-align);
    justify-content: var(--splitter-justify);
    flex-direction: var(--splitter-direction);
    flex-wrap: var(--splitter-wrap);
    gap: var(--splitter-gap, 1rem);
  }

/* ------------------ Utilities ------------------ */

/* Margin top bottom */

.my-lg {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .py-lg {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }