:root {
  --black: #000;
  --calypso: #255e7a;
  --cardinal: #b21b2d;
  --jelly-bean: #2b6f99;
  --picton-blue: #3fa9f5;
  --picton-blue-semi: rgba(63, 169, 245, 0.3);
  --porcelain: #f4f6f7;
  --powder-blue: #bbddea;
  --torch-red: #ff1d25;
  --white: #fff;
}

html, body {
  font-family: agenda, sans-serif;
  font-weight: 400;
  font-style: normal;
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
  font-family: inherit;
  font-weight: inherit;
}

/* Main content */
.content {
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 84%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

/* Footer */
.footer {
  align-items: center;
  background-color: var(--cardinal);
  bottom: 0;
  display: flex;
  height: 16%;
  justify-content: space-between;
  padding: 0 50px;
  position: fixed;
  width: 100%;
}

.footer--right {
  justify-content: flex-end;
}

.footer__center-text {
  color: var(--white);
  font-size: 2rem;
  font-style: italic;
  font-weight: 400;
}

.footer__text {
  color: var(--white);
  font-size: 4rem;
  margin-right: 150px;
  padding-bottom: 16px;
}

/* Navigation link */
.button {
  border: none;
  border-radius: 50%;
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 600;
  min-width: 140px;
  padding: 24px 20px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s;
}

.button:active {
  outline: none;
}

.button--light {
  background-color: var(--white);
  color: var(--calypso);
}

.button--light:active {
  background-color: var(--powder-blue);
}

.button--dark {
  background-color: var(--calypso);
  color: var(--white);
}

.button--dark:active {
  background-color: var(--jelly-bean);
}

.quote {
  background-color: var(--white);
  border-radius: 32px;
  color: var(--black);
  font-size: 1.75rem;
  font-style: italic;
  height: 100px;
  padding: 1rem;
  position: relative;
  width: 340px;
}

.quote::before {
  border: 30px solid transparent;
  border-right-color: var(--white);
  content: " ";
  left: 60%;
  position: absolute;
  top: 100%;
  transform: translateY(-50%);
  z-index: -1;
}

.quote--right::before {
  border-right-color: transparent;
  border-left-color: var(--white);
  left: 30%;
}

/* Quiz button */
.quiz-button {
  cursor: pointer;
  background-color: var(--white);
  border: none;
  border-radius: 32px;
  color: var(--black);
  font-size: 1.75rem;
  height: 100px;
  padding: 1rem;
  position: relative;
  transition: background-color 0.3s;
  width: 340px;
}

.quiz-button::before,
.quiz-button::after {
  background-repeat: no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 50px;
  position: absolute;
  width: 50px;
}

.quiz-button--left-face::before {
  background-image: url("img/face.svg");
  left: 16px;
  top: 26px;
}

.quiz-button--right-face::after {
  background-image: url("img/face.svg");
  right: 16px;
  top: 26px;
}

.quiz-button--right-top-face::after {
  background-image: url("img/face.svg");
  right: 16px;
  top: 8px;
}

.center-child {
  align-items: center;
  display: flex;
  justify-content: center;
}

/* bg images */
.bg-cloth { background-image: url("img/cloth.svg"); }
.bg-filter { background-image: url("img/filter.svg"); }
.bg-fire { background-image: url("img/fire.svg"); }
.bg-kitchen { background-image: url("img/kitchen.svg"); }
.bg-kitchen-last { background-image: url("img/kitchen-last.svg"); }
.bg-spoon { background-image: url("img/spoon.svg"); }

/* bg color */
.bg-cardinal { background-color: var(--cardinal); }
.bg-picton-blue { background-color: var(--picton-blue); }
.bg-porcelain { background-color: var(--porcelain); }
.bg-torch-red { background-color: var(--torch-red); }

.text-left { text-align: left; }
.text-right { text-align: right; }