@font-face {
    font-family: 'VCR OSD Mono';
    src: url("font/vcr_osd_mono.woff2") format("woff2"), url("font/vcr_osd_mono.woff") format("woff");
}
@font-face {
    font-family: 'Yeezy TStar';
    src: url("font/yeezy_tstar-light.woff") format("woff");
    font-weight: 100 300;    
}
@font-face {
    font-family: 'Yeezy TStar';
    src: url("font/yeezy_tstar-regular.woff") format("woff");
    font-weight: 400 500;    
}
@font-face {
    font-family: 'Yeezy TStar';
    src: url("font/yeezy_tstar-bold.woff") format("woff");
    font-weight: 600 700;    
}
@font-face {
    font-family: 'Yeezy TStar';
    src: url("font/yeezy_tstar-heavy.woff") format("woff");
    font-weight: 800 900;    
}

:root {
	--page-background-color:  #edede3;
	--cover-font-color:  #edede3;
	--font-color:  #182126;
	--cover-background-color:  #182126;
	--body-font:  Roboto, sans-serif;
	--feature-font: 'Yeezy TStar';
	--theme-color:  #9103c9;

}

body {
	background-color: var(--page-background-color);
	font-family:  var(--body-font);
}

dialog {
	display:  none;
	position:  fixed;
	top:  70px;
	left:  100px;
	margin:  0;
	border:  0;
	padding:  25px;
	box-shadow: 0px 0px 15px var(--cover-background-color);
	width:  calc(100% - 200px - 50px);
	height:  calc(100% - 150px - 50px);
	min-height:  500px;
	min-width:  400px;
	z-index: 1000000;
	border-radius: 1em;
}
dialog[open] {
	display:  block;
}

dialog > .close {
	position:  absolute;
	top:  1.25em;
	right: 1.25em;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 1px;
	padding-bottom: 4px;
	border-radius:  5px;
	font-family:  var(--body-font);	
	cursor:  pointer;
	font-weight: bold;
	font-size:  20px;	
	background-color:  var(--page-background-color);
	color:  var(--font-color);
}
dialog > .close:hover {
	box-shadow: 0px 0px 5px var(--cover-background-color);
	background-color:  var(--font-color);
	color:  var(--page-background-color);
}
dialog > h3, dialog > h4 {
	font-family:  var(--feature-font);	
	font-size:  32px;
	margin-top:  0;
	color:  var(--theme-color);
}
dialog > h4 {
	font-size:  24px;
	color: var(--font-color);
}
dialog > p, dialog > ol {
	font-family:  var(--body-font);	
	font-size:  18px;
}
dialog > ol {
	padding-left: 0;
	list-style-position: inside;
	line-height:  1.5em;
}


body[kind="home"] > header, body[kind="feature"] > header {
    height: 700px;
    min-width:  300px;
    text-align: center;
    z-index: 2;
}
body > header > nav, body > header > nav:hover {
	right:  0;
}
body > header, body > header > nav, body > header > nav > a {
	background-color: var(--cover-background-color);
	font-family: var(--header-font);
}
body > header > nav {
	margin-right:  2em;
	margin-left: 2em;
	width: auto;
	vertical-align: top;
}
body > header > nav > a {
	color:  var(--cover-font-color);
	vertical-align: top;
}
body > header > nav > a.button {
	margin-left: 1em;
}
body > header > h1 {
	font-family: var(--feature-font);
	background-size: cover;
	background-position: center center;
}
body[kind="home"] > header > h1, body[kind="feature"] > header > h1 {
    height: 630px;

}
body > header > a {
	color:  var(--cover-font-color);
	font-family: var(--feature-font);
	font-weight:  bold;
	font-size:  50px;
	height:  50px;
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 15px;
	position:  static;
	display:  inline-block;
	padding-left: 0;
	vertical-align: top;
}
body > header > a > img {
	width:  350px;
	height:  70px;
	display:  inline-block;
	position:  absolute;
	top:  0;
	left:  0;
}
body > header > h1 > div {
	width: 400px;
	position:  absolute;
	top:  100px;
	left:  200px;
	text-align:  left;
}
body > header > h1 > div > span {
	color:  var(--cover-font-color);
	font-family: var(--feature-font);
	font-weight:  bold;
	font-size:  80px;
	display: block;
	text-shadow: 0px 0px 5px var(--cover-background-color);
}
button.action {
	width:  210px;
}
body > header > h1 > div > button, body > header > h1 > div > button.action, body > header > nav > a.button, 
body > header > h1 > div > a[name], button.action, button.play, button.action {
	border-radius: 0.5em;
	font-size:  25px;
	padding:  0.5em;
	padding-left: 1em;
	padding-right: 1em;
	cursor:  pointer;
	display:  inline-block;
	margin-top:  1em;
	width:  196px;
	height:  53px;
	background-color: var(--cover-font-color);
	color:  var(--theme-color);
	border: none;
	outline:  none;
	font-family: var(--feature-font);
	box-shadow: 0px 0px 5px var(--theme-color);
	font-weight:  bold;
}
body > header > h1 > div > button:hover, body > header > h1 > div > button.action:hover, body > header > nav > a.button:hover, 
button.action:hover, button.play:hover, button.action:hover {
	background-color: var(--theme-color);
	color:  var(--cover-font-color);
}
body > header > nav > a.button {
	font-size: 18px;
	width: 120px;
	padding-left: 0.5em;
    padding-right: 0.5em;
    height: 18px;
}

