*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  font-size: 62.5%;
}

html,
body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: Lato, sans-serif;
  background: #f2693e;
  color: #0a0903;
}

h1,
h2,
h3 {
  font-family: "Abril Fatface", Times, serif;
  letter-spacing: 1px;
  margin: 1rem 0;
}

h1 {
  font-size: 6rem;
}

h2 {
  font-size: 4rem;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  padding: 2rem;
}

header p {
  text-transform: uppercase;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

a {
  color: #f4f1bb;
  text-decoration: none;
}

p {
  margin: 1rem 0;
}

ul,
ol,
li {
  margin: 0;
  padding: 0;
}

li {
  list-style-position: inside;
  margin-bottom: 1rem;
}

footer {
  display: flex;
  height: 20rem;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-family: "Lato", sans-serif;
  letter-spacing: 0.1rem;
}

.about {
  display: flex;
  font-size: 1.6rem;
  justify-content: center;
  background: #f3f3f3;
  padding: 6rem;
  margin: 3rem 0;
}

.about div {
  margin: 0 6rem;
}

.about img {
  margin: 2rem 0;
}

#big-o {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#big-o div {
  padding: 1rem;
}

section.legend {
  display: flex;
}

h3 {
  font-size: 2rem;
}

.data-operations,
.array-sorting {
  display: grid;
  grid-gap: 1rem;
  text-align: center;
  align-items: center;
  background: #e5ecf4;
  margin: 1rem;
  padding: 1rem;
}

.data-operations div,
.array-sorting div {
  align-items: center;
  display: flex;
  justify-content: center;
}

svg {
  margin-right: 0.5rem;
}

.data-operations {
  grid-template-columns: repeat(10, 1fr);
}

.data-operations h2 {
  grid-column: 1/11;
}

.array-sorting {
  grid-template-columns: repeat(5, 1fr);
}
.array-sorting h2 {
  grid-column: 1/6;
}

.operations-data-structure {
  grid-column: 1/2;
}

.operations-time-complexity {
  grid-column: 2/10;
  background: #f3f3f3;
  text-transform: uppercase;
}

.operations-space-complexity {
  grid-column: 10/11;
  background: #f3f3f3;
  text-transform: uppercase;
}

.operations-time-average {
  grid-column: 2/6;
  background: #f3f3f3;
}

.operations-time-worst {
  grid-column: 6/10;
  background: #f3f3f3;
}

.operations-space-worst {
  grid-column: 10/11;
  background: #f3f3f3;
}

.operations-worst {
  grid-column: 6/10;
}

.array-algorithms {
  grid-column: 1/2;
  background-color: #f3f3f3;
}

.array-time-complexity {
  grid-column: 2/5;
  background: #f3f3f3;
}

.array-space-complexity {
  grid-column: 5/6;
  background: #f3f3f3;
}

.array-time-best {
  grid-column: 2/3;
}

.array-time-average {
  grid-column: 3/4;
}

.array-time-worst {
  grid-column: 4/5;
}

.array-space-worst {
  grid-column: 5/6;
}

.excellent {
  background-color: #05ba14;
}

.good {
  background-color: #89d86e;
}

.fair {
  background-color: #ffc100;
}

.bad {
  background-color: #ff7c62;
}

.horrible {
  background-color: #ba2e12;
  color: #f3f3f3;
}

.na {
  background-color: #ccc;
}