/* Import CSS Reset */
@import url("./reset.css");

/* Variables */

/* TT Norms Pro Font Family */

/* TT Norms Pro Variable */
@font-face {
    font-family: "TT Norms Pro";
    src: url("/fonts/TTNormsProVariable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* TT Norms Pro Mono Variable */
@font-face {
    font-family: "TT Norms Pro Mono";
    src: url("/fonts/TTNormsProMonoVariable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.italic {
    /* font-style: italic; */
    font-variation-settings: "slnt" 15;
    font-weight: 450;
}

.mono {
    font-family: "TT Norms Pro Mono", "Courier New", monospace;
}

.normal {
    font-family: "TT Norms Pro", system-ui, -apple-system, sans-serif;
}

:root {
    font-size: 1vw;
}

/* Global styles */
body {
    font-family: "TT Norms Pro", system-ui, -apple-system, sans-serif;
    /* safari bug fix */
    font-variation-settings: "slnt" 0;
    color: #fff;
    background-color: #000;
}

h1 {
    font-family: "TT Norms Pro Mono", "Courier New", monospace;
    font-weight: 400;
    font-size: 8rem;
    line-height: 1;
}

h2 {
    font-family: "TT Norms Pro Mono", "Courier New", monospace;
    font-weight: 450;
    font-size: 2.5rem;
    line-height: 1.2;
}

p {
    font-family: "TT Norms Pro", system-ui, -apple-system, sans-serif;
    font-weight: 450;
    font-size: 1.5rem;
    line-height: 1.2;
}

@media (max-width: 768px) {
    h1 {
        font-size: 50px;
    }

    h2 {
        font-size: 20px;
    }
    p {
        font-size: 14px;
    }
}

code,
pre {
    font-family: "TT Norms Pro Mono", "Courier New", monospace;
}

/* Layout */

.half-width {
    width: 50%;
}

/* use strong for semi titles */
strong {
    display: inline-block;
    font-weight: 450;
    margin-bottom: 5px;
}

ol {
    list-style-type: decimal;
    padding-left: 20px;
}

ol li {
    margin-bottom: 10px;
    padding-left: 5px;
}

ol li:last-child {
    margin-bottom: 0;
}