:root {
  --color-yellow: #ff9d00;
  --color-darkyellow: #c36800;
  --rgb-blue: 0, 127, 255;
  --color-green: #47b34e;
  --color-darkgreen: #159435;
  --color-pink: #dc93b7;
  --color-darkpink: #b71f6b;
  --color-blue: #4e96ae;
  --color-darkblue: #04698b;
  --progress: 100%;
}

html, body {
  font-size: 20px;
  font-family: 'Didact Gothic', sans-serif;
  color: #302b26;
  background-color: #ebe7d0;
  margin-bottom: 2rem;
}

.container {
  margin: 0 auto;
  max-width: 750px;
  padding: 1rem;
}

.back {
  padding-top: 2rem;
  display: block;
}

.home {
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.home h1 {
  font-size: 3rem;
  margin: 2.5rem 0;
}

h1 {
  font-size: 3rem;
  margin: 2.5rem 0;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

p {
  font-size: 1.5rem;
  line-height: 135%;
}

a {
  color: var(--color-yellow);
  font-size: 1.5rem;
}

a:hover {
  color: var(--color-darkyellow);
}

.home a#link-4 {
  color: var(--color-yellow);
  font-size: 3rem;
}

.home a#link-4:hover {
  color: var(--color-darkyellow);
}

.home a#link-4.progress:hover::after {
  background: var(--color-darkyellow);
}

.home a#link-1 {
  color: var(--color-green);
  font-size: 3rem;
}

.home a#link-1:hover {
  color: var(--color-darkgreen);
  font-size: 3rem;
}

.home a#link-2 {
  color: var(--color-pink);
  font-size: 3rem;
}

.home a#link-2:hover {
  color: var(--color-darkpink);
  font-size: 3rem;
}

.home a#link-3 {
  color: var(--color-blue);
  font-size: 3rem;
}

.home a#link-3:hover {
  color: var(--color-darkblue);
  font-size: 3rem;
}

a#link-1 {
  color: var(--color-green);
}

a#link-1:hover {
  color: var(--color-darkgreen);
}

a#link-2 {
  color: var(--color-pink);
}

a#link-2:hover {
  color: var(--color-darkpink);
}

a#link-3 {
  color: var(--color-blue);
}

a#link-3:hover {
  color: var(--color-darkblue);
}

.progress {
  display: inline-block;
  text-decoration: none;
}

.progress::after {
  content: '';
  width: 0px;
  height: 6px;
  display: block;
  background: var(--color-yellow);
  width: var(--progress);
  transition: 300ms;
}

@media (max-width: 720px) {
  .container {
    margin-top: 0rem;
  }
  .back {
    padding-top: 0rem;
  }
}