button.action[disabled], button.action[disabled]:hover {
	background-color: lightgrey;	
	box-shadow: 0px 0px 5px darkgrey;
	color: darkgray;
	cursor: default;
}


body > header > h1 > div > a[name="google-play"], body > header > h1 > div > a[name="app-store"] {
	background-color: transparent;
	background-repeat: no-repeat;
	padding:  0;
	background-size: contain;
	box-shadow: none;
}
body > header > h1 > div > a[name][disabled] {
	cursor:  default;
}
body > header > h1 > div > a[name="google-play"] {
	background-color: #000000;
	background-image:  url(image/badge/google-play-badge.webp);
	background-position: center;
}
body > header > h1 > div > a[name="app-store"] {
	background-color: #000000;
	background-image:  url(image/badge/app-store-badge.webp);
	background-position: center;
}
body > header > nav > a {
	width: 100px;
}

body[kind="home"] > main {
	margin-top:  3em;
	margin-left:  200px;
	width: calc(100% - 400px);
	min-width: 300px;
	text-align:  left;
}

main > p, main > ul {
	font-size:  22px;
	line-height:  1.75em;
}

main > a[id] {
	display:  block;
	clear:  both;
	height:  1em;
	margin:  1em;
}

main > .lead {
	text-align: center;
}

main > .content, main > .content.left {
	float:  left;
	width:  calc(50% - 3em);
	min-width:  calc(300px - 3em);
	max-width:  calc(600px - 3em);
	margin-right:  3em;
	margin-bottom:  1em;
	margin-top:  80px;
}
main > .content.right {
	float:  right;
	margin-right:  0;
	margin-bottom:  1em;
	margin-left:  3em;
}

main > h2, main > h3, .tile > h3, #team > h2 {
	font-size:  80px;
	font-weight: bolder;
	font-family: var(--feature-font);
	margin-bottom: 0;
	clear:  left;
	height:  100px;
}

main > h3, .tile > h3 {
	font-size:  50px;
	font-weight: bolder;
	height:  60px;
}

.tile {
	font-size: 20px;
	box-shadow: 0px 0px 5px var(--theme-color);
	width: 300px;
	margin-right: 1em;
	margin-bottom: 1em;
	display: inline-block;
	vertical-align: top;
	padding-left: 30px;
	padding-right: 20px;
	padding-bottom: 30px;
	background-color: #9103c933;
	text-align: left;
}


.tile ul {
	list-style: none;
	padding-left: 0;
	margin-top: 0.25em;
}

.tile > h3 {

}

section[name="roadmap"] {
	text-align: center;
}

#redeem label, #redeem small {
	display: block;
	font-size: 24px;
	font-weight:  bold;
	padding-left:  1em;
} 
#redeem small {
	font-size:  18px;

} 


main > .content + h2 {
	display:  inline-block;
}

dialog {
	overflow: auto;
	padding-bottom: 2em;
}
dialog label[name="progress"] {
	display:  block;
	margin-top: 1em;
	margin-bottom: 2em;
}
dialog label[name="progress"] input {
	display:  block;
	width:  100%;
}
dialog label[name="progress"] small {
	display:  block;
	font-weight:  bold;
	font-style:  italic;
	margin-top:  1em;
}
dialog button {
	display:  inline-block;
	margin-right:  1em;
}

