:root {
  --breakpoint-mobile-tablet: 425px;
  --breakpoint-tablet-desktop: 992px;
  --breakpoint-this: 540px;

  font-size: 62.5%;

  --ff-primary-1: "Inter", sans-serif;
  --ff-primary-2: "Lexend Deca", sans-serif;

  --clr-primary-very-dark-blue: hsl(233, 47%, 7%);
  --clr-primary-dark-desaturated-blue: hsl(244, 38%, 16%);
  --clr-accent-soft-violet: hsl(277, 64%, 61%);
  --clr-accent-soft-violet-overlay: hsla(277, 64%, 61%, 0.358);
  --clr-neu-white-1: hsl(0, 0%, 100%);
  --clr-neu-white-2: hsla(0, 0%, 100%, 0.75);
  --clr-neu-white-3: hsla(0, 0%, 100%, 0.6);

  --fs-500: 1.5rem;
  --fs-600: 2rem;
  --fs-700: 3rem;

  --fs-body: var(--fs-500);
  --fs-heading: var(--fs-600);

  --fw-400: 400;
  --fw-700: 700;

  --radius: 1rem;
}

@media screen and (min-width: 992px) {
  :root {
    --fs-body: var(--fs-500);
    --fs-heading: var(--fs-700);
  }
}

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

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Disabling Text Selection by User */
* {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

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

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utility Classes */
.text-clr-primary-very-dark-blue {
  color: var(--clr-primary-very-dark-blue);
}

.text-clr-primary-dark-desaturated-blue {
  color: var(--clr-primary-dark-desaturated-blue);
}

.text-clr-accent-soft-violet {
  color: var(--clr-accent-soft-violet);
}

.text-clr-neu-white-1 {
  color: var(--clr-neu-white-1);
}

.text-clr-neu-white-2 {
  color: var(--clr-neu-white-2);
}

.text-clr-primary-very-dark-blue {
  color: var(--clr-neu-white-3);
}

.bg-clr-primary-very-dark-blue {
  background-color: var(--clr-primary-very-dark-blue);
}

.bg-clr-primary-dark-desaturated-blue {
  background-color: var(--clr-primary-dark-desaturated-blue);
}

.bg-clr-accent-soft-violet {
  background-color: var(--clr-accent-soft-violet);
}

.bg-clr-neu-white-1 {
  background-color: var(--clr-neu-white-1);
}

.bg-clr-neu-white-2 {
  background-color: var(--clr-neu-white-2);
}

.bg-clr-primary-very-dark-blue {
  background-color: var(--clr-neu-white-3);
}

.fs-heading {
  font-size: var(--fs-heading);
}

.fs-body {
  font-size: var(--fs-body);
}

.fw-400 {
  font-weight: var(--fw-400);
}

.fw-700 {
  font-weight: var(--fw-700);
}

.rounder-corner {
  border-radius: var(--radius);
}

/* FEM Attribution */
.attribution {
  margin-bottom: 1rem;
  font-size: 11px;
  text-align: center;
  color: var(--clr-neu-white-1);
}
.attribution a {
  color: var(--clr-accent-soft-violet);
}

/* Body */
body {
  width: 100vw;
  min-height: 100vh;
  display: grid;
  place-content: center;
  place-items: center;
  color: var(--clr-neu-white-2);
  background-color: var(--clr-primary-very-dark-blue);
  font-family: var(--ff-primary-1);
  font-size: var(--fs-body);
  font-weight: var(--fw-400);
}

/* Stats Card */
#stats-card {
  background-color: var(--clr-primary-dark-desaturated-blue);
  border-radius: var(--radius);
  margin: 3rem 3rem 2rem 3rem;
  max-width: 38rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.stats-img {
  border-radius: var(--radius) var(--radius) 0 0;
  width: 100%;
  height: 30rem;
}

.stats-img-purp-overlay {
  display: block;
  position: absolute;
  width: 100%;
  height: 30rem;
  background-color: var(--clr-accent-soft-violet-overlay);
  border-radius: var(--radius) var(--radius) 0 0;
}

.stats-content {
  padding: 3rem;
  text-align: center;
}

.stats-content h1 {
  margin-bottom: 1rem;
}

.stats-content > p {
  margin-bottom: 2rem;
}

.stats {
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  font-family: var(--ff-primary-2);
}

.stat {
  margin-bottom: 1.8rem;
}

.stat h2 {
  font-size: var(--fs-heading);
  color: var(--clr-neu-white-1);
  font-weight: var(--fw-700);
}

.stat h3 {
  letter-spacing: 0.2rem;
  font-size: var(--fs-body);
}

@media screen and (min-width: 992px) {
  #stats-card {
    display: flex;
    flex-direction: row-reverse;
    min-width: none;
    max-width: 120rem;
  }

  .stats-img {
    border-radius: 0 var(--radius) var(--radius) 0;
    width: 45rem;
    height: auto;
  }

  .stats-img-purp-overlay {
    display: block;
    position: absolute;
    width: 45rem;
    height: 100%;
    background-color: var(--clr-accent-soft-violet-overlay);
    border-radius: 0 var(--radius) var(--radius) 0;
  }

  .stats-content {
    padding: 5rem 10rem 5rem 5rem;
    text-align: left;
  }

  .stats-content h1 {
    margin-bottom: 2rem;
  }

  .stats-content > p {
    margin-bottom: 5rem;
  }

  .stats {
    display: flex;
    flex-direction: row;
    text-transform: uppercase;
    font-family: var(--ff-primary-2);
    width: 100%;
    justify-content: space-between;
  }

  .stat {
    margin-bottom: 1.8rem;
  }

  .stat h2 {
    font-size: var(--fs-heading);
    color: var(--clr-neu-white-1);
    font-weight: var(--fw-700);
  }

  .stat h3 {
    letter-spacing: 0.2rem;
    font-size: var(--fs-body);
  }
}