/**
  -----------------------------------------------------------------------------

  @file CSS Styles for Fawn Boutique.

  -----------------------------------------------------------------------------

  Table of Contents

  -----------------------------------------------------------------------------

  1. Fonts
  2. Custom Properties
  3. Keyframes
  4. Global Styles
  5. Utility Classes
  6. Component Styles

  -----------------------------------------------------------------------------

  Authors

  -----------------------------------------------------------------------------

  - Abigail Conroy
  - Emily Conroy

  -----------------------------------------------------------------------------
*/

 @font-face {
  font-family: Quicksand;
  src: url(/assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf);
}

:root {
  --color-brand: hsl(83, 30%, 31%);
  --color-brand-lighter: hsl(83, 30%, 85%);
  --color-brand-lightest: hsl(83, 30%, 95%);
  --font-primary: Quicksand, sans-serif;
  --font-secondary: var(--font-primary);
  --line-height: 2;
  --line-height-small: 1.2;
  --spacing: 1rem;
  --spacing-large: calc(var(--spacing) * 2);
}

@keyframes card-before {
  0% {
    rotate: 4deg;
  }

  50% {
    rotate: 6deg;
  }

  100% {
    rotate: 4deg;
  }
}

@keyframes card-after {
  0% {
    rotate: -3deg;
  }

  50% {
    rotate: -5deg;
  }

  100% {
    rotate: -3deg;
  }
}

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

body {
  margin: 0;
  padding: var(--spacing-large);
  background-color: var(--color-brand);
  font-family: var(--font-primary);
  line-height: var(--line-height);
  text-align: center;
}

main {
  min-height: 100vh;
  display: grid;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-brand);
  font-weight: bold;
  letter-spacing: 0.02rem;
}

h1,
h2,
h3 {
  line-height: var(--line-height-small);
  font-family: var(--font-secondary);
}

hr {
  border-color: var(--color-brand);
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.card,
.card::before,
.card::after {
  position: relative;
  background-color: white;
  border-radius: 15px;

}

.card {
  z-index: 1;
}

.card::before,
.card::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-brand-lighter);
}

.card::before {
  position: absolute;
  animation: card-before 2s infinite;
}

.card::after {
  animation: card-after 2.5s infinite;
}

.card__content {
  background-color: var(--color-brand-lightest);
  position: relative;
  z-index: 2;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 4px 6px 9px 0px #6e6e6e;
}

.card__content > * {
  margin: 0;
}

.card__content > * + * {
  margin-block-start: var(--spacing-large);
}

.card__content img {
  max-width: 160px;
  margin-inline: auto;
}