/* ------------------- */
/* Custom properties   */
/* ------------------- */

:root {
  /* colors */
  --clr-dark: 260 10% 6%;
  --clr-medium: 213 32% 19%;
  --clr-light: 218 16% 59%;
  --clr-white: 0 0% 100%;

  /* font-sizes */
  /* --fs-900: clamp(5rem, 8vw + 1rem, 9.375rem);
  --fs-800: 3rem;
  --fs-700: 2rem;
  --fs-600: 1.5rem;
  --fs-500: 1.25rem;
  --fs-400: 1rem;
  --fs-300: 0.925rem;
  --fs-200: 0.875rem; */

  /* font-families */
  --ff-serif: "Bellefair", serif;
  --ff-sans-cond: "Barlow Condensed", sans-serif;
  --ff-sans-normal: "Barlow", sans-serif;
}

/* @media (min-width: 35em) {
  :root {
    --fs-800: 3.5rem;
    --fs-700: 2.25rem;
    --fs-600: 1.25rem;
    --fs-400: 1rem;
  }
}

@media (min-width: 45em) {
  :root {
    --fs-800: 4rem;
    --fs-700: 2.5rem;
    --fs-600: 1.5rem;
    --fs-400: 1.125rem;
  }
} */


/* ------------------- */
/* Reset               */
/* ------------------- */

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Reset margins */
body,
h1,
h2,
h3,
h4,
h5,
figure,
picture {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-weight: 400;
}

p {
  margin: 2rem 0;
}

/* ------------------- */
/* Set up              */
/* ------------------- */

html {
  font-size: 62.5%;
}

img,
picture {
  width: 100%;
  display: block;
}

body {
  font-family: var(--ff-sans-normal);
  font-size: 2rem;
  color: hsl(var(--clr-white));
  background-color: hsl(var(--clr-dark));
  line-height: 1.5;
  min-height: 100vh;
  display: grid;
  grid-template-rows: min-content 1fr;
  overflow-x: hidden;
}





/* ------------------- */
/* Utility classes     */
/* ------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  /* added line */
  border: 0;
}

.flex {
  display: flex;
  gap: var(--gap, 1rem);
}

.grid {
  display: grid;
  gap: var(--gap, 1rem);
}

.fs-italic {
  font-style: italic;
}

/* ------------------- */
/* Components          */
/* ------------------- */

/* primary-header */

.logo {
  /* margin: 0 clamp(2.5rem, 5vw, 4.5rem); */
  font-family: "Audiowide", serif;
  font-size: 5rem;
  /* margin-left: 2.5rem; */
  margin: 0;
}

.logo-sub-text {
  font-size: 1.6rem;
  letter-spacing: 6px;
  margin-left: 2.7rem;
  margin-top: 0px;
}

.primary-header {
  justify-content: space-between;
  align-items: flex-start;
  /* background-image: url(../assets/logo.png); */
  /* height: 100vh; */
}

.primary-navigation {
  --gap: clamp(1.5rem, 5vw, 3.5rem);
  --underline-gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  /* margin: 17px 5rem 0 0; */
  background: hsl(var(--clr-white) / 0.05);
  backdrop-filter: blur(1.5rem);
}

.primary-navigation a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2.7px;
  font-family: var(--ff-sans-cond);
  font-size: 2.5rem;
  color: hsl(var(--clr-white));
  white-space: nowrap;
}

/* .primary-navigation a > span {
  font-weight: 700;
  margin-right: 0.5em;
} */

.mobile-nav-toggle {
  display: none;
}

@media (max-width: 780px) {
  .primary-navigation {
    --underline-gap: 0.5rem;
    position: fixed;
    z-index: 1000;
    inset: 0 0 0 30%;
    list-style: none;
    padding: min(20rem, 15vh) 2rem;
    margin: 0;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 500ms ease-in-out;
  }

  .primary-navigation[data-visible="true"] {
    transform: translateX(0);
  }

  .primary-navigation.underline-indicators > .active {
    border: 0;
  }

  .mobile-nav-toggle {
    display: block;
    position: absolute;
    z-index: 2000;
    right: 1rem;
    top: 2rem;
    background: transparent;
    background-image: url(../assets/icon-hamburger.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 2.2rem;
    aspect-ratio: 1;
    border: 0;
  }

  .mobile-nav-toggle[aria-expanded="true"] {
    background-image: url(../assets/icon-close.svg);
  }

  .mobile-nav-toggle:focus-visible {
    outline: 5px solid white;
    outline-offset: 5px;
  }
}

@media (min-width: 780px) {
  .primary-navigation {
    padding-inline: clamp(3rem, 7vw, 7rem);
  }
}

/* @media (min-width: 35em) and (max-width: 44.999em) {
  .primary-navigation a > span {
    display: none;
  }
} */

/* @media (min-width: 45em) {
  .primary-header::after {
    content: "";
    display: block;
    position: relative;
    height: 1px;
    width: 100%;
    margin-right: -2.5rem;
    background: hsl(var(--clr-white) / 0.25);
    order: 1;
  }

  nav {
    order: 2;
  }

  .primary-navigation {
    margin-block: 2rem;
  }
} */

.underline-indicators > * {
  cursor: pointer;
  padding: var(--underline-gap, 1rem) 0;
  border: 0;
  border-bottom: 0.2rem solid hsl(var(--clr-white) / 0);
}

.underline-indicators > *:hover,
.underline-indicators > *:focus {
  border-color: hsl(var(--clr-white) / 0.5);
}

.underline-indicators > .active,
.underline-indicators > [aria-selected="true"] {
  color: hsl(var(--clr-white) / 1);
  border-color: hsl(var(--clr-white) / 1);
}

.tab-list {
  --gap: 2rem;
}

header {
  background-size: cover;
  background-position: bottom center;
 
}





.content-container {
  display: grid;
  /*justify-items: center;*/
  padding-inline: 1em;
  margin-inline: auto;
  max-width: 73rem;
  font-family: var(--ff-sans-cond);
  letter-spacing: 2px;
  line-height: 1.5;
  font-size: 2rem;
  color: hsl(var(--clr-light));
}

.article-header {
  font-size: 5rem;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-top: 5rem;
}

.article-sub-header {
  font-size: 3rem;
  margin-bottom: 5rem;
}

footer {
  display: flex;
  background-color: black;
  padding: 20px 40px;
  margin-top: 40px;
  font-size: 80%;
  justify-content: space-between;

}

footer a {
  color: white;
}

a {
    color: hsl(var(--clr-light));
    text-underline-offset: 3px; 
}

.space {
    padding-top: 25px;
    margin-bottom: 0;
}