@import url('./major-mono-display.css');

:root {
    --phi: 1.6180339887498948482;
    --unit: calc(1vw + 1vh);

    --logo-size: 3;
    --figure-size: 13;
    --caption-size: 0.58;
}

@media only screen and (max-width: 428px) {
    :root {
        --logo-size: 4;
        --figure-size: 18;
        --caption-size: 0.8;
    }
}

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

main {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Major Mono Display', sans-serif;
    font-weight: normal;
}

h1 {
    margin-bottom: calc(var(--phi) * var(--unit));
    font-size: calc(var(--logo-size) * var(--unit));
}

figure img {
    max-width: calc(var(--figure-size) * var(--unit));
    filter: invert(100%) grayscale(100%) contrast(1.08);
}

figure figcaption {
    margin: var(--unit) 0;
    font-size: calc(var(--caption-size) * var(--unit));
    line-height: 1.4;
}

a, a:hover, a:active, a:visited {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: #000 wavy underline 1px;
}