* {
    margin: 0;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  overflow-x: hidden;
}
:root {
    font-family: "Noto sans", -apple-system, "Segoe UI", "Roboto", system-ui, sans-serif, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji";
    font-size: max(7pt, min(12pt, 7vw));
    line-height: 1.5;
    background-color: #000000;
    --primary-hue: 242;
    color: hsl(0 0 85);
    --card-bg: hsl(var(--primary-hue) 15 10 / 85%);
    --main-card-bg: hsl(var(--primary-hue) 15 5 / 90%);
    --link-color: hsl(var(--primary-hue) 65 70);
    --link-color-hover: hsl(var(--primary-hue) 65 90);
    --space-xsmall: min(0.25rem, 0.5vw);
    --space-small: min(0.5rem, 1.0vw);
    --space-medium: min(1.0rem, 2vw);
    --space-large: min(1.5rem, 3vw);
    --h1-size: max(8pt, min(1.6rem, 4.5vw));
    --h1-padding: min(1rem, 2.0vw);
    --h2-size: max(8pt, min(1.4rem, 5.5vw));
    --nav-padding: min(1.0rem, 1.1vw);
    --nav-y-padding: min(1.0rem, max(2.0vw, 3vh));
    --nav-a-size: max(8pt, min(12pt, 3.8vw));
}
@media (prefers-color-scheme: light) {
    :root {
        background-color: hsl(0 0 85);
        color: #000000;
        --card-bg: hsl(var(--primary-hue) 15 90 / 85%);
        --main-card-bg: hsl(var(--primary-hue) 15 95 / 90%);
        --link-color: hsl(var(--primary-hue) 65 30);
        --link-color-hover: hsl(var(--primary-hue) 65 10);
    }
}
body {
    background: url("../s/tausta-crop2c.jpg");
    background-attachment: fixed;
    background-size: 100vmax;
    background-position: 50% 0%;
    background-repeat: repeat-x repeat-y;
}
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: space-around;
    margin-top: var(--space-small);
    margin-bottom: var(--space-large);
}
a {
    color: var(--link-color);
    text-decoration: none;
}
a:hover {
    color: var(--link-color-hover);
    text-decoration: underline;
}
h1 {
    font-size: var(--h1-size);
    padding: 0;
    a {
        height: 100%;
        color: inherit;
    }
}
h2 {
    position: sticky;
    font-size: var(--h2-size);
    margin-top: var(--space-small);
    margin-bottom: var(--space-small);
}
article p {
    margin-bottom: 1rem;
}
header {
    backdrop-filter: blur(2px);
}
article {
    background-color: var(--main-card-bg);
    margin: var(--space-medium) 0;
    padding: 1rem var(--space-large);
    max-width: 72ch;
}
.p-img {
    clear: left;
    border-radius: var(--space-small);
    display: block;
    margin: var(--space-small) auto var(--space-medium);
}
.p-img > img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    object-fit: contain;
}
.circle-img {
    padding: 1rem;
    &:not([zoomed]) {
        border-radius: 50%;
        shape-outside: circle(50%);
        img {
            border-radius: 50%;
            object-position: 50% top;
            object-fit: cover;
            width: min(32ch, 40vw);
            height: min(32ch, 40vw);
        }
    }
    &.zoomed {
        border-radius: 0;
        padding: 0;
    }
    &.zoomed > img {
        height: 100%;
        width: 100%;
        border-radius: 0;
    }

}
@media (width < 70ch) {
    .p-img {
        position: relative;
        right: 50%;
        left: 50%;
        box-sizing: border-box;
        margin-left: -50vw;
        margin-right: -50vw;
        max-width: 100vw;
        width: 100vw;
        max-height: 60vh;
        img {
            width: 100vw;
            max-height: 60vh;
        }
    }
}
@media (width >= 70ch) {
    body {
        background: url("../s/tausta-crop2a.jpg");
        background-attachment: fixed;
        background-position: 50% 0%;
        background-size: 100vmax;
        background-repeat: repeat-x repeat-y;
    }
    .p-img {
        float: left;
        max-width: min(32ch, 40vw);
        margin-right: var(--space-medium);
        margin-left: 0;
        margin-bottom: var(--space-xsmall);
    }
    .p-img > img {
        border-radius: var(--space-small);
    }
    article {
        border-radius: var(--space-small);
        margin: var(--space-medium) var(--space-medium);
        padding: 1rem var(--space-medium);
        /*firefox android does not like this: backdrop-filter: blur(2px);*/
    }
    .circle-img {
        margin:0;
        &.zoomed {
            padding: 0;
            border-radius: var(--space-small);
            img {
                border-radius: var(--space-small);
            }
        }
    }
}
@media (width >= 130ch) {
    .p-img {
        margin-top: 0;
        margin-left: calc(-32ch - 2 * var(--space-medium));
        &.zoomed {
            margin-left: calc(-50vw - 16ch - 0.5*var(--space-medium));
            max-height: 100vh;
            img {
                max-height: calc(100vh - 2 * var(--space-small));
            }
        }
        background-color: var(--card-bg);
        padding: var(--space-xsmall);
    }
    article {
        margin-left: calc(32ch + 2 * var(--space-medium));
        background-color: var(--main-card-bg);
    }
    .circle-img.zoomed {
        padding: var(--space-xsmall);
    }
}
header, footer {
    background-color: var(--card-bg);
    left: 0; right: 0;
    padding: var(--space-medium);
}
header {
    background-color: var(--card-bg);
    position: sticky;
    top: 0;
    left: 0; right: 0;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}
* {
    scroll-margin-top: calc(1.0rem + 2 * var(--nav-y-padding) + var(--h2-size));
}
nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    text-align: center;
    a {
        font-size: var(--nav-a-size);
        display: inline;
        padding: var(--nav-y-padding) var(--nav-padding);
    }
    padding-left: calc(-1 * var(--nav-padding));
}
.zoomed {
    clear: both;
    float: none;
    position: relative;
    right: 50%;
    left: 50%;
    box-sizing: border-box;
    margin-right: -50vw;
    margin-left: -50vw;
    max-width: 100vw;
    max-height: 200vh;
    img {
        box-sizing: border-box;
        max-width: 100%;
        max-height: calc(200vh - 2 * var(--space-small));
        width: 100%;
        height: 100%;
        object-fit: contain !important;
    }
}