:root {
  /* --- Primary colors --- */
  --paragraphs: hsl(215, 51%, 70%);
  --Cyan: hsl(178, 100%, 50%);
  --Cyan-hover: hsla(178, 100%, 50%, 0.5);

  /* --- Neutral colors --- */
  --main-bg: hsl(217, 54%, 11%);
  --card-bg: hsl(216, 50%, 16%);
  --divider: hsl(215, 32%, 27%);
  --White: hsl(0, 0%, 100%);
}

html {
  box-sizing: border-box;
  font-size: 100%;
}

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

body {
  background-color: var(--main-bg);
  font-family: "Outfit", sans-serif;
  padding: 4rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* --- Block styling and link hover states (does not include footer hover animation)--- */
.white-clr {
  color: var(--White);
}

.gray-clr {
  color: var(--paragraphs);
}

.cyan-clr {
  color: var(--Cyan);
}

a {
  text-decoration: none;
}

.align-items {
  display: flex;
  align-items: center;
  column-gap: 0.25rem;
}

.mg {
  margin: 0;
}

.hover-state:hover {
  transition: 0.25s;
  color: var(--Cyan);
}

/* ---------------------------------------------- */
.card {
  width: 19.9219rem;
  background-color: var(--card-bg);
  border-radius: 1rem;
  padding: 1.25rem;
}

.block {
  display: grid;
  grid-template: 1fr 1fr;
  grid-template-areas: "img";
}

.card__img {
  width: 100%;
  border-radius: 0.5rem;
  grid-area: img;
}

.block::after {
  grid-area: img;
  width: 100%;
  height: 100%;
  content: url(../assets/images/icon-view.svg);
  background-color: var(--Cyan-hover);
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  clip-path: fill-box;
  opacity: 0;
}

.block:hover::after {
  transition: 500ms;
  opacity: .5;
}

.card__tittle {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 1.5rem 0;
}

.card__description {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75rem;
  margin: 0 0 1.25rem;
}

.card__stats {
  display: flex;
  justify-content: space-between;
}

.card__stats__value {
  font-weight: 600;
}

.divider {
  border: 0.5px solid var(--divider);
  margin: 1.25rem 0;
}

.card__author {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.card__author-img {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--White);
  border-radius: 50%;
}

/* --- Footer --- */
.attribution {
  font-size: 0.6875rem;
  text-align: center;
  margin-top: 2rem;
}

.attribution a {
  color: hsl(228, 45%, 44%);
  font-weight: 600;
  text-decoration: underline;
}

.attribution a:hover {
  transition: 0.25s;
  opacity: 0.7;
}

/* Needed to center vertically the card when the height of any device reaches 620px */
@media (min-height: 38.75rem) {
  body {
    height: 100vh;
    padding: 0;
  }
}