/* Constants */

:root {
  --color-brown: #915f2d;
  --color-dark-brown: #6A4115;
  --color-blue: #515170;
  --color-light-gray: #EEEEEE;
  --color-dark-gray: #666666;

  --size-bee: 0.2rem;
  --size-mouse: 0.5rem;
  --size-cat: 0.75rem;
  --size-dog: 1rem;
  --size-lion: 1.25rem;
  --size-bear: 1.5rem;
  --size-horse: 2rem;
  --size-camel: 2.625rem;
  --size-rhino: 3.375rem;
  --size-elephant: 4.25rem;
  --size-mammoth: 5.25rem;
}

/* Animation */

@keyframes appear {
  0.0% {
    transform: translateX(var(--size-cat));
    opacity: 0;
  }
  100.0% {
    transform: translateX(0);
  }
}

/* Media */

@media screen and (max-width: 500px) {
  html { font-size: 15px; }
}

@media screen and (min-width: 500px) and (max-width: 900px) {
  html { font-size: 16px; }
}

@media screen and (min-width: 900px) {
  html { font-size: 17px; }
}

/* Body */

body {
  margin: 0;
  line-height: var(--size-bear);
}

/* Header */

header {
  display: flex;
  background-color: var(--color-brown);
  margin-bottom: var(--size-camel);
}

header > a {
  display: flex;
  font-size: var(--size-bear);
  font-weight: bold;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0;
  height: var(--size-rhino);
  text-decoration: none;
  padding: 0;
  text-align: center;
  color: #ffffff;
}

header > a:hover,
header > a:focus,
header > a.current {
  border-bottom: var(--color-dark-brown) solid var(--size-mouse);
}

/* Sections */

ol.sections {
  animation-name: appear;
  animation-duration: 0.2s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  width: 80%;
  margin: 0 auto;
  list-style-type: none;
  padding-left: 0;
}

ol.sections > li {
  margin-bottom: var(--size-camel);
}

/* Sub-sections */

ol.sub-sections {
  list-style-type: none;
  padding-left: 0;
}

ol.sub-sections > li {
  margin-bottom: var(--size-lion);
}

/* Images */

img:not(.icon) {
  border: solid 1px var(--color-dark-gray);
  border-radius: var(--size-mouse);
  margin-bottom: var(--size-dog);
  width: 100%;
  max-width: 800px;
}

img.icon {
  margin-right: var(--size-cat);
}

/* Paragraphs */

p {
  margin-bottom: var(--size-bear);
}

/* Title */

h1 {
  color: var(--color-brown);
  font-size: var(--size-horse);
  font-weight: lighter;
  border-bottom: var(--size-bee) solid var(--color-brown);
  margin-bottom: var(--size-horse);
  padding-bottom: var(--size-mouse);
}

h2 {
  font-size: var(--size-dog);
  margin-top: 0;
  margin-bottom: var(--size-lion);
  font-weight: normal;
  text-decoration: underline;
  color: var(--color-brown);
}

/* Lists */

ul {
  list-style-type: none;
  padding-left: 0;
}

ul.bullets {
  margin-bottom: var(--size-dog);
}

ul.bullets > li::before {
  content: "•";
  color: var(--color-brown);
  display: inline-block;
  margin-right: var(--size-mouse);
}

ul.bullets > li {
  padding: var(--size-bee) 0;
}

ul.technos {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--size-dog);
  padding-left: 0;
}

ul.technos > li {
  margin-right: var(--size-dog);
  margin-bottom: var(--size-mouse);
  background-color: var(--color-light-gray);
  border-radius: var(--size-bee);
  padding: 0 var(--size-mouse);
  font-size: 80%;
}

ul.links {
  margin-bottom: var(--size-lion);
}

ul.links > li {
  display: flex;
  align-items: center;
  margin-bottom: var(--size-cat);
}

ul.links a {
  text-decoration: none;
  color: var(--color-blue);
  transition: color 0.3s ease-out 0.0s;
  align-items: center;
}

ul.links a:focus {
  outline: solid 0 #ffffff;
}

ul.links a:hover,
ul.links a:focus {
  text-decoration: underline;
}

ul.links svg {
  margin-right: var(--size-dog);
  height: var(--size-lion);
}