@import "sizes.css";
@import "colors.css";

/* Global Variables */
:root {
  --font-size: 15px;
  --card-border-radius: var(--size-lg);
}

/* Global Styles */
* {
  font-family: "Outfit", sans-serif;
}

body {
  background-color: var(--color-light-gray);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Main Component */
main {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Card Component */
.card {
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: var(--card-border-radius);
  max-width: 320px;
  text-align: center;
  padding: var(--size-lg);
  box-shadow: 0px 20px 25px -5px var(--color-shadow);
}

.card img {
  max-width: 100%;
  display: block;
  border-radius: calc(var(--card-border-radius) - var(--size-xs));
}

.card__content {
  padding: 0px var(--size-xs) var(--size-xs) var(--size-xs);
}

.card__content p {
  color: var(--color-grayish-blue);
}

.card__content h1 {
  color: var(--color-dark-blue);
}

/* Footer Attribution */
footer.attribution {
  font-size: 11px;
  margin-top: auto;
  text-align: center;
}

.attribution a {
  color: var(--color-dark-blue);
}