:root {
  /*colors*/
  --gray: #b6b5b2;
  --background-color: #484846;
  --light-text-color-1: #f5f5f5;
  --light-text-color-2: #e0e0e0;
  --light-text-color-3: #39e7fe71;
  --dark-text-color-1: #00000033;
  --dark-text-color-2: #00000011;
  --dark-text-color-3: #000000;
  /*sizes*/
  --mobile-h1: 3.2rem;
  --mobile-h2: 2.4rem;
  --mobile-h3: 2rem;
  --mobile-h4: 1.8rem;
  --mobile-p: 2rem;
  --desktop-h1: 2.6rem;
  --desktop-h2: 3.6rem;
  --desktop-h3: 3.2rem;
  --desktop-h4: 2.4rem;
  --desktop-p: 1.8rem;
}

html {
  font-size: 62.5%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  font-family: "Montserrat";
  border-spacing: 0;
  outline-width: 0;
}

html,
body {
  height: 100%;
  color: white;
}

body {
  padding: 0;
  margin: 0;
  background: var(--background-color);
}

.hidden {
  display: none;
}

/* sizes */
.small {
  width: 2.2rem;
  height: 2.2rem;
}

/* margins */

.ml-1 {
  margin-left: 1rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-3 {
  margin-bottom: 3rem;
}

.self-center {
  align-self: center;
}

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

h1,
h2,
h3,
h4,
p,
em,
a,
span,
ul,
a {font-weight: 400;
  margin: 0;
}

em {
  font-size: smaller;
}

.full-width {
  display: flex;
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 4rem;
  /* overflow-x: scroll; */
}

.white {
  color: white !important;
}

/* common controls */
.dark-button {
  font-size: 1.4rem;
  padding: 10px 20px;
  border: white 1px solid;
  border-radius: 5px;
  background-color: #000;
  color: white;
  text-align: center;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  text-decoration: none;
}


.sections-wrapper {
  max-width: 1000px;
  margin: 0rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow-x: auto;
}


.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}



.full-width {
  padding-top: 8rem;
  padding-bottom: 8rem;
}


.full-width:nth-child(2) {
  background-color: #abd1d0;
}

.full-width:nth-child(3) {
  padding-top: 8rem;
  padding-bottom: 4rem;
  background-color: #484846;
}

.full-width:nth-child(4) {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #484846;
}

.full-width:nth-child(5) {
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: #d9d7d2;
}

.full-width:nth-child(6) {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.sections-wrapper h1 {
  color: #02040f;
  font-size: 2.7rem;
  justify-self: center;
  margin: 1.6rem;
}

.sections-wrapper h2 {
  color: black;
  font-size: 1.5em;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.sections-wrapper h3 {
  color: #3a536e;
  font-size: 1rem;
}

.sections-wrapper p {
  color: #02040f;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.full-width {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

@media screen and (min-width: 600px) {
  .full-width {
    padding-top: 15rem;
    padding-bottom: 15rem;
  }
}

.mobile {
  display: initial;
}

.desktop {
  display: none;
}

@media screen and (min-width: 600px) {
  .mobile {
    display: none;
  }

  .desktop {
    display: initial;
  }
}

.scroll-x {
  overflow-x: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.flex-column {
  flex-direction: column;
}