@import url("https://fonts.googleapis.com/css?family=Lato:400,700");

 html {
     background: black;
     font-size: 17px;
     -webkit-font-smoothing: antialiased;
 }

 body {
     margin: 75px auto 30px auto;
     padding: 0 20px;
     max-width: 1100px;
     font-family: -apple-system, "Lato", sans-serif;
     color: #C3C3C3;
 }

 header {
     display: flex;
     align-items: center;
     gap: 10vw;
 }

 header .button {
     margin-top: 30px;
 }

 .header-icon {
     height: 45px;
     margin-bottom: 20px;
 }

 .showcase {
     margin: 120px 0;
     display: flex;
     justify-content: space-between;
     text-align: center;
     align-items: stretch;
     row-gap: 50px;
     column-gap: 15px;
     justify-content: space-evenly;
 }

 .showcase img {
     height: 18px;
     margin-bottom: 10px;
 }

 section {
     margin: 80px 0;
 }

 .button {
     line-height: 1;
     display: inline-block;
     color: white;
     padding: 13px 30px;
     font-weight: 600;
     text-decoration: none;
     background: #3952FF;
     border-radius: 32px;
 }

 .button::after {
     content: "";
     background: url("/public/arrowright.svg") no-repeat center center;
     background-size: contain;
     display: inline-block;
     width: 16px;
     height: 16px;
     vertical-align: middle;
     margin-left: 10px;
     transition: transform 0.3s ease;
 }

 .button:hover::after {
     transform: translateX(5px);
 }

 .step {
     margin-left: 50px;
 }

 .step .number {
     line-height: 1;
     display: inline-block;
     background-color: #3952FF;
     width: 35px;
     height: 35px;
     border-radius: 17px;
     text-align: center;
     padding-top: 8px;
     box-sizing: border-box;
     margin-right: 15px;
     margin-left: -50px;
     font-weight: 0.3em;
 }

 .step .number.optional {
     background-color: black;
     border: #3952FF 1px solid;
     padding-top: 6px;
 }

 h1 {
     font-size: 35px;
     color: #FFFFFF;
 }

 h2 {
     font-size: 20px;
     color: white;
     margin: 50px 0 10px 0;
 }

 p {
     font-size: inherit;
 }

 p {
     margin: 0;
     line-height: 1.8;
 }

 p+p {
     margin: 20px 0;
 }

 a {
     color: inherit;
     text-decoration-color: #2FA382;
 }

 ul {
     list-style: none;
     padding: 0 0 0 20px;
 }

 li {
     line-height: 1.4;
 }

 li+li {
     margin-top: 15px;
 }

 code {
     color: #2FA382;
     font-weight: 600;
     font-family: inherit;
 }

 .block {
     background-color: rgba(0, 0, 0, 0.03);
     padding: 20px;
     border-radius: 8px;
     margin-top: 50px;
 }

 .block h3 {
     margin-top: 0;
 }

 .codeblock {
     display: block;
     overflow: scroll;
     margin: 10px 0 20px 0;
 }

 footer {
     text-align: center;
     margin-top: 30px;
     font-size: 0.8em;
     opacity: 0.35;
 }

 footer img {
     display: block;
     margin: 0 auto;
     margin-bottom: 5px;
     height: 18px;
 }

 footer a {
     color: inherit;
 }

 @media screen and (max-width: 800px) {
     .header-image {
         display: none;
     }

     .showcase {
         flex-wrap: wrap;
     }
 }