:root {
  --dark-color: hsl(var(--hue), 100%, 9%);
  --light-color: hsl(var(--hue), 95%, 98%);
  --base: hsl(var(--hue), 95%, 50%);
  --complimentary1: hsl(var(--hue-complimentary1), 95%, 50%);
  --complimentary2: hsl(var(--hue-complimentary2), 95%, 50%);

  --bg-gradient: linear-gradient(
    to bottom,
    hsl(var(--hue), 95%, 99%),
    hsl(var(--hue), 95%, 84%)
  );
}

body {
 color: var(--dark-color);
  background: var(--bg-gradient);
}
 
body, html {    
	font-family: Verdana;
	font-size: 12px;
	color:#333;
	font-weight: lighter;
	margin:0px;
    padding:0px;
	text-align: center;
	}

a {
    text-decoration: none;
    color: var(--complimentary1);
}
a:hover {
    color: var(--complimentary2);
}

	h1, h2 {
		font-size: 14px;
		margin-bottom: -4px;
	}	
	h3 {
		font-size: 10px;
		width: 120px;
	}
	ul {
		float: left;
		margin:0;
		padding:0px;
	}
	ul li{
		list-style: none;
		padding-top:4px;
		padding-bottom:3px;
		border-bottom:1px groove;
		padding-right: 24px;
		margin-right: 5px;
	}
	ul.hover{
		background-color:#39C;
	}
	div.quart {
		z-index:10000;
		position:absolute;
		color:#666;
		background-color:#FFF;
		text-align:left;
		padding-left: 10px;
		padding-top: 10px;
		padding-right: 10px;
		padding-bottom: 24px;
		filter:alpha(opacity=65);
		opacity:0.65;
	}
	#flagleft {	
		position:fixed;
		width: 160px;
		top:40px;
		left: 0px;
		}
	#appearances {
		top: 40px;
		left: 185px;
		width: 460px;
	}
	#top10 {
		top: 240px;
		left: 185px;
		width: 460px;
	}
	#bio {
		top: 600px;
		left: 185px;
		width: 460px;
		}

.text-gradient {
  background-image: linear-gradient(
    45deg,
    var(--base) 25%,
    var(--complimentary2)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

@media screen and (max-device-width: 640px) {

  body, html, h1, h2, h3 {  
	font-size: 1.3em;
	}
    div.quart {
        padding-left: 40px;
    }
    	#flagleft {	
        top: 100px;
		width: 100%;
		}
    	#appearances {
            position: fixed;
		top: 210px;
		left: 0px;
        width: 110%;
	}
}