dialog > a[name="opensea"] {
	display: block;
	font-size:  20px;
	text-decoration: none;
	margin-top:  2em;
	margin-bottom:  3em;
	font-weight: bold;
	color:  var(--theme-color);
	cursor: default;
}
@keyframes thinking {
	0% { width: 0; }
    10% { width: 0; }
    30% { width: 1em; }
    50% { width: 2em; }
    70% { width: 3em; }
    100% { width: 3em; }
}
dialog a[name="opensea"] > span, dialog > p[name="ticket-number"] > span {
	display: inline-block;
	overflow: hidden;
	width:  0;
	vertical-align: top;
	margin-left: 0.25em;
	white-space: nowrap;
	animation:  3s linear 0s infinite thinking;
}
dialog > h4 {
	margin-bottom: 0;
}

dialog > p[name="processing"] {
	font-size: 150%;
	margin-top: 2em;
}

dialog button[name^="mint"][disabled], dialog button[name^="mint"][disabled]:hover {
	cursor: default;
	background-color: lightgray;
	color: darkgray;
	box-shadow: 0px 0px 5px grey;
}

dialog .ticket {
	display: inline-block;
	width: 200px;
	height:  200px;
	background-color: var(--page-background-color);
	margin-right: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	cursor: pointer;
	position: relative;
}
dialog .nft {
	display:  inline-block;
	position: relative;
	width: 180px;
	height: 200px;
	margin: 1em;
}
dialog .nft label {
	position: absolute;
	bottom: 0;
	text-align: center;
	font-size:  20px;
	font-weight:  bold;
	width:  100%;
	cursor: pointer;
	color: var(--theme-color);
}
dialog .nft label a {
	color: var(--theme-color);
	text-decoration: none;
}
dialog .nft div {
	width:  180px;
	height:  180px;
	position:  absolute;
	top:  0;
	left:  10px;
}

dialog input, dialog select {
	font-size: 36px;
    font-weight: bold;
    width: 190px;
    display: block;
    border-radius: 15px;
    color: var(--theme-color);
    border: 2px solid var(--theme-color);
    text-align: center;
}

dialog > div.nfts {
	width: 90%;
	height: auto;
	outline: 1px solid red;
}

ol.instructions i {
	font-weight: bolder;
	font-size:  180%;
	color:  green;
}

#trailer {
	display:  block;
	margin-top:  6em;
	width:  100%;
	margin-bottom:  2em;
}

#team {
    text-align: center;
    margin-top: 6em;
}
#team, #game {
    border-top: 3px dashed var(--font-color);
}
#game {
	margin-top:  6em;
}

#team > h2 {
	height:  auto;
}

.team {
	display:  inline-block;
	width: 250px;
	height:  400px;
	vertical-align: top;
	text-align:  left;
	background-repeat: no-repeat;
	margin:  8px;
	margin-top:  32px;
	padding: 4px;
	border: 0;
	background-size:  200px;
	background-position: 25px 30px;
	position:  relative;
}
.team h3 {
	position:  absolute;
	top: 0;
	left: 0;
	width:  100%;
	text-align: center;
	margin-top:  0;
	font-family: var(--feature-font);
	font-size:  25px;
}
.team p {
	position:  absolute;
	top: 250px;
	left: 0;
	width:  100%;
	text-align: center;
	margin-bottom:  0;
	font-size:  20px;
	font-style:  italic;
}
.team p:first-of-type {
	top: 215px;
	font-weight: bold;
}

main > .content.watermark {
	float: none;
    margin-right: 0;
    margin-left: 0;
    z-index: -1;
    max-width: unset;
	width: 100%;
	opacity: 0.25;
    background-position: bottom right;
    background-size: 250%;
    background-repeat: no-repeat;	
}
main > .content.watermark + h2 {
	text-align: center;
	width: 100%;
	margin-top: 0.25em;
}
main > .content.watermark + h2 + ul {
	text-align: center;
    width: 60%;
    margin-left: 20%;
    list-style: none;
    padding-left: 0;
}
main > .content.watermark + h2 + ul > li {
	margin-top: 1em;
}

main > .content.watermark {
	height:  600px;
    margin-bottom: -600px;
    background-size: 250%;
}
main > .content.watermark + h2 + ul {
	height: 450px;
}

