html {
  height: 100%;
}
@font-face {
    font-family: futurahandwritten;
    src: url('FuturaHandwritten.ttf');
}
body {
  font-family: futurahandwritten;
}

.nounderline {
    text-decoration: none;
    color: #000000;
}
.indented {
	margin-left: 5%;
	margin-right: 5%;
}
.notice {
    color: rgb(224, 64, 128);
}
.flashnotice {
    margin-top: 1em;
}

nav > h1 {
    font-size: 2em;
}

/* Format each link in the navigation bar. */
nav > h1 > a {
    text-decoration: none;
    color: #000000;
    cursor: pointer;
}

nav > h1 > a:hover {
    color: #95d3c3;
}


/* Link color hack */
.underline {
    text-decoration: underline;
    color: #95d3c3;
}
.normalcolor {
    color: #000000;
}
.underline:hover {
    color: #909090;
}
.normalcolor:hover {
    color: #010101;
}

.gametitle {
    text-align: center;
}
.gamewrapper {
    margin-top: 1em;
    margin-bottom: 1em;
}
.gamecontainer {
    position: relative;
}
.game {
    position: absolute;
    left: 50%;
}
.gamedescription {
}
.gamelights {
    opacity: 0;
    background-color: #000000;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}
.gamelightstogglewrapper {
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: center;
}
.gamelightstoggle {
    cursor: pointer;
}

/* Interactive section. */
.interactiverow {
    width: 100%;
    display: flex;
    align-items: center;
}

.interactiverow:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.interactiverowimage {
    height: 100%;
    width: 50%;
}

.interactiverowimage img {
    max-width: 100%;
}

.interactiverowdescription {
    width: 50%;
    padding-left: 5%;
}

.interactiverowdescriptionheader {
    text-align: center;
    margin-bottom: 10px;
}

.interactiverowdescriptionheader img {
    max-width:100%;
}

.interactiverowdescriptionbody {
    text-align: left;
}

.interactiverowseparator {
    margin-top: 40px;
    margin-bottom: 40px;
}

.webglgame {
    padding-bottom:20px;
}

@keyframes lightpulsate {
	0% {
		opacity: 0.5;
	}
	50% {
		opacity: 1.0;
	}
	100% {
		opacity: 0.5;
	}
}

.lightpulsate {
	animation: lightpulsate 2s infinite;
}

.overlayimagecontainer {
	margin: auto;
}

.overlayimagecontainerimage {
	margin: auto;
    transition: all 150ms;
}

.overlayimagecontainerimage img {
	max-height: 100%;
	max-width: 100%;
	display: block;
}

.overlayimagecontainerimage iframe {
    position: relative;
	display: block;
}

.overlayimageoverlay {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 0;
    transition: all 150ms;
	background-color: rgba(0,0,0,0.75);
	display: flex;
}

.overlayimageoverlaytext {
	margin: auto;
	color: white;
	padding: 20px;
}

.overlayimageoverlayalwaysshow {
    cursor: pointer;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 1;
    transition: all 150ms;
	background-color: rgba(0,0,0,0.75);
	display: flex;
}

.overlayimageoverlaytext h1, h2, h3, h4, h5, h6 {
	margin-top: 0.5em;
}

.overlayimagecontainer:hover .overlayimageoverlay {
    opacity: 1;
}
.overlayimagecontainernomargin:hover .overlayimageoverlay {
    opacity: 1;
}

.overlayimagecontainer:hover .overlayimageoverlayalwaysshow {
    opacity: 0.75;
}
.overlayimagecontainernomargin:hover .overlayimageoverlayalwaysshow {
    opacity: 0.75;
}

.centeredtext {
    text-align: center;
}

.overlayimagesizingcontainer {
    position: relative;
}

.overlayimagesizingcontainer.demos {
	width: 20%;
    margin: 2% 3%;
	text-align: center;
}

.overlayimagegrid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.demotags {
	margin-top: 4%;
}