@font-face {
    font-family: "hyper-reg";
    font-weight: normal;
    font-style: normal;
    src: url("Atkinson-Hyperlegible-Regular-102a.woff2");
    font-display: block;
}

@font-face {
    font-family: "hyper-bold";
    font-weight: normal;
    font-style: italic;
    src: url("Atkinson-Hyperlegible-Bold-102a.woff2");
    font-display: block;
}

@font-face {
    font-family: "hyper-italic";
    font-weight: normal;
    font-style: italic;
    src: url("Atkinson-Hyperlegible-Italic-102a.woff2");
    font-display: block;
}

@font-face {
    font-family: "hyper-bold-italic";
    font-weight: normal;
    font-style: italic;
    src: url("Atkinson-Hyperlegible-BoldItalic-102a.woff2");
    font-display: block;
}

:root {
    --heading-font: 'hyper-bold', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --content-font: 'hyper-reg', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.section {
    margin-bottom: 4rem;
}

.hero-heading {
    margin-top: 2rem;
    color: #333;
}

.hero-heading a {
    color: #333;
}

img.app-icon {
    width: 5rem;
    height: 5rem;
    margin-right: 1rem;
    border-radius: 0.4rem;
}

img.app {
    display: block;
    border: 0.2rem solid #111;
    border-radius: 2rem;
    margin: 0 auto;
}

a.app {
    color: #eee;
}

a:hover.app {
    color: #fff;
}

a.app-name {
    color: #eee;
    text-decoration: none;
}

.privacy h3 {
    font-family: var(--content-font);
    font-size: 2.0rem;
}