@font-face {
  font-family: "ShareTechMono";
  src: url("../fonts/ShareTechMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* Reset and Common Styles */
* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
  font-family: "ShareTechMono", sans-serif;
  font-weight: 400;
}

html,
body {
  overflow-x: hidden;
}

html {
  font-size: 62.5%;
}
/* End of Reset and Common Styles */

body {
  background-color: #121212;
  font-size: 2rem;
}

a {
  all: unset;
  cursor: pointer;
}

.main-container {
  width: 92%;
  max-width: 1100px;
  margin: 0 auto;
  color: #fafafa;
  line-height: clamp(3rem, 6vw, 6rem);
}

.pistaccio {
  color: #9cd08f;
}

.bold {
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

.logo {
  display: flex;
  justify-content: center;
  padding-top: clamp(3rem, 6vw, 6rem);
}

.logo img {
  max-width: clamp(60px, 8vw, 100px);
  height: auto;
}

.p1 {
  margin-top: clamp(3rem, 6vw, 6rem);
  font-size: clamp(2.8rem, 6vw, 6rem);
  line-height: clamp(3.6rem, 8vw, 8rem);
}

.p2 {
  margin-top: clamp(1rem, 3vw, 3rem);
  font-size: clamp(1.8rem, 4vw, 4rem);
}

.p3 {
  margin-top: clamp(5rem, 8vw, 11rem);
  font-size: clamp(1.6rem, 3vw, 3.2rem);
}

.p4 {
  margin-top: clamp(1.5rem, 4vw, 4rem);
  font-size: clamp(1.8rem, 3.5vw, 3.7rem);
  width: 100%;
}

.p5 {
  margin-top: clamp(1.5rem, 4vw, 4rem);
  font-size: clamp(1.8rem, 3.5vw, 3.5rem);
  width: 90%;
}

.p6 {
  margin-top: clamp(1.5rem, 4vw, 4rem);
  font-size: clamp(1.6rem, 3.5vw, 3.3rem);
  width: 80%;
}

.p7 {
  margin-top: clamp(1.5rem, 4vw, 4rem);
  font-size: clamp(1.6rem, 3vw, 3.1rem);
  width: 70%;
  /* display: none; */
}

.p8 {
  margin-top: clamp(4rem, 10vw, 12rem);
  font-size: clamp(2rem, 4.5vw, 3.8rem);
}

.p9 {
  margin-top: clamp(2rem, 5vw, 5rem);
  font-size: clamp(1.8rem, 4vw, 3.5rem);
}

.p10 {
  margin-top: clamp(6rem, 12vw, 15rem);
  font-size: clamp(1.6rem, 3.5vw, 3.2rem);
}

.p11 {
  margin-top: clamp(2rem, 5vw, 6rem);
  font-size: clamp(1.6rem, 3.5vw, 3.2rem);
}

.separator {
    display: inline;
}

.p12 {
  margin-top: clamp(2rem, 6vw, 5rem);
  font-size: clamp(2rem, 5vw, 4rem);
  text-align: center;
}

.p13 {
  margin-top: clamp(8rem, 10vw, 20rem);
  margin-bottom: clamp(2rem, 5vw, 5rem);
  font-size: clamp(1.5rem, 4vw, 2.7rem);
  text-align: center;
}

.p13 svg {
    width: clamp(0.8rem, 3vw, 2rem);
    height: clamp(0.8rem, 3vw, 2rem);
}

@media (max-width: 1200px) {
  .p4, .p5, .p6, .p7 {
    width: 100%;
  }

  .p12 {
    line-height: clamp(1.8rem, 4vw, 3.8rem);
  }

  .separator {
    display: block;
    font-size: 0;
  }
}