/* general setup */
body {
    font-family: Sora, Arial;
    font-size: 1.4rem;
    color: #eee;
}

.lg {
    font-size: 1.8rem;
}

#svelte {
    margin: 24px;
}

@media only screen and (max-width: 560px) {
    #svelte {
        margin: 12px;
    }
}

/* IBM likes to think they know best, but I don't want them messing with my font sizes thankyouverymuch */
a.bx--link {
    font-size: inherit;
}

/* Hero element */
.hero {
    background-color: #161616;
    margin-bottom: 36px;
    padding: 24px;
}

.hero h1 {
    font-size: 15vw;
}
.hero h2 {
    font-size: 4vw;
}

@media only screen and (max-width: 560px) {
    .hero h1 {
        font-size: 22vw;
    }
    .hero h2{
        font-size: 8vw;
    }
}

/* this one's to make sure the h2 never gets smaller than the p */
@media only screen and (max-width: 378px) {
    .hero h1 {
        font-size: 25vw;
    }
    .hero h2{
        font-size: 10vw;
    }
}