/* FILMARC CSS 250817 */

* {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    box-sizing: border-box
}

ul,ol { list-style: none }

html {
    margin: 0 0 0 calc(100vw - 100%);
    -webkit-text-size-adjust: 100%;
    height: 100%;
	scroll-behavior: smooth
}

@font-face { font-family: Roboto; src: url('/src/Roboto-VariableFont_wdth,wght.ttf') } 

body { 
	font-family: Roboto, sans-serif;
	font-size: 1.1rem;
	font-weight: 340;
	color: #333;
	letter-spacing: 0.5px;
	line-height: 1.5;
	background: #eee
}
header { 
	padding-top: 5vh;
	margin-bottom: 5vh;
	text-align: center
}
main { 
	padding: 4vh 2rem 0; 
	display: grid; 
	grid: 1fr / minmax(auto, 65ch); 
	justify-content: center; 
	height: 100%
}
footer { 
	padding: calc(1.5rem * 2) 0 6vh;
	text-align: center
}

p { hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; margin-bottom: 1rem }
a { display: inline-block;text-decoration: none;border-bottom: 1px dotted #888 }

h1, h2 { margin:0 auto; text-align:center; font-size: 1.65em; line-height: 1.3; width:66% }
h1 { font-weight:480 }
h2 { font-weight:360; color: #888; margin-bottom: 3rem }
h3 { font-weight: 480; text-align: center; margin-top: 1rem; margin-bottom: 1rem }
h4 { font-weight: 390; text-align: center; color: #888; margin-top: -1rem; margin-bottom: 4rem }

img, audio, iframe { width: 100%; margin-top: 3rem; margin-bottom: 4.5rem }
img { border-radius: 5px }
img + h3 { margin-top: 0 }
.medium { width:58%; margin: 0 auto; margin-top: 3rem; margin-bottom: 4rem }
.small { width:65%; margin: 0 auto; margin-bottom: 1rem }
gallery { display: grid; grid-template-columns: auto auto; row-gap: 1em; column-gap: 1em; margin-top: 3rem; margin-bottom: 4rem }
gallery > img { margin: 0 }
gallery > img:active { cursor:none; position:fixed; top: 45%; left:50%; transform:translate(-50%, -50%)scale(0.9); border:500px solid #eee }
gallery > img:hover { cursor: zoom-in }

hr { border: 0; margin-top: 1.5rem; margin-bottom: 2rem}
hr::before { content: '* * *'; display: block; text-align: center; color: #888 }
main > a:last-of-type { border: 0; margin-bottom: -3rem  }

table { width: 58%; margin: 0 auto; margin-top:3rem; margin-bottom:4.5rem; padding: 1rem; padding-bottom: 0.25rem; font-size: 1rem; text-align: left; line-height: 1.7; background: gainsboro; border-radius: 5px }
table + table { margin-top: -1rem }
th { font-weight: 450; padding-left: 0.5rem }
td { padding-left: 0.5rem }
table + h3 { margin-top:-0.5rem }

print { display: none; margin-top: 2rem; text-align: center; color: dimgrey }

@media (max-width: 799px) {
	body { font-size: 1.16rem }
  	h1, h2 { font-size: 1.5rem; width:94% }
	h4 { margin-bottom: 2.5rem }
	footer { margin-top: 1rem; padding-top: 1rem }
	hr { margin-top: 1rem; margin-bottom: 1.5rem }
	img { margin-top: 2rem; margin-bottom: 3.5rem }
	gallery { grid-template-columns: auto; margin-top: 0 }
	main > a:last-of-type { margin-bottom: -1.5rem  }
	.medium { width: 100%; margin-top: 1.5rem; margin-bottom: 2.5rem }
	.small { width: 85%; margin-top: 0; margin-bottom: 0.5rem }
	table { width:100%; padding: 1rem }
}
@media screen and (max-width: 799px) and (orientation: landscape) {
	header { margin-bottom: 2em }
	h1, h2 { width: 66% }
}
@media (min-width: 1279px) {
	body { font-size: 1rem }
	header { margin-bottom: 4vh }
	gallery > img:active { border: 275px solid #eee }
}
@media (min-width: 1439px) {
	body { font-size: 1.1rem }
	header { margin-bottom: 7vh }
}
@media (min-width: 2000px) {
	body { font-size: 1.1rem }
	header { margin-bottom: 9vh }
}
@media print {
    @page { size: A4; margin-top: 25mm; margin-left: 30mm; margin-right: 25mm; margin-bottom: 25mm }
    html { margin: 0; padding: 0; background: none }
    body { display: block; background: none; font-size: 13.5px; font-weight: 300; line-height: 1.35; padding: 0; margin: 0 }
	main { grid: 1fr / minmax(auto, 66ch); padding: 0; color: black}
	header, footer { display: none }
	p { orphans: 3; widows: 3 }
	p { break-insid: avoid }
	h2 { break-after: avoid; color: dimgrey }
	h3, h4, h5 { display: block }
	h4, hr { color: dimgrey }
    img, div,table { break-inside: avoid }
	.medium, .small { width: 55% }
	th { background-color: lightgrey }
	break { display: inline; break-after: always }
	print { display: block }
}