:root {
  --theme-accent-color: oklch(56% .26 288);
  --theme-link-color: oklch(0.692 0.182 288);

  --auto-grid-min-size: 36rem;
  --auto-grid-gap: 2rem;

  --button-border-radius: .6ex;

  --card-bg: color-mix(in oklch, #000 76%, oklch(60% .02 245));
  --card-border-radius: .75rem;
  --card-padding: 1.5rem;

  line-height: 1.5;
  padding: 0;
}

@media (max-width: 40rem) {
  :root {
    --auto-grid-min-size: 24rem;
    --auto-grid-gap: 1rem;
  }
}

@media (max-width: 30rem) {
  :root {
    --auto-grid-min-size: unset;
  }

  header, footer {
    & article {
      display: block !important;
    }
  }
}

a {
  color: var(--theme-link-color);
  &[class] {
    text-decoration: none;
  }
}

h1,h2,h3,h4,h5 {
  margin-block: 0;
  line-height: 1.2;
}

body {
  background-image: url("../img/banner.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover, 100%;
  background-repeat: no-repeat;
  
  /* all direct descendants of body, ie the 3 structural elements: header, main, footer */
  & > * {
    max-width: min(80vw, 1920px);
    margin-inline: auto;
  }
}

header, footer {
  
  display: flex;
  place-content: center;

  padding-block: var(--auto-grid-gap);

  & > article {
    display: inline-block;
  }
}

main article {
  &:hover {
    translate: 0 -.5ex;
  }
}

/* cards */
article {
  border: 1px solid;
  border-color: var(--theme-accent-color);
  border-radius: var(--card-border-radius);
  
  background-color: color-mix(in oklch, var(--card-bg) 80%, transparent);
  backdrop-filter: blur(5px)saturate(180%);
  color: white;

  padding: var(--card-padding);
  
  transition: .1s cubic-bezier(0.075, 0.82, 0.165, 1);

  @media (prefers-reduced-motion: reduce) {

    transition: 0s;
  }
}

ul {
  list-style: none;
  padding: 0;

  &.divider {
    display: flex;
    place-content: center;
    
    & li:not(:first-child) {
      border-inline-start: 1px solid color-mix(in oklch, #000 32%, oklch(60% .02 245));
    }
  }

  & li {
    padding-inline: .5rem;
  }
}

/* UTILITIES */

.card-body {
  display: flex;
  flex-direction: column;
  & .btn, .btn-solid {
    align-self: end;
  }
}

.btn-solid {
  color: white;
  padding: 1.2ex 1.5ex;
  background-color: var(--theme-accent-color);
  border-radius: var(--button-border-radius);
}

/*
  AUTO GRID
  Set the minimum item size with `--auto-grid-min-size` and you’ll
  get a fully responsive grid with no media queries.

  https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
*/
.auto-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size, 16rem), 1fr));
	grid-gap: var(--auto-grid-gap, 2rem);
}

.shadow {
  --bs-shadow-strength: 2.4;
  --bs-shadow-color: #000;
  box-shadow: 
    0 .125rem .25rem -.0625rem oklch(from var(--bs-sc,var(--bs-shadow-color)) l c h / calc(.04 * var(--bs-shadow-strength) * var(--bs-so,1))), 
    0 .375rem .75rem -.125rem oklch(from var(--bs-sc,var(--bs-shadow-color)) l c h / calc(.05 * var(--bs-shadow-strength) * var(--bs-so,1))), 
    0 .75rem 1.5rem -.25rem oklch(from var(--bs-sc,var(--bs-shadow-color)) l c h / calc(.06 * var(--bs-shadow-strength) * var(--bs-so,1)))
}