html {
    font-size: 16px;
}

body {
    font-size: 100%;
    padding-left: 3%;
    padding-right: 3%;
}

nav {
    display: flex;
    gap: 1em;
    margin-bottom: 1em;
}

p {
    max-width: 60rem;
    line-height: 1.7;
}

img {
    max-width: 100%;
    height: auto;
}

dt {
    margin: 0 0 .5em 0;

    &::before {
        content: "\1f81e";
    }
}

dd {
    margin: 0 0 1em 0;

    &::before {
        content: "\275d";
    }

    &::after {
        content: "\275e";
    }
}

@media(min-width:48rem) {
    body {
        font-size: 120%;
    }
}

@media(min-width:65rem) {
    body {
        font-size: 140%;
    }
}

@media(min-width:80rem) {
    body {
        font-size: 160%;
    }
}

@media(min-width:110rem) {
    body {
        font-size: 180%;
    }
}

@media(min-width:140rem) {
    body {
        font-size: 210%;
    }
}