/* ┏━━━┓╱╱╱╱╱┏┓╱╱┏┓╱╱╱╱╱┏┓╱╱   
   ┃┏━┓┃╱╱╱╱╱┃┃╱╱┃┃╱╱╱╱╱┃┃╱╱╱  
   ┃┗━┛┣┓┏┳━━┫┃┏┓┃┃╱╱┏━━┫┗━┳━━┓
   ┃┏━━┫┃┃┃┏┓┃┗┛┃┃┃╱┏┫┏┓┃┏┓┃━━┫
   ┃┃╱╱┃┗┛┃┃┃┃┏┓┃┃┗━┛┃┏┓┃┗┛┣━━┃
   ┗┛╱╱┗━━┻┛┗┻┛┗┛┗━━━┻┛┗┻━━┻━━┛
    ━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html {
	font-size: 14pt;
	}
	
body {
	text-align: center;
	padding: 0px;
	margin: 0px;
	background: #97b1b5;
	color: #fff;
	}

h1 {
	text-shadow: 0px 5px 10px rgba(0,0,0,0.25);
	}
	
h2, h3 {
	text-shadow: 0px 5px 5px rgba(0,0,0,0.16);
	}
	
h1, h2, h3 {
	margin: 10px 0 5px 5px;
	}
	
ul {
	margin-top: 0;
	}
	
p {
	padding: 10px 40px;
	}
	
img {
	max-width: 100%;
	}


a, a:hover, a:link {
	color: #ffc;
	font-weight: bold;
	}
	
hr {
	border: 0;
	border-bottom: 3px solid #eee;
	padding: 0;
	}

#Main {
	margin:0 auto;
	min-height: 550px;
	/*padding: 0 15px;*/
	}

.Header {
	text-align: center; margin-bottom: 0;
	padding: 10px;
	}
.home .Header {
	text-align: center;
}
.Header .Navigation {
	text-align: left;
}
	
a.Button, a.Button:hover, a.Button:link {
	padding: 7px 13px;
	background: #444;
	color: #ffffff;
	border-radius: 5px;
	text-decoration: none;
	text-shadow: 0px 2px 0px #00000044; 
}

.Badges {
	font-size: 0;
}
.Badges * {
	font-size: 16pt;
}
.Badges a {
	display: inline-block;
	margin: 5px;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
.Badges a.Button.Itch { background-color: #fa5c5c; }
.Badges a.Button.Steam { background-color: #282E39; } /*{ background: linear-gradient(0deg, #2990ff 0%, #003777 70%); }*/

.Badges a.Button.Linux { background-color: #f0136f; }
.Badges a.Button.Windows { background-color: #00a2ed; }
.Badges a.Button.Mac { background-color: #636366; } /* systemGray2 */

.Badges a.Button.Android { background-color: #a4c639; }
.Badges a.Button.iOS { background-color: #636366; } /* systemGray2 */
.Badges a.Button.Soundtrack { background-color: #c400be; }

.Badges a.Button:hover {
	position: relative;
	top: -2px;
}
.Badges a.Button:active {
	position: relative;
	top: 0px;
}
#StoreEmbed {
	margin-top: 5px;
}
	

.Logo img {
	max-width: 95%;
	max-height: 400px;
	padding: 20px 10px;
	}

body.home .Logo img {
	max-height: 600px;
	}



.Icon {
	height: 200px;
	vertical-align: top;
	}

#Footer {
	font-size: 0.86rem;
	text-align: center;
	padding: 10px 0px;
	}
	
.clear {
	clear: both;
	}
	
.Small {
	font-size: 0.7em;
	}
	
.TextBox {
	display: inline-block;
	max-width: 580px;
	padding: 10px;
	vertical-align: top;
	}

.Tagline {
	max-width: 100%;
	padding: 10px;
	font-size: 1.25rem;
	}
	
.Caption {
	margin: 0 0 10px 0;
	}
	
.Quote {
	padding: 10px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 15px 0 15px 0;
	}

.ScreenshotWrapper {
	padding: 0 0 15px 0; 
	}

.DeviceMetaphor {
	padding: 10px;
	border-radius: 15px;
	display: inline-block;
	/*
	background: #444;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.33);
	*/
	}
	
.Tall {
	/* padding: 25px 5px; */
	max-height: 1000px;
	}
	
.Wide {
	/* padding: 5px 25px; */
	max-width: 1000px;
	}
.DeviceMetaphor img, .DeviceMetaphor video, .DeviceMetaphor iframe {
	vertical-align: middle;

	box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
	border-radius: 10px;
	}

.box {
	max-width: 1000px;
	background: #666;
	margin: 20px auto;
	border-radius: 15px 0px 15px 0px;
	text-align: left;
	padding:5px;
	}
	
.box p {
	padding: 10px;
	margin: 10px;
	}
	
.box ol, .box ul {
	margin-left: 1.6em;
	}
.box img, .box video {
	vertical-align: middle;
	width: 60px;
	margin-right: 10px;
	padding:2px;
	} 
	
.q {
	color: #f84;
	font-weight: bold;
	}
	
.a {
	color: #af8;
	font-weight: bold;
	}
	
.spacer {
	height: 16px;
	}

.Badges {
	padding-top: 5px;
	}
	
.Badge {
	height: 60px;
	padding-top: 10px;
	}

.BadgeSmall {
	display: none;
	}
	
.BadgeLarge {
	display: inline-block;
	}

video {
	max-width: 100%;
	height: auto;
	}

.Privacy {
	font:16px verdana, arial, sans-serif;
	}

@keyframes slideInFromTopCorner {
	0%	{ transform: translate(-100%, -100%); }
	100%	{ transform: translate(0, 0); }
	}
	
.PunkLabsButton {
	animation: 0.5s ease-out 0s 1 slideInFromTopCorner;
	position: absolute;
	z-index: 100;
	top: 0px;
	left: 0px;
	width: 80px;
	height: 80px;
	}

.AdditionalMedia img, .AdditionalMedia video {
	float:right;
	height: 150px;
	width: auto;
	}