:root {
	--border-color: #bc3e22;
	--border-color2: #a11b3f;
	--fill-color: #df7126;
	--fill-color2: #222034;
	--text1-color: #fdfffe;
	--header: auto;
}

.night {
	--border-color: #763134;
	--border-color2: #661c31;
	--fill-color: #0e0d16;
	--fill-color2: #3d0e1f;
	--text1-color: #fdfffe;
	--border-type: solid;
	--header: 0 0 0 10px;
	--header-over: #ea703b;
	
}

.interactive {
	--border-color: #763134;
	--border-color2: #661c31;
	--fill-color: #0e0d16;
	--fill-color2: #3d0e1f;
	--text1-color: #fdfffe;
	--border-type: solid;
	--header: auto;
	
}

.orange {
	--border-color: #bc3e22;
	--border-color2: #a11b3f;
	--fill-color: #df7126;
	--fill-color2: #222034;
	--text1-color: #fdfffe;
	--border-type: dashed;
	--header: auto;
}

.plain-mono {
	--border-color: #111111;
	--border-color2: #555555;
	--fill-color: #eeeeee;
	--fill-color2: #dddddd;
	--text1-color: #111111;
	--border-type: solid;
	--header: auto;
}


body{
	color: var(--text1-color);
	font-weight: 100;
	font-size: 16;	
}


.header {
	margin: var(--header);
	position: relative;
	background-color: var(--fill-color);
	border: 10px solid var(--border-color2);
}


ul {
	list-style-type: none;
}

li {
	display: inline;
}

a{
	font-size: 15px;
	padding: 9px;
	margin: 0;
}

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

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

a:hover {
	color: var(--header-over);
	text-decoration: none;
}


.heading1{
	font-family: Rudelsburg;
	font-size: 100px;
	color: var(--text1-color);
	margin: 0 0 0 12px;

}

.container {
	margin: 15px auto;
	height: 1500px;
}

.left{
		/* Left */
	outline-color: var(--border-color2);
	outline-style: solid;
	outline-width: 10px;
	/*box-shadow: 10px 10px var(--border-color2);*/
	float: left;
	background-color: var(--fill-color);
	border: 10px var(--border-type) var(--border-color);
	padding: 15px 10px 15px 10px;
	margin: 0px 0px;
	max-width: 700px;
}

.middle {
	/* Middle */
	outline-color: var(--border-color2);
	outline-style: solid;
	outline-width: 10px;
	/*box-shadow: 10px 10px var(--border-color2);*/
	background-color: var(--fill-color);
	border: 10px var(--border-type) var(--border-color);
	padding: 15px 10px 15px 10px;
	margin: 25px auto;
	max-width: 1200px;

}

.right {
	outline-color: var(--border-color2);
	outline-style: solid;
	outline-width: 10px;
	/*rightmost*/
	float: right;
	padding: 5px;
	max-width: 375px;
	
	background-color: var(--border-color2);
}

t1{
	color: var(text1-color);
	font-weight: 100;
	font-size: 16;
}

@font-face {
    font-family: 'Rudelsberg';
    src: url('fonts/subset-RudelsbergRegular.woff2') format('woff2'),
        url('fonts/subset-RudelsbergRegular.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}


@media only screen and (min-width: 1200px) {
	.container { max-width: 1150px; }
	.header { max-width: 1150px; }
	.right { position: sticky; top: 25px; }
}

@media only screen and (max-width: 1200px) {
	.container { max-width: 700px; }
	.header { max-width: 700px; }
	.right { max-width: 700px; margin: 10px 0;}
}