@import url("settings.css");

:root {
    --body-margin: 30px;
    --max-width: calc(2 * var(--col-width) + var(--col-gap) +
                      2 * var(--body-margin));
}

@font-face {
    font-family: "SourceSans3";
    src: url("../fonts/SourceSans3-Light.ttf.woff2");
}

@font-face {
    font-family: 'SourceSans3';
    src: url("../fonts/SourceSans3-LightIt.ttf.woff2");
    font-style: italic;
}

@font-face {
    font-family: 'Font Awesome';
    src: url("../fonts/fa-solid-900.woff2");
}

* {
    font-weight: normal;
}

html {
    margin: auto;
    background: white;
    max-width: var(--max-width);
    font-family: SourceSans3, Helvetica, Arial, sans-serif;
    background: white;
    color: black;
    font-size: 20px;
}

body {
    margin: var(--body-margin);
}

em {
    font-style: italic;
}

section.level2 {
    margin-top: 2.5em;
    column-count: 2;
    column-gap: var(--col-gap);
}

img {
    width: 100%;
}

h1 {
    font-size: 1.8rem;
    margin-bottom: 1em;
}

h2 {
    font-size: 1.3rem;
    column-span: all;
    break-after: avoid;
    margin-bottom: 0.8em;
}

p {
    line-height: 1.6em;
    margin-bottom: 1.6em;
}

p:has(img) {
    margin-bottom: 0;
}


/* Highlight links, but not if they are images: */

p a {
    outline: none;
    text-decoration: none;
    padding: 0 1px;
    border-bottom: 1px solid;
    color: #538ac9;
}

a:has(img) {
    padding: 0;
    border: 0;
}


/* Style first image with video, and add play button: */

section.level1>p>a img {
    border-radius: clamp(0px, 2vw, 20px);
}

section.level1>p>a {
    position: relative;
    display: block;
}

section.level1>p>a::after {
    content: "\f04b"; /* Font Awesome play icon */
    font-family: "Font Awesome";
    font-size: clamp(5px, 11vw, 100px);
    color: rgba(255, 255, 255, 0.7);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 600px) {
    section.level2 {
        column-count: 1;
    }
}