h2
{
    margin-top: 0;
}

h3
{
	color:yellow;
}

h4
{
	color:yellow;
	font-size: 24pt;
	margin-bottom:0px;

}

h5
{
	color:yellow;
	font-size:8pt;
	margin:0px;
}

.underline
{
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

p
{
	/*width:40vw;
	display:block;
	margin-left:auto;
	margin-right:auto;*/
	text-align:left;
}

a
{
    text-decoration: none;
}


ul#nav
{
    list-style: none;
    padding: 0;
    margin: 0;
    width: 70vw;
}

ul#nav li
{
    display: block;
    float:left;
    margin: 0;
    padding: 0;
    position:relative;
    top: -20px;
}

ul#nav li a
{
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    transition: .2s;
}


hr
{
    background: url("img/Separator.png");
    width: 40vw;
    height: 1.9vw;
	margin-left:auto;
	margin-right:auto;
    display: block;
    border: 0;
	clear: both;
    background-repeat: no-repeat;
	background-size:40vw;
	margin-bottom:24px;
	margin-top:24px;
}



#links
{
    list-style: none;
    height: 8vw;
    margin: 2vw 0.1vw 2vw 0.1vw;
    padding: 0;
    text-align: center;
}

#links li
{
    float:left;
    transition: .2s;
    position:relative;
    top: 0;
}

#links li a
{
    display: block;
    width: 15.2vw;
    height: 7.5vw;
}

#links li a img
{
    position:relative;
	top:0.85vw;
    transition: .2s;
	height:6vw;
}

#links li a:hover img
{
	top:0.25vw;
}

/*#facebooklink a img { top: 10px; }
#twitterlink a img  { top: 10px; }
#youtubelink a img  { top: 10px; }
#emaillink a img    { top: 10px; }
#twitchlink a img   { top: 10px; }
*/

/* If you change these values, you must also change the
   corresponding values in the index.js file, which have
   been hard-coded to check against these distances, or
   you will get bugs. I did this because I got tired of
   how JavaScript interfaces with CSS. */
   
 /*
#facebooklink:hover a img { top: 0px; }
#twitterlink:hover a img  { top: 0px; }
#youtubelink:hover a img  { top: 0px; }
#emaillink:hover a img    { top: 0px; }
#twitchlink:hover a img   { top: 0px; }
*/

#facebooklink a { background: url("img/FacebookBack.png"); background-size:16vw; }
#twitterlink a  { background: url("img/TwitterBack.png"); background-size:16vw; }
#youtubelink a  { background: url("img/YoutubeBack.png"); background-size:16vw; }
#emaillink a    { background: url("img/MailBack.png"); background-size:16vw; }
#twitchlink a   { background: url("img/TwitchBack.png"); background-size:16vw; }


#twitterlink, #youtubelink, #emaillink, #twitchlink
{
    margin: 0 0 0 0.9vw;
}

#footer
{
    margin: auto auto 2vw auto;
    clear:both;
    background: none;
    width: 70vw;
    color: rgb(154, 153, 154);
    text-shadow: 0 2px 5px black;
	font-size:1.5vw;
}

#footer:hover
{
    box-shadow: none;
}

.emailsigil
{
    color: rgb(88, 88, 88);
}

.hiddenclear
{
    visibility:hidden;
    clear: both;
}

a:link {
  color: yellow;
}

a:visited {
  color: yellow;
}

a:hover {
  color: hotpink;
}

a:active {
  color: blue;
}