@charset "UTF-8";
/* CSS Document */


html{

	width: 100%;
	scroll-behavior: smooth;

}


body {
	font-family: 'IBM Plex Mono', monospace; Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: 400;
	text-align:center;
	/* background-color: black; */
	background-image: url("blur.gif");
	background-repeat: no-repeat ;
	background-size: cover;
	background-attachment: fixed;

	color: #ffffff;
	top: 0;
}
 
::-webkit-scrollbar {
    display: none;
  }



section{
/* position: sticky; */
top: 0;
width: 100%;

}

.container{
	display: flex;
	text-align: right;
	z-index: 1;
	/* filter: contrast(-10); */
}

.wrapper {
	/* background-color: blue; */
	margin-left:30%;
	min-width: 50%;
	width: 60%;
	overflow: auto;
	text-align: left;
	mix-blend-mode: luminosity;
	

}


	

nav{
	/* margin-left: 10px; */
	font-family: 'IBM Plex Mono', monospace; Helvetica, sans-serif;
	position: fixed;
	/* background-color: #00FF00; */
	width: 30%;
	padding-top: 100px;
	z-index: 1000;

	position: fixed;
	margin-top: 0px;
	font-size: 1.5em;
	line-height: 2em;

	

}

nav p{
	font-family: 'IBM Plex Mono', monospace; Helvetica, sans-serif;
	font-size: 1rem;
	text-align: right;
	margin-right: 50px;

}

nav li{
	list-style-type: none;
	text-decoration: none;
	font-size: 0.6em; 
	padding-right: 50px;
	text-align: right;

}

.title{

	background-color: red;
	font-family: 'IBM Plex Mono', monospace; Helvetica, sans-serif;
	display: flex;
	z-index: 1000;
	padding-top: 100px;
	padding-left: 20px;
	font-size: 1em;
line-height: 2em;
background-image: url("blur.gif");
mix-blend-mode: multiply;


}
.title div{
	padding-right: 50px;
	width: 45%;
}
.subtitles{
	background-color: red;
	color: white;
	font-family: 'IBM Plex Mono', monospace; Helvetica, sans-serif;
	font-size: 1rem;
	display: flex;
	padding-top: 200px;
	padding-bottom: 100px;
	padding-left: 20px;
	padding-right: 0px;
	background-image: url("blur.gif");
	mix-blend-mode: multiply;
}

.subtitles div{
	/* background-color: #00FF00; */
	padding-right: 20px;
	width: 50%;

}
.program {
	background-color: green;
	text-align: left;
	padding-top: 100px;
	padding-left: 40px;
	padding-right: 40px;
padding-bottom: 100px;

background-image: url("blur.gif");
mix-blend-mode: multiply;
}

.program p  {
	padding: 20px;

}

.wrapper p {
	font-size: 1rem;
	line-height: 1.4;
	
	background-color: black;
}
	
.program div{
	padding-left: 70px;
	padding-top:20px ;
}	

.program h2{
	font-size: 1em;
}

.program a{
	font-size: 0.9em;
	line-height: 1.3em;
}

.program span{
	font-style: italic;
}

.bios {
	background-color: blue;	padding-top: 100px;
	padding-left: 40px;
	padding-right: 100px;
	text-align: left;
	background-image: url("blur.gif");
	mix-blend-mode: multiply;
}

.bios p{
padding-left: 60px;
padding-top: 1em;

}


footer{
	/* padding-top: 100px; */
	padding-left: 40px;
	padding-right: 40px;
	align-items: center;
	background-color: black;
}

.footnote img {
    width: 70%;
    height: auto;
}
	
h1 {
	font-family: 'IBM Plex Mono', monospace; Helvetica, sans-serif;
	font-size: 1.3em;
	margin: 0;
	font-weight: 600;
	color: #ffffff;
	letter-spacing: 1.1em;
}

nav h1{
	letter-spacing: 0.1em;

}

h2 {
	font-size: 16px;
	color: #ffffff;
}
h3 {
	font-family: 'IBM Plex Mono', monospace; Helvetica, sans-serif;
	font-size: 1.3em;
	margin: 0;
	font-weight: 600;
	color: #ffffff;
	letter-spacing: 1.1em;
padding-bottom: 50px;
}






td.marginright {
	vertical-align:top;
	padding-right: 50px;
}
td.marginleft {
	padding-left: 70px;
}

td.marginlefteng {
	padding-left: 70px;
	color:#00FF00;
}

a, visited {
	color: #ffffff;
	text-decoration: none;
	background-color: black;
}

a:hover {
	color: #ffffff;
	font-style: bold;
	transform: scale(2);
	/* background-color:white; */
	/* text-decoration: underline; */

    animation-play-state: running;
    animation-name: blinker;
    animation-duration:0.08s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;


}


.loading {
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width: 100%;
    background-color: rgb(0, 0, 0);
    z-index:2000;
    justify-content: center;
    align-items: center;
    transition:opacity 1s;
    display: flex;
    
    }
    
    .loading.hidden{
        opacity:0;
        pointer-events: none;
    }
    
    .loading img {
    position:fixed;
    height:20%;
    top: 50%;
    left: 50%;
    /* animation: rotate 2s infinite; */
    display:block;
    margin:auto;
    }





@keyframes rotate{
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


	@keyframes blinker {
		0%  {opacity: 1.0;}
		50%  {opacity:0.0;}
		100%  {opacity: 1.0;}
	}