@import url('header.css');
@import url('footer.css');

:root {
  --title-font: 'Permanent Marker';
  --body-font: 'Open Sans Condensed';
  --black: #000000;
  --white: #ffffff;
  --title-size: 2.5em;
  --body-size: 1.2em;
  --button-size: 1.7em;
  --container-width: 80%;
  --margin-left: 140px;
}

body {
  background-color: var(--black);
  overflow-x: hidden;
}

.main-content section.legal-content {
  width: var(--container-width);
  /* margin: 50px auto; */
}

.main-content section.legal-content h1 {
  font-family: var(--title-font);
  font-size: var(--title-size);
  color: var(--white);
  margin-bottom: 40px;
  text-align: center;
}

.main-content .legal-text {
  font-family: var(--body-font);
  font-size: var(--body-size);
  line-height: 1.6;
}

.main-content .legal-text h2 {
  font-family: var(--title-font);
  font-size: 1.8em;
  color: var(--white);
  margin-top: 30px;
  margin-bottom: 10px;
}

.main-content .legal-text p {
  margin-bottom: 20px;
  color: var(--white);
}

/* Universal spacing between main sections */
.main-content > section {
  margin-bottom: 60px;
  padding-top: 40px;
  padding-bottom: 40px;
}

@media screen and (max-width: 767px) {
  .main-content section.legal-content {
    width: 90%;
    /* margin: 30px auto; */
  }
  .main-content section.legal-content h1 {
    font-size: 2em;
    margin-bottom: 30px;
  }
  .main-content .legal-text h2 {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 480px) {
  .main-content section.legal-content {
    width: 95%;
    /* margin: 20px auto; */
  }
  .main-content section.legal-content h1 {
    font-size: 1.8em;
    margin-bottom: 20px;
  }
  .main-content .legal-text h2 {
    font-size: 1.3em;
  }
}