html {background-color:rgb(0,0,0);}
html * {margin:0px; padding:0px;}
body {font-size:14pt;}

@font-face {
  font-family: 'qsb';
  src: url("fonts/qsb.woff") format("woff"), url("fonts/qsb.woff2") format("woff2");
  font-weight: normal;
  font-style: normal; }
  
@font-face {
  font-family: 'qsr';
  src: url("fonts/qsr.woff") format("woff"), url("fonts/qsr.woff2") format("woff2");
  font-weight: normal;
  font-style: normal; }  

footer {
	position:fixed;
	width:100%;
	height:20px;
	border-top:4px solid #ffcc33;
	padding-top:8px;
	background-color:rgb(0,0,0);
	color:rgb(255,255,255);
	font-size:.7em;
	text-align:center;
	}

header img {
	display:block;
	margin:4px auto 0px;
	}

main {
	display:flex;
	position:relative;
	width:100%; 
	height:calc(100vh - 80px); 
	margin-top:10px;
	border-top:4px solid #ffcc33;
	background-color:#ffcc99;
	}

main > div {
	align-self:flex-start;
	margin-top:5%;
	}
div#right img {
		transform:rotate(180deg);
		}
div#sites {
	width:calc(100% - 604px);
	text-align:center;
	}

#sites li {
	list-style-type:none;
	margin:20px auto;
	letter-spacing:-.03em;
	}

#sites li a {
	display:block;
	margin-bottom:5px;
	color:#069;
	font-family:'qsb';
	font-size:2.5vw;
	text-align:center;
	text-decoration:none;
	outline:0;
	}

#sites li a:hover {
	color:rgb(0,0,0);
	text-shadow:0px 0px 12px #ffcc33;
	}	
	

#sites li span {
	display:block;
	font-family:'qsr';
	font-size:1.6vw;
	text-align:center;	
	}