:root {
  --size-mobile: 375px;
  --size-desktop: 1440px;
  --color-bright-orange: hsl(31, 77%, 52%);
  --color-dark-cyan: hsl(184, 100%, 22%);
  --color-very-dark-cyan: hsl(179, 100%, 13%);

  --color-transparent-white: hsla(0, 0%, 100%, 0.75);
  --color-light-gray: hsl(0, 0%, 95%);
  --color-light-dark: hsl(0, 5%, 37%);

  --font-lexend-deca: "Lexend Deca", sans-serif;
  --font-big-shoulders-display: "Big Shoulders Display", cursive;

  --border-radius-card: 0.3rem;
}

body {
  font-size: 15px;
  margin: 0;
}

main {
  height: calc(100vh - 3rem);
  box-sizing: border-box;
  padding: 1rem;
  display: grid;
  place-content: center;
  color: var(--color-light-gray);
}

.card {
  display: flex;
  border-radius: 1rem;
}

.card > .column {
  max-width: 220px;
  padding: 2.8rem;
}

.card > .column > .title {
  font-size: 2rem;
  text-transform: uppercase;
  font-family: var(--font-big-shoulders-display);
}

.card > .column > .subtitle {
  line-height: 1.8rem;
  font-family: var(--font-lexend-deca);
  color: var(--color-transparent-white);
}

.card > .column > .learn-more {
  border: 0.1rem solid var(--color-light-gray);
  background-color: var(--color-light-gray);
  padding: 0.8rem 1.3rem;
  border-radius: 2.2rem;
  margin-top: 3rem;
  font-family: var(--font-lexend-deca);
  transition: all 0.5s ease;
}

.card > .column > .learn-more:hover {
  background-color: transparent;
  color: var(--color-light-gray) !important;
  cursor: pointer;
}

.card > .column:nth-of-type(1) {
  background-color: var(--color-bright-orange);
  border-radius: var(--border-radius-card) 0 0 var(--border-radius-card);
}

.card > .column:nth-of-type(1) > .learn-more {
  color: var(--color-bright-orange);
}

.card > .column:nth-of-type(2) {
  background-color: var(--color-dark-cyan);
}

.card > .column:nth-of-type(2) > .learn-more {
  color: var(--color-dark-cyan);
}

.card > .column:nth-of-type(3) {
  background-color: var(--color-very-dark-cyan);
  border-radius: 0 var(--border-radius-card) var(--border-radius-card) 0;
}

.card > .column:nth-of-type(3) > .learn-more {
  color: var(--color-very-dark-cyan);
}

footer {
    height: 3rem;
    display: grid;
    place-content: center;
}

.attribution {
    font-family: var(--font-lexend-deca);
    color: var(--color-light-dark);
    font-size: 0.8rem;
}

.attribution > a {
    font-size: 0.9rem;
    color: inherit;
    font-weight: bold;
}

@media screen and (max-width: 820px) {
  main {
    height: auto;
  }
  .card {
    flex-direction: column;
  }
  .card > .column:nth-of-type(1) {
    border-radius: var(--border-radius-card) var(--border-radius-card) 0 0;
  }
  .card > .column:nth-of-type(3) {
    border-radius: 0 0 var(--border-radius-card) var(--border-radius-card);
  }
}

@media screen and (max-width: 700px) {
    .attribution {
        font-size: 0.65rem;
    }
    .attribution > a {
        font-size: 0.7rem;
    }
}