@charset "UTF-8";

@font-face { font-family: "PlexSans"; src: url("/fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "PlexSans"; src: url("/fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: bold; }
@font-face { font-family: "PlexSerif"; src: url("/fonts/IBMPlexSerif-Text.woff2") format("woff2"); }
@font-face { font-family: "PlexSerif"; src: url("/fonts/IBMPlexSerif-TextItalic.woff2") format("woff2"); font-style: italic; }

:root {
    --serif: "PlexSerif", Georgia, serif;
    --sans: "PlexSans", Verdana, sans-serif;
    --red: #99131b;
    --black: #252525;
    --white: white;
    --grey: #ccc;
    --plyr-color-main: #99131bff;
    --sec-heading-font: 1.57rem var(--serif);
    --art-heading-font: 1.14rem var(--serif);
    --body-font: calc(15px + 0.390625vw) var(--serif);
    --small-font: 0.86rem var(--sans);
}

html {
    margin: 0px;
    height: 100%;
    box-sizing: border-box;
    font: var(--body-font);
    letter-spacing: 0.01em;
}

body {
    display: flex;
    flex-direction: column;
    color: var(--black);
    background-color: var(--white);
    margin: 0;
}

a, a:visited { color: var(--red); }
a:hover { text-decoration: none; }

body > header { display: flex; flex-direction: row; align-items: center; margin: 30px auto 10px auto; text-align: center; }
body > header img { max-width: min(80%, 20em); }

nav > ul { list-style-type: none; font-family: var(--sans); font-weight: bold; display: flex; justify-content: center; margin-top: 20px; padding-bottom: 20px; padding-left: 0; border-bottom: 2px solid var(--black); }
nav > ul > li { margin: 0 10px; }
nav a, nav a:visited { text-decoration: none; color: var(--black); text-transform: uppercase; }
nav a:hover { text-decoration: underline; color: var(--black) }
@media only screen and (max-width: 580px) {
    nav > ul { flex-direction: column; }
    nav > ul > li { margin: 5px 0; text-align: center; }
}

main { display: flex; flex-direction: column; justify-content: center; align-items: center; }
main > header { background-color: var(--red); display: flex; justify-content: center; width: 100%; }
main > header > h1 { color: var(--white); font-family: var(--sans); font-size: 1rem; font-weight: bold; margin: 0 40px; padding: 10px 0; }
main > header a, main > header a:visited { color: var(--white); text-decoration: none; }
main > header a:hover { color: var(--white); text-decoration: underline; }
img.play { max-height: 1.5ex; }
main > header > ul { list-style-type: none; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; }
main > header > ul > li { margin: 0 10px; }
main > header > ul > li img { height: 22px; padding: 12px 0 10px 0; }
@media only screen and (max-width: 700px) {
    main > header { flex-direction: column; }
    main > header > h1 { text-align: center; }
}

section.seçion { padding: 1rem; max-width: 40em; }
section.seçion > header { display: flex; justify-content: center; align-items: center; color: var(--red); font: var(--sec-heading-font); }
section.seçion > header > h1 { display: flex; text-transform: uppercase; margin-left: 1em; font-size: 1.8rem; }
section.seçion > header > img { max-width: min(30%, 5em); max-height: 6ex; }

div.audio { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 0.85em; }
@media only screen and (max-width: 580px) {
    div.audiolabel { display: none; }
}

main .articoli { display: flex; flex-direction: column; align-items: center; }
main article { max-width: 40em; margin: 5px; }
main h2 { font: var(--art-heading-font); color: var(--red); font-weight: bold; margin-bottom: 5px; }
main h2 > img { max-height: 1ex; }

article > aside { font: var(--small-font); color: var(--grey); }

details { margin: 0 1em; padding-left: 1em; }
details[open] { border-left: 1px solid var(--grey); }
details > summary { color: var(--red); }
details > summary:hover { text-decoration: underline; cursor: pointer; }
details h2 { font-size: 1em; }
details p { font-size: 0.9em; }


/* Atre pagine */

main#archivio > ul { list-style-type: none; }

div.sponsors { display: flex; flex-direction: row; align-items: center; justify-content: center; }
div.sponsors img { height: 6ex; }