:root {
  --color-bg: #c0c0c0;
  --color-section-1: #fff;
  --color-section-2: #ff3d01;
  --color-section-3: #5922cc;
  --color-section-4: #000;
  --color-section-5: #2935f8;
  --color-section-6: #ff113d;
  --color-section-7: #fffc03;
  --color-section-8: #0afc04;
}

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

html,
body {
  width: 100%;
  height: 100%;
  font-family: "PP Supply Sans", sans-serif;
  background: var(--color-bg);
}

.container {
  width: 100%;
  height: 100%;
}

.map {
  position: fixed;
  width: 20%;
  margin: 50px 0;
  padding: 0 20px;
}

.sections {
  position: absolute;
  width: 80%;
  height: 100%;
  left: 20%;
  padding: 30px 20px 0px 0px;
}

.map > div {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 20px;
  border: 1.5px solid #000;
  border-radius: 20px;
  transition: height 0.5s;
}

.sections > div {
  width: 100%;
  margin: 20px 0 80px 0;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 10px 25px;
  border: 1.5px solid #000;
  border-radius: 40px;
  font-size: 14px;
}

.map > div p:nth-child(1) {
  font-size: 13px;
}

.map > div p:nth-child(2) {
  font-size: 20px;
}

.copy {
  width: 100%;
  height: 100%;
  padding: 20px;
  border: 1.5px solid #000;
  border-radius: 20px;
}

.copy h1 {
  font-weight: 300;
  font-size: 60px;
}

.section-1 {
  height: 500px;
}

.section-2 {
  height: 800px;
}

.section-3 {
  height: 600px;
}

.section-4 {
  height: 900px;
}

.section-5 {
  height: 800px;
}

.section-6 {
  height: 400px;
}

.section-7 {
  height: 600px;
}

.section-8 {
  height: 800px;
}

.whitespace {
  width: 100%;
  height: 100px;
  border: none !important;
}

.s-1,
.section-1 .header,
.section-1 .copy {
  background: var(--color-section-1);
}

.s-2,
.section-2 .header,
.section-2 .copy {
  background: var(--color-section-2);
  color: #fff;
}

.s-3,
.section-3 .header,
.section-3 .copy {
  background: var(--color-section-3);
  color: #fff;
}

.s-4,
.section-4 .header,
.section-4 .copy {
  background: var(--color-section-4);
  color: #fff;
}

.s-5,
.section-5 .header,
.section-5 .copy {
  background: var(--color-section-5);
  color: #fff;
}

.s-6,
.section-6 .header,
.section-6 .copy {
  background: var(--color-section-6);
  color: #fff;
}

.s-7,
.section-7 .header,
.section-7 .copy {
  background: var(--color-section-7);
}

.s-8,
.section-8 .header,
.section-8 .copy {
  background: var(--color-section-8);
}