html {
    font-synthesis: none;
}

@font-face {font-family: 'YZE'; src: url('../assets/fonts/YZE.ttf') format('truetype'); font-weight: normal; font-style: normal; }
h1, h2, h3, h4, h5, p, a, button {
    font-family: 'YZE', sans-serif; color: var(--text);
    font-weight: 400; font-style: normal; line-height: normal;
    font-variant-ligatures: common-ligatures contextual; font-feature-settings: "calt" on, "liga" on, "dlig" on;
    -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none;
}
strong {color: var(--black);}

a, a h1, a h2, a h3, a h4, a h5, a p {color: var(--blue);}

.black div, .black h1, .black h2, .black h3, .black h4, .black h5, .black p {color: var(--text);}
.black strong {color: var(--white);}

.nav a {color: var(--text); text-decoration: none;}

h1 {font-size: 116px;}
h2 {font-size: 72px;}
h3 {font-size: 45px;}
h4 {font-size: 28px;}
h5 {font-size: 19px;}
p {font-size: 16px;}
p.caption, button {font-size: 12px;}

button {
    outline: none; border: none;
    background-color: var(--blue);
    border-radius: calc(var(--spacing) / 4);
    padding-left: calc(var(--spacing) / 2); padding-right: calc(var(--spacing) / 2);
    padding-top: calc(var(--spacing) / 8); padding-bottom: calc(var(--spacing) / 8);
    color: var(--white);
    /* font-family: 'YZE', sans-serif;
    font-size: 16px; */
    line-height: normal;
}

button.right {display: block; margin-left: auto; margin-right: 0;}

.tag {
    background-color: var(--text);
}

a:hover {
    text-decoration: underline;
}


.right {text-align: right; display: flex; justify-content: flex-end;}
.center h1, .center h2, .center h3, .center h4, .center h5, .center p {text-align: center;}