* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: HZK-12px;
    src: url("../fonts/hzk-pixel-12px.otf.woff2");
}

@font-face {
    font-family: HZK-16px;
    src: url("../fonts/hzk-pixel-16px.otf.woff2");
}

body {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 64px 192px;
}

@media screen and (max-width: 1006px) {
    body {
        width: 750px;
        padding-left: 64px;
        padding-right: 64px;
    }
}

@media screen and (max-width: 750px) {
    body {
        width: 100%;
        padding-left: 64px;
        padding-right: 64px;
    }
}

.font-12px {
    font-family: HZK-12px, serif;
    letter-spacing: 1px;

    .title {
        margin-top: 24px;
        margin-bottom: 12px;
        font-size: 36px;
        font-weight: normal;
        line-height: 48px;
    }

    .content {
        margin-top: 12px;
        margin-bottom: 12px;
        font-size: 24px;
        line-height: 36px;
    }
}

.font-16px {
    font-family: HZK-16px, serif;
    letter-spacing: 1px;

    .title {
        margin-top: 32px;
        margin-bottom: 16px;
        font-size: 48px;
        font-weight: normal;
        line-height: 64px;
    }

    .content {
        margin-top: 16px;
        margin-bottom: 16px;
        font-size: 32px;
        line-height: 48px;
    }
}