:root {
  --primary: #ba9314;
  --black: #1b2324;
  --white: #f6f6f6;
}

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */

  font-family: commuters-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-weight: 300;
  font-style: normal;
  font-size: 10px;
  color: var(--white);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}

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

body {
  background-color: var(--black);
  background-image: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(27, 35, 36, 0) 15%,
    rgba(27, 35, 36, 0) 50%,
    rgba(14, 18, 18, 0) 85%,
    rgba(0, 0, 0, 0.7) 100%
  );
  height: 100%;
  background-repeat: no-repeat;
  font-size: 30px;
  margin: 0;
}

*/ h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 5px 0;
}

p {
  color: var(--white);
  font-family: commuters-sans, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 0.6em;
  line-height: 1.7;
}

.fine-print {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.4em;
  text-align: left;
  padding-top: 25px;
}


h2 {
  color: var(--primary);
  font-family: utopia-std-caption, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 3em;
  line-height: 1.5;
}

h3 {
  color: rgba(255, 255, 255, 0.35);
  font-family: commuters-sans, sans-serif;
  text-transform: uppercase;
  font-size: 0.45em;
  line-height: 2.5;
  letter-spacing: 0.3em;
}

h4 {
  color: var(--primary);
  font-family: utopia-std-caption, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.7em;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: rgba(255, 255, 255, 0.35);
  cursor: alias;
}

main {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  background-image: url('./images/pattern1.png');
  background-repeat: no-repeat;
  background-position: top right;
  /* background-size: 50%; */
}

/* logo header section */
.header {
  margin-top: 200px;
  padding-left: 150px;
}

.logo {
  width: 500px;
}

/* content section 1 */
.section-1 {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.section-1-title {
  margin-top: 200px;
  padding-left: 150px;
  width: 70%;
}

.section-1-content {
  padding-left: 500px;
  padding-right: 150px;
}

/* infograph content section 2 */
.section-2 {
  background: linear-gradient(to left, #0d0d0d4d 85%, #ffffff00 50%);
  padding-bottom: 100px;
  margin: 200px 0;
  padding-left: 150px;
}

.section-2 h2 {
  padding-right: 50px;
}

.infograph-area {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 200px;
}

.pie-chart {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.pie-chart-img {
  /* width: 500px; */
}

.legend {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  margin-left: 75px;
  justify-content: center;
  padding-right: 25px;
}

.legend-halfcircle {
  width: 30px;
  margin-right: 20px;
}

/* content section 3 */
.section-3 {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.section-3-title {
  width: 70%;
  padding-left: 150px;
}

.section-3-content {
  padding-left: 500px;
  padding-right: 150px;
}

/* CTA content */

.section-4 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 200px;
  /* padding-left: 50px; */
  background-image: url('./images/pattern1.png');
  background-repeat: no-repeat;
  background-position: top right;
  /* background-size: 50%; */
}

.section-4-content {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  padding-top: 300px;
  padding-left: 50px;
  padding-right: 50px;
}

.span {
  color: var(--white);
  font-family: commuters-sans, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.5em;
  line-height: 1.7;
  padding-left: 40px;
  letter-spacing: 3px;
}

/* Breakpoints */

@media (max-width: 1420px) {
  main {
    background-size: 50%;
  }
  .section-1-title {
    width: 80%;
  }

  .section-1-content {
    padding-left: 300px;
    padding-right: 150px;
  }

  .section-3-title {
    width: 90%;
  }

  .section-3-content {
    padding-left: 300px;
    padding-right: 150px;
  }

  /* background image for CTA */
  .section-4 {
    background-size: 50%;
  }
}

@media (max-width: 1200px) {
  .infograph-area {
    padding-left: 50px;
  }
  .section-2 {
    /* makes the background color go full bleed both sides */
    background: linear-gradient(to left, #0d0d0d4d 100%, #ffffff00 50%);
    padding-bottom: 100px;
    margin: 200px 0;
  }
}

@media (max-width: 1000px) {
  main {
    background-size: 60%;
  }

  .header {
    margin-top: 300px;
    padding-left: 150px;
  }

  .logo {
    width: 400px;
  }

  .section-2 {
    padding-bottom: 50px;
  }

  .section-3-title {
    width: 100%;
    padding-left: 100px;
  }
  /* background image for CTA */
  .section-4 {
    background-size: 70%;
  }
}

@media (max-width: 800px) {
  .header {
    padding-left: 100px;
  }

  .section-1-title {
    margin-top: 150px;
    padding-left: 100px;
  }

  .section-1-content {
    padding-left: 100px;
    padding-right: 100px;
  }

  .infograph-area {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    padding-left: 0px;
  }

  .section-2 {
    padding-left: 100px;
    padding-right: 100px;
  }

  .pie-chart {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
  }

  .legend {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    margin-left: 0px;
    margin-top: 50px;
  }

  .section-3-title {
    width: 100%;
    padding-left: 100px;
  }

  .section-3-content {
    padding-left: 100px;
    padding-right: 100px;
  }
  .span {
    padding-left: 0px;
  }
}

@media (max-width: 600px) {
  .header {
    padding-left: 50px;
    padding-right: 50px;
  }
  .logo {
    width: 100%;
  }

  h2 {
    font-size: 2em;
  }

  h4 {
    font-size: 1.3em;
  }

  .span {
    font-size: 0.5em;
  }
  .section-2 {
    margin-bottom: 75px;
    padding-left: 50px;
    padding-right: 50px;
  }
  .section-1-title {
    padding-left: 50px;
  }

  .section-1-content {
    padding-left: 50px;
    padding-right: 50px;
  }
  .section-3-title {
    padding-left: 50px;
  }
  .section-3-content {
    padding-left: 50px;
    padding-right: 50px;
  }

  .section-4 {
    margin-top: 100px;
  }
}