/*

--- 01 Typography System

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights
Default: 1
Small: 1.05
Medium: 1.2
Paragraph: 1.6

- Line spacing
0.5px
0.75px

--- 02 Colors

- Primary: #2980b9
- Tints: #7fb3d5, #bfd9ea
- Shades: #1d5a82, #10334a
- Accents:
- Greys: #343a40
#888
#85898c
#777
#555
#333
#c2c4c6
#2a2e33
#1a1d20

--- 05 Shadows

0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

--- 06 Border Radius

Default: 9px, 11px

--- 07 Whitespace

- Spacing System (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
}

html {
  font-size: 62.5%;
  scroll-padding-top: 6.4rem;
}

body {
  height: 100vh;
  font-family: "Exo 2", sans-serif;
  line-height: 1.4;
  letter-spacing: 1.1px;
  overflow-y: scroll;
  overflow-x: hidden;

  background-color: #05061c;
  color: #999;
}

main {
  margin-bottom: auto;
}

/***************************************/
/* GENERAL REUSABLE COMPONENTS */
/***************************************/

.container {
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.grid {
  display: grid;
  row-gap: 2.4rem;
}

.grid-listen {
  display: grid;
  row-gap: 3.2rem;
  column-gap: 4.8rem;
}

.grid:not(:last-child) {
  margin-bottom: 8rem;
}

.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid--2-cols-div1 {
  grid-template-columns: 2fr 1fr;
}

.grid--2-cols-div2 {
  grid-template-columns: 1fr 2fr;
}

.grid--3-cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4-cols {
  grid-template-columns: repeat(4, 1fr);
}

.grid--5-cols {
  grid-template-columns: repeat(5, 1fr);
}

.grid--center-h {
  justify-content: center;
}

.grid--center-v {
  align-items: center;
}

*:focus {
  outline: none;
  /* outline: 4px dotted #e67e22; */
  /* outline-offset: 8px; */
  box-shadow: 0 0 0 0.8rem rgba(40, 126, 184, 0.5);
}

p {
  font-size: 1.6rem;
}

h2 {
  font-family: serif;
  color: #99d6ff90;
  text-align: center;
  font-size: 2rem;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 4.4rem;
  padding-left: 4.4rem;
  /* border-bottom: 1px solid #c2c4c633; */

  max-width: 100rem;
  margin: 0 auto;
  margin-bottom: 4.8rem;
}

h3 {
  color: #99d6ff85;
  font-size: 1.8rem;
  font-weight: normal;
  letter-spacing: 2px;
  margin-bottom: 3.2rem;
  text-align: center;
}

h4 {
  color: #99d6ff85;
  font-size: 1.6rem;
  font-weight: normal;
  letter-spacing: 2px;
}

h5 {
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #777;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

/* UTILITIES */

img {
  transition: 0.3s;
}

.credits-img:hover {
  transform: scale(1.1);
  transition: 0.3s;
  /* cursor: pointer; */
}

.width-sm {
  object-fit: fill;
}

.legend {
  display: inline-block;
  font-size: 1.6rem;
  margin-top: 1.2rem;
}

.zoom {
  transition: transform 0.3s;
}

.zoom:hover {
  transform: scale(1.1);
}

.option:hover {
  opacity: 0.65;
}