@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300');

:root {
    --text-color: #222;
    --background-color: #fafafa;
    --figure-bg-color: #f7efef;
    --link-color: #9a0000;
}

/* Media query for dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #fafafa;
        --background-color: #222;
        --figure-bg-color: #343434;
        --link-color: #db8e8e;
    }
}

body {
    font-family: 'Fira Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    max-width: 40rem;
    margin: auto;
    background: var(--background-color);
    font-display: swap;
}

figcaption {
    margin: 0.2em;
}

@media only screen and (max-width: 42rem) {
    p,
    h1,
    h2,
    figcaption {
        margin: 0rem 2rem 0rem 2rem;
    }
}

#con-reports-list {
    margin-bottom: 2em;
}

#con-reports-list h2 {
    margin: 0;
    font-size: medium;
}

#con-reports-list ul {
    margin: 0;
}


figure {
    margin: 16px 0 16px 0;
    background: var(--figure-bg-color);
}

figure>img {
    width: 100%;
    display: block;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

figure>iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

h1,
h2,
strong {
    color: var(--text-color);
}

li {
    margin: 0;
    padding: 0;
}

video {
    width: 100%;
    height: auto;
}

main {
    max-width: 38rem;
    padding: 2rem;
    margin: auto;
}

.location::before {
    width: 10px;
    min-height: 10px;
    min-width: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z\"/></svg>");
}

.segment-date {
    position: relative;
    left: -330px;
    transform: rotate(-90deg);
    float: left;
    text-align: right;
    top: 400px;
}