@font-face {
    font-family: 'MyMono';
    src: url(fonts/LiberationMono-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'FT88-Gothique';
    src: url(fonts/FT88-Gothique.ttf) format('truetype');
}
:root {
    --background-color: #ffffff;
    --background-img: url("images/wood-door.jpg");
    --font-color: #242424;
    --accent-font-color: blue;
    --mono-font-family: 'MyMono', monospace;
    --serif-font-family: 'Times New Roman', Times, serif;
    --sans-serif-font-family: Arial, Helvetica, sans-serif;
    --header-font-family: 'FT88-Gothique', 'Courier', monospace;
}

html {
    width: 700px;
    display: block;
    margin: auto;
    background-image: var(--background-img);
    background-size:cover;
    background-position: center;
    background-attachment: fixed;
}

@media only screen and (max-width: 700px) {
    html {
        width: unset;
    }
}

body {
    font-family: var(--serif-font-family);
    background-color: var(--background-color);
    padding: 2em;
    color: var(--font-color);
}

a {
    color: var(--accent-font-color);
    text-decoration: none;
    border-bottom: thin solid var(--accent-font-color);

    /* Safe guard against long links.. */
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

h1, h2{
    font-family: var(--header-font-family);
}

h1 {
    font-size: 2.4rem;
}

h2 {
    font-size: 1.2em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.3em;
}

/* header */
header {
    padding-top: 1em;
}

/* text header */
.title a, .sub-title a {
    border: unset;
    color: var(--font-color);
}

/* ASCII header */
.ascii-header {
    margin: auto;
    width: fit-content;
}

.ascii-header pre {
    color: var(--font-color);
    font-family: 'MyMono', Menlo, Monaco, Consolas, 'Courier New', monospace;
    font-size: clamp(0.43em, 1vw, 1em);
    justify-self: center;
    letter-spacing: -0.0425em;
    line-height: 1.09375;
    white-space: pre;
    text-wrap-mode: nowrap;
    white-space-collapse: preserve;
    transition: color var(--transition);
}

.ascii-sub {
    font-size: clamp(0.43em, 1vw, 0.01em);
}

/* switch between ASCII and image for mobile */
@media only screen and (min-width: 700px) {
    .text-header {
        display: none;
    }

}

@media only screen and (max-width: 699px) {
    .ascii-header {
        display: none;
    }
}

/* menu */ 
.menu {
    display: block;
    text-align: center;
    margin-left: -2em;
}

span.decoration {
    font-family: var(--mono-font-family);
    line-height: 1;
    font-size: 0.5rem;
}

/* images */
img {
    border: thin solid var(--accent-font-color);
    display: block;
    margin: auto;
    padding: 1em;
}