/*TOKENS*/
/*gfonts*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400&display=swap');

.sans {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.mono {
  font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

/*color pallete*/
.preteco50 {
  color: hsl(72, 100%, 95% );
}
.preteco100 {
  color: hsl(72, 100%, 90% );
}
.preteco200 {
  color: hsl(72, 100%, 80% );
}
.preteco300 {
  color: hsl(72, 100%, 70% );
}
.preteco400 {
  color: hsl(72, 100%, 60% );
}
.preteco500 {
  color: hsl(72, 100%, 50% );
}
.preteco500_border{
  border-color: hsl(72, 100%, 50% )!important;
}
.preteco600 {
  color: hsl(72, 100%, 40% );
}
.preteco700 {
  color: hsl(72, 100%, 30% );
}
.preteco800 {
  color: hsl(72, 100%, 20% );
}
.preteco900 {
  color: hsl(72, 100%, 10% );
}
.preteco900_bg {
  background-color: hsl(72, 100%, 10% );
}
.preteco950 {
  color: hsl(72, 100%, 5% );
}
.preteco950_bg {
  background-color: hsl(72, 100%, 5%);
}

/*font settings*/
h1, h2,h3{font-weight: 800;}
h1{font-size: 5em; line-height: 100%;}
h2{font-size: 4em; line-height: 100%;}
h3{font-size: 3em; line-height: 100%;}
h4{font-size: 1.25em;}
h6{letter-spacing: .25em;font-size: .9em;}
a{text-decoration: none;}
h3.display{font-size: 8em;}
em{font-style: normal;}
p.lead{font-size: 1.5em;}
footer h4{font-size: 2em;}



/*button override*/
.btn-primary{
    background-color: hsl(72, 100%, 50% ); 
    color: hsl(72, 100%, 10% );
    border: 0;
    font-weight: 600;
    transition: all .5s ease-in-out;
}
.btn-primary:hover{
    background-color: hsl(72, 100%, 20% ); 
    color: hsl(72, 100%, 50% );
}

.btn-lg {
    padding: .75em 1.5em!important;
    border-radius: .75em;
    font-size: 1.5em;
}

/*border*/
.border_dashed{border-style: dashed!important;}

/*sections*/
html,body{overflow-x: hidden!important;}
.brain img{
    width: 150vw;
    right: -70vw;
    top: 0;
    margin: auto;
    bottom: 0;
}

.modal iframe{ min-width: 100%!important; min-height: 60vh;}
.modal.fade.show{ height: 100vh!important; display: flex!important; align-items: center!important;justify-content: center;}
.modal-dialog{min-width: 40vw!important;}
.modal-header{ border: none!important;}

@media (max-width:900px){
    h1{font-size: 2.75em;}
    h2{font-size:2em;}
    h3.display { font-size: 5em;}
    p.lead { font-size: 1.25em; }   
    .hero .cta p{ text-align: center; margin:1em auto!important;}
    .hero .row{display: flex;}
    .hero .row div:first-child{order: 2;}
    .hero .row div:last-child{order: 1;}
    .brain img { width: 201vw; top:10vh;}
    footer{justify-content:center; text-align: center; padding: 0 2em;}
    footer ul.list-unstyled, footer .brand{justify-content: center!important;}
    footer ul li a{ width: 2.5em; height: 2.5em; display: flex; justify-content: center;}
    footer .row {display: flex;}
    footer .row:first-child div:last-child{order:1; margin-bottom: 1em;}
    footer  .row:first-child div:first-child{order:2; }
    footer h4 { font-size: 1.25em;}
    .how div.col-lg-4{ margin-bottom:2em;}
    .how h3{margin-bottom: .25em!important; font-size: 1.75em;}
    .failure figure{margin-top: 2em!important;}
    .btn-lg{font-size: 1.25em;}
    .cta{ justify-content: center; display: flex; flex-direction: column; gap:.5em!important;}
    .cta a{ align-self:center;}
}