#fixed {
	position: fixed;
	background-color: var(--cover-background-color);
	width: 100%;
	height: 50px;
	z-index: 1;
	text-align: center;
	white-space: norwrap;
}
#fixed button {
	display: inline-block;
    margin: 1em;
    font-size: 100%;
    margin-top: 10px;
    height: 30px;
    padding-top: 5px;
    width: 150px;	
}

@media (max-width: 1200px) {
	main > .content.watermark {
		height:  700px;
	    margin-bottom: -700px;
	}
	main > .content.watermark + h2 + ul {
		height: 550px;
	}
}
@media (max-width: 800px) {
	main > .content.watermark {
		height:  580px;
	    margin-bottom: -580px;
	}
	main > .content.watermark + h2 + ul {
		width: 80%;
		margin-left: 10%;
		height: 430px;
		font-size: 18px;
	}
}
@media (max-width: 600px) {
	main > .content.watermark {
		height:  500px;
	    margin-bottom: -500px;
	}
	main > .content.watermark + h2 + ul {
		width: 90%;
		margin-left: 5%;
		height: 350px;
		font-size: 17px;
	}
}
@media (max-width: 400px) {
	main > .content.watermark + h2 + ul {
		font-size: 16px;
	}
}


#nft-example {
	position: relative;
	overflow:  hidden;
	cursor: pointer;
}

#nft-example::after {
	content:  '\1F446';
	display:  block;
	width:  32px;
	height:  32px;
	position:  absolute;
	top:  10px;
	left:  10px;
	color:  var(--cover-font-color);
	font-size:  40px;
	font-weight:  bold;
}

body > footer > nav > a {
	width:  200px;
}
body > footer > nav > .social-links > a {
	display: inline-block;
	width:  50px;
}


@media (max-width: 999.999px) {
	body > header > h1 > div {
		width: 60%;
		top:  80px;
		left:  20%;
		text-align:  center;
	}
	body[kind="home"] > main {
		margin-left:  100px;
		width: calc(100% - 200px);
	}
	body > header > nav {
		display: none;
	}
	body > header > nav::after {
		color:  var(--cover-font-color);
		display: none;
	}
	body > header > nav:hover, body > header > nav:hover > a {
		background-color:  var(--cover-background-color);
		color:  var(--cover-font-color);
		padding-bottom: 20px;
	}
	body > header > nav:hover > a {
		border-top:  1px solid var(--cover-font-color);
		padding-top: 1.5em;
		padding-bottom: 2.5em;
	}
	body > header > nav:hover > a:first-of-type {
	    border-top: 1px solid var(--cover-font-color);
	}	
	body > header > nav:hover {
		background-color:  transparent;
	}
	body > header > nav:hover > a:last-of-type {
		border-bottom-left-radius: 5px;
	}
	body > header > nav, body > header > nav:hover {
		right:  0;
	}
	body > header > nav {
		margin-right:  unset;
	}
	dialog {
		left:  50px;
		width:  calc(100% - 100px - 50px);
		min-width:  400px;
	}
}

@media (max-width:  799.999px) {
	body > header > h1 > div {
		width: 80%;
		top:  50px;
		left:  10%;
		text-align:  center;
	}
	body[kind="home"] > main {
		text-align: center;
	}
	body[kind="home"] > main > .content {
		float:  none;
		width:  100%;
		margin-right:  0;
		margin-left:  0;
		margin-top:  2em;
	}
	dialog {
		left:  10px;
		width:  calc(100% - 70px);
		min-width:  350px;
	}
}

@media (max-width:  599.999px) {
	body > header > h1 > div {
		width: 90%;
		top:  10px;
		left:  5%;
		text-align:  center;
	}
	body[kind="home"] > main {
		margin-top:  2em;
		margin-left:  5%;
		width: 90%;
		overflow-x: auto;
	}
	body > header > a > img {
		left: -70px;
	}

}

@media (max-width:  399.999px) {
	body > header > h1 > div {
		width: 96%;
		top:  10px;
		left:  2%;
		text-align:  center;
	}
	body[kind="home"] > main {
		margin-top:  2em;
		margin-left:  2%;
		width:  96%;
	}
	#fixed button {
	    margin: 0.5em;
	    margin-top: 10px;
	    font-size: 80%;
	    width: 100px;	
	}

}