@font-face {
	font-family: 'System85';
	src: url('fonts/font.woff2') format('woff2'),
		 url('fonts/font.woff')  format('woff');
}

html {
	scroll-behavior: smooth;
}

body {
	max-width:100%;
	margin:2em 1em auto 1em;
	text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	-moz-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	font-size:1.32em;
}

h1, p, ul, #about {
	font-family: System85, Courier, monospace;
	letter-spacing:-.028em;
}

#about {
	font-size:1.2em;
	fill: white;
}

cell{margin-bottom:0.1em}
cell[span^="1"]{--grid-a:1}
cell[span^="2"]{--grid-a:2}
cell[span^="3"]{--grid-a:3}
cell[span^="4"]{--grid-a:4}
cell[span^="5"]{--grid-a:5}
cell[span^="6"]{--grid-a:6}
cell[span^="7"]{--grid-a:7}
cell[span^="8"]{--grid-a:8}
cell[span^="9"]{--grid-a:9}
cell[span^="10"]{--grid-a:10}
cell[span^="11"]{--grid-a:11}
cell[span^="12"]{--grid-a:12}
cell[span^="13"]{--grid-a:13}
cell[span^="14"]{--grid-a:14}
cell[span$="-1"],cell[span="2"]{--grid-b:2}
cell[span$="-2"],cell[span="3"]{--grid-b:3}
cell[span$="-3"],cell[span="4"]{--grid-b:4}
cell[span$="-4"],cell[span="5"]{--grid-b:5}
cell[span$="-5"],cell[span="6"]{--grid-b:6}
cell[span$="-6"],cell[span="7"]{--grid-b:7}
cell[span$="-7"],cell[span="8"]{--grid-b:8}
cell[span$="-8"],cell[span="9"]{--grid-b:9}
cell[span$="-9"],cell[span="10"]{--grid-b:10}
cell[span$="-10"],cell[span="11"]{--grid-b:11}
cell[span$="-11"],cell[span="12"]{--grid-b:12}
cell[span$="-12"],cell[span="13"]{--grid-b:13}
cell[span$="-13"],cell[span="14"]{--grid-b:14}
cell[span]{grid-column-end:span var(--grid-b)}
cell[span *="-"]{grid-column-start:var(--grid-a)}
cell[span *="-"]{grid-column-end:var(--grid-b)}

h1 {
	font-size: 9vw;
}

a { 
	text-decoration: underline dotted;
	color: inherit;
	text-underline-offset: 5px;
	-webkit-text-decoration-color: rgba(255, 255, 255, 0.4); 
   text-decoration-color: rgba(255, 255, 255, 0.4);
}

a:hover { 
	cursor: pointer;
}

img {
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}

/* -------------- OVERLAY START ----------------- */

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,56,5, 1); 
    z-index: 9999;
	overflow-y: scroll;
  }

.overlay-content {
	margin-top:100px;
    transform: translateX(50%);
	width: 50%;
    color: white;
    text-align: center;
	padding-bottom: 140px;
  }

body.overlay-active {
    overflow: hidden;
}

.colorsymposium {
	color: #50D8A4;
}

.colorexhibition {
	color: #89C11E;
}

.colorperformance {
	color: #1EC15F;
}

/* -------------- OVERLAY END ----------------- */

.horizontalLine {
	display: block;
	position: fixed; 
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-bottom: thin solid #555555;
	width: 53%;
}

.italic {
	font-style: italic;
}

.smalltext {
	font-size: 1em;
	width: 60%;
	transform: translateX(30%);
}

.smalltext p{
	margin-bottom: 20px;
}

.bigtext {
	font-size: 1.6em;
	line-height: 1.3em;
	margin-bottom:50px;
}

.underline {
	text-decoration: underline ;
   text-underline-offset: 5px;
   text-decoration-color: currentColor;
   -webkit-text-decoration-color: currentColor;  

}

#month4, #month5, #month6, #month7, #month8, #month9, .interlude {
	display: block;
	width: 100%;
	display:grid;
	grid-template-columns:repeat(14,1fr);
	grid-column-gap:1em;
	--grid-b:-1;
}

#now, #about-wrapper, #close-overlay {
	position: fixed;
	top: 50%; 
	transform: translateY(-36px); 
	color:white
}

#about-wrapper {
	right: 1em;
	text-align: right;
}

#close-overlay {
	right: 2em;
	text-align: right;
}

#now:hover {
	cursor: pointer;
}

#mainimage {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0; 
    padding: 0;
	opacity: 1;
	transition: opacity 2s;
	pointer-events: auto; 
}

#mainimage.hidden {
	opacity: 0;
	pointer-events: none; 
}

#aboutFindSelectTransform {
	display:block;
	width:100%;
	height:100%;
}

#logoSenat {
	width: 60%;
	image-rendering: auto;
}

@media(max-width: 1700px) {	
	body {
		font-size:1.1em;
	}

	.smalltext {
		font-size: 1.3em;
		width: 75%;
		transform: translateX(16%);
	}

	#now{
		transform: translateY(-30px);
	}

	.horizontalLine {
		width: 40%;
	}
}

@media(max-width: 1400px) {

	body {
		font-size:.98em;
	}
	#now{ 
		transform: translateY(-26px);
	}	

	.horizontalLine {
		width: 35%;
	}

	.overlay-content {
		margin-top:100px;
		transform: translateX(22%);
		width: 70%;
	  }

	#about-wrapper {
		transform: translateY(-25px);
	}

}
