@import url("normalize.css");
@import url("cleanup.css");

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

/* basic setup */
html {
    scroll-behavior: smooth;
    font-family: "Lora";

    --font-size: 15.2px;
    --line-height: 16px;

    --main: #000000;
    --accent: rgb(0, 127, 127);

    font-size: var(--font-size);
    line-height: var(--line-height);
}

body {
    grid-template-columns: 1fr 1fr;

    display: flex;
    flex-direction: column;

    margin: auto;
    width: 800px;
}

header,
footer {
    position: sticky;
    width: inherit;
    padding: calc(var(--line-height) * 1.0) 0;
    z-index: 2;

    flex: 0 1 auto;
    display: flex;
    align-items: center;
    visibility: hidden;
}

header *,
footer * {
    visibility: visible;
}

header {
    top: 0;
    justify-content: space-between;
}

footer {
    bottom: 0;
    justify-content: center;
    pointer-events: None;
}

.content {
    flex: 1 1 auto;
    position: relative;
    min-height: 100vh;
}

.content>* {
    position: absolute;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.35rem;
    line-height: calc(var(--line-height) * 1.35);
}

h3 {
    font-size: 1.2rem;
    line-height: calc(var(--line-height) * 1.45);
}

a:hover {
    color: var(--accent)
}

figure,
figure>* {
    display: flex;
    flex-direction: row;
}

figure img {
    width: 100%;
}

figure figcaption {
    writing-mode: vertical-lr;
    rotate: 180deg;
    padding-right: calc(var(--line-height) * 0.5);
}

@media only screen and (max-width: 800px) {
    body {
        width: 100%
    }

    .content {
        height: 100% !important;
    }

    .content>* {
        position: initial;
        width: 100% !important;
        margin-bottom: calc(var(--line-height) * 1.5);
    }

    .content>*:first-child {
        margin-top: calc(var(--line-height) * 1.5);
    }

    .content>*:last-child {
        margin-bottom: unset;
    }

    h3 {
        text-align: center;
    }

    figure,
    figure>a {
        flex-direction: column;
    }

    figure figcaption {
        padding: unset;
        writing-mode: initial;
        rotate: unset;
    }
}