html {
	padding-bottom: 100px !important;
}

body {
	--textColorTitle: #E0E0E0;
	--textColor: #FFFFFF;
	--textDescriptionColor: #FFFFFF;
	--fontFamily: "Verdana";
	--linkColor: #FFBD42;

	background-color:#6a93d8;
	text-align: center;


}

h1 {
	text-shadow: 4px 4px 2px rgba(0,0,0,0.3);
  color: #E0E0E0;
	color:var(--textColorTitle);
	font-size: 75px;
	font-family:var(--fontFamily);
	margin: 0px;
	transition: .2s;
	font-weight: normal;
}

h1:hover{
	transform: translate(0, -5px);
}

a:link {
    color: #E0E0E0;
	color:var(--textColorTitle);
	text-decoration:none;
}
a:visited {
    color: #E0E0E0;
	color:var(--textColorTitle);
	text-decoration:none;
}
a:hover {
	color:#D0D7D9;
	text-decoration:none;
}

h4 a:link {
    color: #FFBD42;
	color:var(--linkColor);
	text-decoration:none;
}
h4 a:visited {
    color: #FFBD42;
	color:var(--linkColor);
	text-decoration:none;
}
h4 a:hover {
	color:#FFEFD1;
	text-decoration:none;
}

h2 {
	text-shadow: 1px 1px 4px black;
    color: #E0E0E0;
	color:var(--textColorTitle);
	font-size: 32px;
	font-weight: normal;
	font-family:var(--fontFamily);
	margin: 1px;
	padding: 0px;
}

h3 {
	text-shadow: 1px 1px 4px black;
    color: #E0E0E0;
	color:var(--textColorTitle);
	font-size: 24px;
	font-weight: normal;
    font-family: "Verdana";
	font-family:var(--fontFamily);
	margin: 1px;
}

h4 {
	text-shadow: 1px 1px 4px black;
    color: #FFFFFF;
	color:var(--textColor);
	font-size: 16px;
	font-weight: normal;
    font-family: "Verdana"
	font-family:var(--fontFamily);
	margin: 1px;
}

#gameContainer {
	margin: 0 auto;
	width: 950px;
	height: 100%;
	background-color: red;
}

.ludumdare_tag {
	background: url("ludumdare_tag.png") no-repeat;

	display: block-inline;

	width: 51px;
	height: 51px;

	position: absolute;
	right: -4px;
	top: -4px;

}

.block{
    width: 300px;
	height:	200px;
    position: relative;
    transition: .2s;
	box-shadow: rgba(0, 0, 0, 0.4) 4px 4px 8px;
	float: left;
	display: block-inline;
	margin: 8px;
}

.block.medium{
	width:620px;
	height:200px;
}

.block.featured{
	width:930px;
	height:200px;
}


.archiveTable{
	text-shadow: 1px 1px 4px black;
    color: #FFFFFF;
	color:var(--textColor);
	font-size: 14px;
	font-weight: normal;
    font-family: "Verdana";
	font-family:var(--fontFamily);
	margin: 1px;
}
.archiveTable a{
	color:orange;
}

.archiveImage{
	border-radius:4px;
}

.block:hover, .block:focus{
	-webkit-filter: brightness(110%);
	transform: translate(0, -6px);
	box-shadow: rgba(0, 0, 0, 0.2) 4px 12px 16px;
}

.icon{
	transition:.5s;
}

.block:hover .icon{
	-webkit-filter: brightness(35%);
}

/*
=========
 CONTACT
=========
*/
#contactContainer {
	margin: 0 auto;
	height: 55px;
	width: 950px;
	text-align: center;
	margin-top: 10px;
}

.contact {
	height: 40px;
	width: 160px;
	display: inline-block;
	margin-left: 5px;
	margin-right: 16px;
	border-radius: 5px;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	text-align: center;
	transition: .3s;
	outline: none;
}

.contact img {
	padding-top: 8px;
	-webkit-filter: drop-shadow(2px 2px 2px #222);
	filter: drop-shadow(2px 2px 2px #222);
}

.contactLabel {
	font-family: "Verdana";
	font-family: var(--fontFamily);
	margin-top: 8px;
	opacity: 0;
	transition: .3s;
	color: white;
}

.contact:hover {
	transform: translateY(-6px);
	transition: .2s;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
}

.contact:hover .contactLabel{
	opacity: 1;
	transition: .4s;
}

.contact.twitter{
	background-color: #84BEDB;
}

.contact.youtube{
	background-color: #ED4242;
}

.contact.about{
	background-color: #70D66B;
}

.contact.github{
	background-color: #222222;
}

.contact.archive{
	background-color: #D69D6B;
}

.block.backBlock{
	border-radius:4px;
	text-align: center;
    position: relative;
    transition: .2s;
	width:180px;
	height:40px;
	box-shadow: rgba(0, 0, 0, 0.4) 4px 4px 6px;
	background-color: #7F7C82;
	margin: 0 auto;
	float: none;
}

.block:hover{
	-webkit-filter: brightness(125%);
}

.block.backBlock:hover{
	-webkit-filter: brightness(125%);
}

.title {
  color: #FFFFFF;
	color:var(--textColor);
	top: 14px;
  font-family: "Verdana"
	font-family:var(--fontFamily);
	font-weight: bold;
	text-shadow: 2px 2px 4px black;
	width: 100%;
	text-transform: 5px 12px;
	font-size:22px;
	position: absolute;
	transition: .2s;
	opacity: 0;
}

.smallTitle {
	top: 8px;
	-webkit-filter: drop-shadow(2px 2px 2px #222);
	filter: drop-shadow(2px 2px 2px #222);
	transition: .4s;
	opacity: 1;
}

.block:hover .title, .block:focus .title{
	transform: translate(0, -6px);
	font-size: 26px;
	opacity: 1;
}

.block:hover .smallTitle{
	transform: translate(0, -4px);
	font-size: 24px;
}

.block img{
	border-radius:4px;
}

.description {
    color: #FFFFFF;
	color:var(--textColor);
	top: 150px;
    font-family: "Verdana";
	font-family: var(--fontFamily);
	text-shadow: 1px 1px 2px black;
	text-align: center;
	width: 100%;

	text-transform: 5px 12px;
	font-size:14px;

	position: absolute;
	transition: .5s;
	opacity: 0;
}

.date {
	text-align: left;
	font-size: 12px;
	color: #A2E0F5;
	top: 211px;
	text-shadow: none;
}

.smallDescription {
	top: 58px;
}

.backDescription {
	top: 56px;
}

.featuredBigDescription {
	top: 240px;
}

.block:hover .description{
	opacity: 1;
	transform: translate(0, -10px);
}