html{box-sizing:border-box}
*,*::after,*::before{box-sizing:inherit}

html,body{
    font-family: "Bitter",serif;
    margin:0;padding:0
}

#section-intro{
    padding:2em 1em 4em 1em;
    font-size:1.2em;
    text-align:left
}

.section-inner{
    width:100%;
    max-width:800px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    padding:0
}


@media screen and (min-width: 768px){
    #section-intro{padding:4em 2em}
}

@media screen and (min-width: 992px){
    #section-intro{padding:3em 2em 6em 2em}
}

@media screen and (min-width: 1200px){
    #section-intro{padding:3em 2em 6em 2em}
}

@media screen and (min-width: 768px){
    #section-intro{font-size:1.5em}
} 


a{
    color:darkblue;
}
a:hover{
    text-decoration-line: underline;
    text-decoration-style: wavy;
}
h1{
    /* font-size: ; */
    margin:0;padding:0;
    font-weight: 900;
    font-size: 2.5em;
}
h1 .sup-text{
    font-size: 0.618em;
    margin:0;padding:0;
    font-weight: 200;
    display:block;
}
h2{
    margin:0;padding:0;
    font-weight: 300;
}

p{
    margin:0.8em 0;
    font-weight: 400;
}
strong{
    letter-spacing: .04em;
    white-space: nowrap;
}
.eyes-to-see-and-ears-to-hear:link,
.eyes-to-see-and-ears-to-hear:hover,
.eyes-to-see-and-ears-to-hear:active,
.eyes-to-see-and-ears-to-hear:visited
{
    color:inherit;
    text-decoration:inherit;
}