@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

@font-face {
	font-family: font;
	src: url(../fonts/font.otf);
}

@font-face {
	font-family: console;
	src: url(../fonts/VT323-Regular.ttf);
}


.error{
	position: fixed;

    background: #ffffff;
    z-index: 9999999999999999999999999999;
    width: 360px;
    height: 200px;
    border: 4px solid blue;
    border-radius: 5px;
}
.error div{
	background-image: url(../images/errorIconAlert.png);
    position: absolute;
    margin-top: 70px;
    background-repeat: no-repeat;
    color: black;
    background-position: left;
    background-size: 50px;
    padding-left: 70px;
    height: 50px;
    margin-left: 20px;
    padding-top: 16px;	
}
.error header {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 10px;
    background: #7db9e8;
    background: -moz-linear-gradient(top, #7db9e8 0%, #005bee 11%, #3681f9 100%);
    background: -webkit-linear-gradient(top, #7db9e8 0%,#005bee 11%,#3681f9 100%);
    background: linear-gradient(to bottom, #7db9e8 0%,#005bee 11%,#3681f9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#3681f9',GradientType=0 );
    color: white;	
}
.error footer {
    text-align: center;
    position: absolute;
    bottom: 0;
    background: #ededed;
    width: 100%;
    padding: 10px;	
}
.error footer button {
    border: 2px solid #437c97;
    border-radius: 5px;
    font-size: 16px;
    min-width: 80px;
    cursor: pointer;	
}
video {
	display: none;
}
input[type="range"] {
	display: none;
}

html,
body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

body {
	min-width: 100vw;
	min-height: 100vh;
	background-color: #090909;
	margin: 0;
	padding: 0;
	font-size: 14px;
}
body.front {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
}
body.dark {
	/* background-color: #070025; */
}
#resultVaultsSelected {
    text-align: center;
    margin-top: 50px;
    font-size: 30px;	
}
#resultVaultsAll img {
	margin-top: 0 !important;
}
#resultVaultsAll  {
	margin-top: 40px;
}
#resultVaultsAll div {
    display: inline-block;
    border: 1px solid #9d9d9d;
    margin-right: 20px;
	cursor: pointer;
    padding: 10px;
	transition: all 0.3s ease;
    width: 200px;
	position: relative;
}
#resultVaultsAll div[data-used="true"] {
    border: 1px solid #c72424 !important;
    background: rgba(199, 36, 36, 0.4) !important;
    box-shadow: none !important;
}
#resultVaultsAll div[data-used="true"]:before {
    position: absolute;
    content: 'Used';
    background: #c72424;
    font-size: 12px;
    text-transform: uppercase;
    padding: 2px 10px;
    right: 0;
    top: 0;
}
#resultVaultsAll div.vaultActive,
#resultVaultsAll div:hover {
	border: 1px solid #63de00;
    background: rgba(99, 222, 0, 0.2);
    box-shadow: 0px 0px 30px 0px rgb(99 222 0 / 60%);
}
#resultvault {
    margin-top: 20px;
    color: #63de00;
    font-size: 20px;
}
#mywallet {
    margin-bottom: 20px;
    color: #63de00;
    font-size: 12px;
}

.btn {
    box-shadow: -3px -2px 25px #63de00;
    background: #63de00;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn:hover {
    box-shadow: -3px -2px 25px #63de00;
    background: black;
	color: #63de00;
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}

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

.mintehtscan {
    display: block;
    text-align: center;
    margin-top: 50px;
    font-size: 30px;
    background: #21325b;
    padding: 20px;
    text-decoration: none !important;
}

#mintsuccess {
    text-align: center;
    font-size: 28px;
    background: #37b006;
    box-shadow: 0px 0px 45px #63de00;
    padding: 20px;
    display: none;
}
#minterror {
    text-align: center;
    font-size: 18px;
    background: #cb1d1d;
    padding: 10px;	
	display: none;
}
#mint {
	text-align: center;
}
#mint input {
width: calc(33% - 5px);
    background: white;
    border: none;
    border-radius: 0;
    color: black;
    text-align: center;
    font-size: 20px;	
}
.mintcontainer button {
	background: #37b006;
    display: inline-block;
    text-decoration: none !important;
    margin-bottom: 20px;
    padding: 20px;
    font-size: 20px;
    cursor: pointer;
    width: calc(33% - 5px);
    font-weight: 900;
    border: none;
    color: white;
    box-shadow: 0px 0px 45px #63de00;
    margin-top: 30px !important;
}
.mintbuttons a {
	background: #484848;
    display: inline-block;
    text-decoration: none !important;
    margin-bottom: 20px;
    padding: 20px;
    font-size: 20px;
    cursor: pointer;
	width: calc(50% - 5px);
    font-weight: 900;
	vertical-align: top;
}

.mintbuttons a.active {
	background: #37b006;
    display: inline-block;
    text-decoration: none !important;
    margin-bottom: 20px;
    padding: 20px;
    font-size: 20px;
    cursor: pointer;
    
    font-weight: 900;
}
.mintbuttons a span {
    display: block;
    margin-top: 10px;
    font-size: 20px;
}

#language {
    position: absolute;
    right: 40px;
    top: 45px;
    z-index: 99;
    text-align: right;
    font-size: 18px;
	font-size: 15px;	
}
#language .language-selected {
	background: #63de00;
    color: black;
    padding: 5px;
    background-image: url(../images/down-arrow.png);
    background-repeat: no-repeat;
    padding-right: 25px;
    background-position: right 10px top 10px;
    background-size: 9px;
    box-shadow: 0px 0px 45px 3px #63de00;
}
#language-dropdown {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    background: #000000;
    border: 1px solid #63de00;
    text-align: center;
    margin-top: 27px;
    padding: 5px;	
	display: none;
}
#language:hover #language-dropdown {
	display: block;
}
#language-dropdown a {
	padding: 5px;
    display: block;	
}

.roadmapcase {
    position: relative;
    float: left;
    width: 100%;
    clear: both;
	margin-bottom: 100px;
}
.roadmapcase:before {
    height: 100%;
    width: 4px;
    background: white;
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 50%;
    content: '';
}
.roadmapbox {
	width: 100%;
    clear: both;
    float: left;
    margin-bottom: 40px;	
}
.roadmapbox img {
    max-width: calc(50% - 50px) !important;
	MAX-HEIGHT: 400px;
}

.roadmapboxbody {
    width: 50%;
    text-align: justify;
	padding-right: 50px;
}
.roadmapbox:nth-child(odd) .roadmapboxbody {
	float: right;
	padding-left: 50px;
	padding-right: 0px;
}
.roadmapbox:nth-child(even) img  {
    float: right;
}

.gridlet b {
	display: inline-block;
    width: 25px;
}

body * {
	font-family: console;
}

.recaptcha {
	background: rgba(0,0,0,0.8);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 400;
}

.rec-cont {
	border: 1px solid #d3d3d3;
    width: 300px;
    height: 75px;
    border-radius: 3px;
    box-shadow: 0 0 4px 1px rgb(0 0 0 / 8%);
    -webkit-box-shadow: 0 0 4px 1px rgb(0 0 0 / 8%);
    -moz-box-shadow: 0 0 4px 1px rgba(0,0,0,0.08);
    background: #f9f9f9;
    margin-left: calc(50% - 150px);
    margin-top: calc(50vh - 37.5px);
	color: black;	
}
.clicked .rec-cont {
    margin-top: calc(50vh - 230px);
}

.con-header {
    background: #488de8;
    padding: 20px;
    color: white;	
}
.con-header span {
	display: block;	
}
.con-header span:last-child {
    font-size: 25px;
    font-weight: 900;
    margin-top: 10px;
}

.con-body {
    background-image: url(../images/codeerr.jpg);
    overflow: hidden;
    background-size: 100%;	
}
.con-body span {
    float: left;
    width: 25%;
    height: 76px;
    border: 1px solid #f9f9f9;
	cursor: pointer;
    transition: all 0.6s ease;
	transform: scale(1);
}
.con-body span.active {
    background: rgba(255,255,255,0.2);
    transform: scale(0.9);
}

.rec-left {
    height: 74px;
    width: 227px;
	display: inline-block;
	vertical-align: top;
}
.rec-left span {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    height: 74px;
    vertical-align: top;
}
.rec-right span {
	display: inline-block;
    width: 100%;
}
.rec-right span:first-child {
    background: url(https://www.gstatic.com/recaptcha/api2/logo_48.png);
    background-repeat: no-repeat;
    height: 32px;
    background-size: 32px;
    background-position: center;
    margin-top: 13px;
}

.rec-right span:last-child {
	cursor: default;
    font-family: Roboto,helvetica,arial,sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 10px;
    margin-top: 5px;
    text-align: center;
}
.rec-left span div.checkbox  {
    width: 28px;
    height: 28px;
    margin: 0 12px 2px 12px;
    background: white;
    border: 1px solid #979797;
    border-radius: 3px;
}
.rec-left span div.checkbox.failed  {
    border: 2px solid red;
}
.rec-left span div.checkbox.active  {
    background-image: url(../images/succes-rec.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
}
.rec-right {
    display: inline-block;
    height: 74px;
    vertical-align: top;
    width: 70px;
}
.recaptcha-con {
	height: 390px;
    background: white;
    border-radius: 3px;
}





.mintImg img {
	height: auto !important;
    width: 100% !important;	
}

.mintImg {
    float: right;
    margin-left: 50px;
    margin-bottom: 50px;	
}

.etherscan {
    margin-top: 20px;
    display: flex;
    text-align: center;
}
.etherscan img {
    width: auto !important;
    height: 20px;
    display: inline-block;
    margin-left: 10px;
}

#menu {
    position: absolute;
    right: 120px;
    top: 50px;
    z-index: 99;
    text-align: right;
    font-size: 18px;
}
#menu .submenu a {
    color: black !important;
    padding: 5px 0;
    display: block;
}
#menu .submenu:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #63de00;
    position: absolute;
    left: 10px;
    top: -7px;
}

#menu .submenu a:hover {
	text-decoration: underline !important;
}
#menu .submenu {
    position: absolute;
    left: 5px;
    margin-top: 15px;
    background: #63de00;
    text-align: left;
    padding: 15px;
    color: black;
    box-shadow: 0px 0px 25px #63de00;
	transition: all 0.3s ease;
	opacity: 0;
	transform: translateY(-15px);
	visibility: hidden;
    min-width: 100px;
}

.has-submenu > a {
	padding-right: 11px;
}
.has-submenu > a:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #ffffff;
    position: absolute;
    right: 0;
    top: 8px;
}
.has-submenu:hover > a:after {
    border-top: 5px solid #63de00;
}

#menu div:hover > .submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#menu > div {
    display: inline-block;
    padding: 0 5px;
    position: relative;
    padding-bottom: 26px;
}
#menu a {
	text-decoration: none !important;
	transition: all 0.3s ease;
}
#menu div:hover > a,
#menu a.active,
#menu a:hover {
    color: #63de00;
}
#menu a:before{
	content: '/';
	color: white !important;
    margin-right: 10px;
}
#menu a:first-child:before{
	display: none;
}





#pexeso {
	display: none;
}
#pexeso img {
    display: inline;
    width: 100%;
}

.closepexeso {
    position: absolute;
    right: 15px;
    background: black;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 50;
    border-radius: 50px;
}
#boxcard {
    width: 100%;
    z-index: 1;
    text-align: center;
    max-width: 550px;
    margin: 0 auto;
}
#boxbutton {
    text-align: center;
    padding: 20px;
	display: none !important;
}
#boxbutton .link {
    font-size: 18px;
    color: #ffffff;
    text-decoration: none;
    background: #0066cc;
    padding: 5px 10px;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: .5em;
    border-radius: 0.5em;
}
#boxcard div {
    float: none;
    display: inline-block;
    width: 95px;
    height: 95px;
    background: transparent;
    margin: 0px;
    padding: 5px;
    border: 1px solid #4a4a4a;
    cursor: pointer;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: .5em;
    border-radius: 0.5em;
    -webkit-box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
    z-index: 2;
    vertical-align: top;
    margin-bottom: 6px;
	position: relative;
}

#boxcard div:before {
	content: '/A1';
    position: absolute;
    left: 5px;
    background: #63de00;
    color: black;
    padding: 2px 5px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 11px;
}
#boxcard div:nth-child(2):before {
	content: '/A2';
}
#boxcard div:nth-child(3):before {
	content: '/A3';
}
#boxcard div:nth-child(4):before {
	content: '/A4';
}
#boxcard div:nth-child(5):before {
	content: '/A5';
}



#boxcard div:nth-child(6):before {
	content: '/B1';
}
#boxcard div:nth-child(7):before {
	content: '/B2';
}
#boxcard div:nth-child(8):before {
	content: '/B3';
}
#boxcard div:nth-child(9):before {
	content: '/B4';
}
#boxcard div:nth-child(10):before {
	content: '/B5';
}


#boxcard div:nth-child(11):before {
	content: '/C1';
}
#boxcard div:nth-child(12):before {
	content: '/C2';
}
#boxcard div:nth-child(13):before {
	content: '/C3';
}
#boxcard div:nth-child(14):before {
	content: '/C4';
}
#boxcard div:nth-child(15):before {
	content: '/C5';
}

#boxcard div:nth-child(16):before {
	content: '/D1';
}
#boxcard div:nth-child(17):before {
	content: '/D2';
}
#boxcard div:nth-child(18):before {
	content: '/D3';
}
#boxcard div:nth-child(19):before {
	content: '/D4';
}
#boxcard div:nth-child(20):before {
	content: '/D5';
}


canvas {
	outline: none !important;
}
#pacman {
		display: none;
        height: 400px;
        width: 342px;
        margin: auto;
		outline: none !important;
}
@font-face {
	    font-family: 'BDCartoonShoutRegular';
        src: url('../fonts/BD_Cartoon_Shout-webfont.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal;
      }
.keys {
    background: #63de00;
    padding: 10px;
    display: block;
    margin-top: 20px;	
}
.keys h3 {
    margin-top: 0px;	
}
.bottom {
	margin-top: 0;
    margin-bottom: 0;
    padding-left: 10px;
    position: absolute;
    bottom: 40px;
    right: 40px;
}
.not-front .bottom {
position: relative;
    margin: 0;
    width: 100%;
    text-align: center;
    right: 0;
    clear: both;
    margin-top: 50px;
    float: left;
}
.bottom a {
	margin: 0 10px;	
}
#page {
	padding: 0;
	z-index: 50;
	width: 100%;
	max-width: 700px;
}

.console {
	font-family: font;
	width: 100%;
	display: flex;
	flex-direction: row;
	margin-bottom: 40px;
	margin-left: 40px;
}

.console header {
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	background-color: #1c1c1c;
	height: 45px;
	line-height: 45px;
	text-align: center;
	color: #DDD;
	
    background-color: rgb(35 35 35 / 47%);
    color: rgb(201, 196, 189);
    border-color: rgb(255 255 255 / 0%);
}
.console header p {
	margin: 0;
}

.popup {
	position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);	
}
.closepopup {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 20px;
    padding: 10px;
	cursor: pointer;
}
.bodypopup {
    color: #63de00;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 50px;
    background: black;
    padding: 50px 30px;
    border: 5px solid #63de00;
    position: relative;
    line-height: 30px;
	white-space: pre-wrap;
}
.bodypopup img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
	margin: 0 auto;
    display: block;
}

.console .consolebody {
	box-sizing: border-box;
	padding: 20px 20px 20px 40px;
	position: relative;
	height: 450px;
	min-height: 220px;
	background-color: rgb(0 0 0 / 50%);
	color: #63de00;
	max-height: 450px;
	overflow: hidden;
	overflow-y: scroll;
}
.console .consolebody.os  {
	padding: 15px;
	padding-top: 60px;
}
.console .consolebody.os p  {
	display: none !important;
}

.console .consolebody::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
}

.console .consolebody::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background-color: #343434;
}

.console .consolebody p {
	margin: 0;
	line-height: 20px;
	font-family: console;
	font-weight: bold;
	font-size: 16px;
}

.console .consolebody p a {
	color: #7afff9;
	text-decoration: none;
	font-family: console;
}

input {
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	width: 100%;
	padding: 14px;
	border: none;
	background: rgb(0 0 0 / 70%);
	outline: none;
	border-top: 1px solid #242424;
	padding-left: 40px;
	color: #63de00;
	font-family: console;
	font-weight: bold;
	background: rgb(24 26 27 / 60%);
}
.vpn {
	width: initial;
    max-width: initial;
    display: inline-block;
	position: absolute;
    top: 70px;
	display: none;
}
.vpn div {
	opacity: 0;
}

.inputbefore {
	position: absolute;
	color: #63de00;
	padding: 16px;
}

.blinking {
	animation: blink-animation 1s steps(5, start) infinite;
	-webkit-animation: blink-animation 1s steps(5, start) infinite;
}

footer {
	position: relative;
}

@keyframes blink-animation {
	to {
		visibility: hidden;
	}
}

@-webkit-keyframes blink-animation {
	to {
		visibility: hidden;
	}
}

.writetext {
	color: #555555;
}

.writetext.blinking {
	color: #63de00;
	margin-left: -20px !important;
}

.left {
	float: left;
	width: 100%;
	max-width: 700px;
}

.right {
	float: right;
	width: initial;
}
.right * {
	color: white;
}
.bottom * {
	color: white;
}

.codeshere {
	margin: 0px;
	padding: 20px;
	line-height: 25px;
	display: none;
}
.codeshere ul {
    margin-top: 0;
    padding-left: 10px;
}
.codeshere ul li {
    list-style: none;
    color: #8f8f8f;
    font-size: 13px;
    line-height: 20px;
}
.dark .codeshere * {
	color: white;
}

h3 {
    margin-top: 10px;
    margin-bottom: 5px;
}

h1 {
	display: block;
	margin: 0 auto;
	font-size: 40px;
	font-family: font;
	color: white;
	margin-bottom: 20px;
	position: absolute;
	top: 40px;
	left: 40px; 	
    z-index: 99;
}
h1 a {
	font-family: font;
	text-decoration: none !important;
}
.dark h1 {
	color: #fff;
}

.owncode {
	color: #ffd60f;
}
.owncode:before,
.phpcode:before {
	content: ">";
    position: relative;
    margin-left: -20px;
    margin-right: 12px;
}

.writetext:before {
}

.not-front .console .consolebody {
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}


.phrases span {
	background: red;
    padding: 5px 22px;
    font-size: 18px;
    display: inline-block;
}
.phrases span.green {
	background: green;
}
.phrases {
	margin-bottom: 20px;
}

.hacking-animation {
  /* background: #151515; */
  color: #eee;
  height: 100%;
  z-index: -5;
}
.hacking-animation__text {
  top: 0;
  font-family: "Share Tech Mono", monospace;
  color: #eee;
  font-size: 16px;
  left: 0;
  line-height: 1.5rem;
  padding: 0;
  position: absolute;
  right: 0;
	white-space: break-spaces;
}
.hacking-animation__character {
  animation: type 1s linear;
  color: #45aae7;
}

@keyframes type {
  0% {
    background: #fff;
    color: #eee;
  }
  5% {
    background: transparent;
    color: #fff;
  }
  100% {
    background: transparent;
    color: #45aae7;
  }
}


@keyframes type {
  0% {
    background: #fff;
    color: #eee;
  }
  5% {
    background: transparent;
    color: #fff;
  }
  100% {
    background: transparent;
    color: #45aae7;
  }
}


/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #141414; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #63de00; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #63de00; 
}



.page-title {
    color: #63de00;
    font-size: 40px;
    text-shadow: -3px -2px 25px #63de00;	
	margin-bottom: 50px;
}
.content-box {
    BACKGROUND: rgb(30 30 30 / 50%);
    PADDING: 30px;
    margin-bottom: 30px;
    border-left: 5px solid #63de00;
	font-weight: 100;
}
.content-box n {
    font-weight: 900;
}
.content-box H3 {
    color: #63de00;
    font-size: 20px;
    text-shadow: -3px -2px 25px #63de00;
    display: block;
    margin-bottom: 20px;
    margin-top: 10px;
}
.front #container {
	position: absolute;
}
.not-front #container {
    position: relative;
    top: 0;
    margin: 0 auto;
    width: 1000px;
    margin-top: 150px;
    margin-bottom: 100px;
    line-height: 25px;
}
.not-front #container canvas {
	display: none !important;
}
.not-front #container table {
    width: 100%;
}
.not-front.mints #container table td {
	vertical-align: top;
	padding: 10px;
	width: 33%;
}
.not-front.mints #container table td a {
	margin: 0 !important;	
}
.not-front.mints #container table td img,
.not-front.mints #container table td video {
	max-width: 300px;
	margin: 0 !important;
    width: 100%;
	margin-top: 10px !important;
}
.not-front #container a{
    text-decoration: underline;
}
.not-front #container img {
    max-width: 100%;
	margin: 30px 0;
    height: auto !important;  
}
#container_text {
	/* Center the text in the viewport. */
	position: absolute;
	margin: auto;
	width: 100vw;
	height: 80pt;
	top: 0;
	bottom: 0;
	
	/* This filter is a lot of the magic, try commenting it out to see how the morphing works! */
	filter: url(#threshold) blur(0.6px);
	
}

/* Your average text styling */
#text1, #text2 {
	position: absolute;
	width: 100%;
	display: inline-block;
	font-size: 80pt;
	text-align: center;
	user-select: none;
	color: white;
}

.final_reveal,
.dead {
	position: fixed;
    top: 0;
	left: 0;
    background: black;
    width: 100%;
    height: 100%;
	display: none;
	z-index: 500;
}

.final_reveal h2,
.dead h2 {
    margin: 0 auto;
    display: block;
    max-width: 515px;
    font-size: 30px;
	line-height: initial;
	margin-bottom: 40px;
}
.dead h2 {
    max-width: 265px;
}
.final_reveal p,
.dead p {
  	text-align: center;
    position: absolute;
    left: calc(50% - 370px);
    width: 740px;
}

.front #container * {
	color: white;
}
#container p {
	margin-top: 70px;
	font-size: 18px;
	text-align: center;
}

.game-closebutton {
    position: absolute;
    right: 15px;
    background: black;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 50;
    border-radius: 50px;
	
	display: none;
}
.snake-game-container .game-closebutton {
	display: flex;
}
.pacman #pacman .game-closebutton {
	display: flex;
    background: #63d700;
    color: black;
}



/*
	patternLock.js v 0.5.0
	Author: Sudhanshu Yadav
	Copyright (c) 2013 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
	Demo and documentaion on: ignitersworld.com/lab/patternLock.html
*/
.patt-holder{background:#3382c0;-ms-touch-action:none}.patt-wrap{position:relative;cursor:pointer}.patt-wrap li,.patt-wrap ul{list-style:none;margin:0;padding:0}.patt-circ{position:relative;float:left;box-sizing:border-box;-moz-box-sizing:border-box}.patt-circ.hovered{border:3px solid #090}.patt-error .patt-circ.hovered{border:3px solid #BA1B26}.patt-hidden .patt-circ.hovered{border:0}.patt-dots,.patt-lines{border-radius:5px;height:10px;position:absolute}.patt-dots{background:#FFF;width:10px;top:50%;left:50%;margin-top:-5px;margin-left:-5px}.patt-lines{background:rgba(255,255,255,.7);transform-origin:5px 5px;-ms-transform-origin:5px 5px;-webkit-transform-origin:5px 5px}.patt-hidden .patt-lines{display:none}

.mhn-ui-date-time,
.text-center {
    text-align: center
}
*,
:after,
:before {
    box-sizing: border-box
}
.pull-left {
    float: left
}
.pull-right {
    float: right
}
.clearfix:after,
.clearfix:before {
    content: '';
    display: table
}
.clearfix:after {
    clear: both;
    display: block
}
body {
    margin: 0;
    color: #fff;
    background: #9b26af;
    font: 300 14px/18px Roboto, sans-serif
}
a {
    color: inherit;
    text-decoration: none
}
a:hover {
    text-decoration: underline
}
.mhn-ui-wrap {
    width: 300px;
    height: 475px;
    overflow: hidden;
    position: relative;
    margin: 30px auto 0;
    background: url(https://raw.githubusercontent.com/khadkamhn/lock-screen/master/img/mhn-ui-bg.jpg) center no-repeat #2c3e50;
    box-shadow: 0 17px 50px 0 rgba(0, 0, 0, .19), 0 12px 15px 0 rgba(0, 0, 0, .24)
}
.mhn-ui-wrap:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    position: absolute;
    background: rgba(0, 0, 0, .4)
}
.mhn-ui-date-time {
    color: #eee;
    z-index: 100;
    position: relative
}
.mhn-ui-date-time .mhn-ui-time {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 15px
}
.mhn-ui-date-time .mhn-ui-day {
    font-size: 24px;
    margin-bottom: 10px
}
.mhn-ui-date-time .mhn-ui-date {
    font-size: 18px;
    font-weight: 400
}
.mhn-ui-app-time {
    padding: 0 5px;
    font-size: 12px;
    text-align: right;
    margin: -15px -15px auto;
    background: rgba(0, 0, 0, .6)
}
.mhn-lock-wrap {
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    position: absolute
}
.mhn-lock-wrap .mhn-lock-title {
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5)
}
.mhn-lock-wrap .mhn-lock-success {
    color: transparent;
    text-shadow: none
}
.mhn-lock-wrap .mhn-lock-failure {
    color: #f34235
}
.mhn-lock {
    margin: auto;
    background: 0 0
}
.patt-wrap {
    margin: auto;
    overflow: hidden
}
.patt-wrap li {
    transition: all .4s ease-in-out 0s
}
.patt-dots,
.patt-lines {
    transition: background .1s ease-in-out 0s
}
.patt-circ {
    border: 3px solid transparent
}
.patt-dots {
    background: rgba(255, 255, 255, .8)
}
.patt-lines {
    background: rgba(255, 255, 255, .4)
}
.patt-circ.hovered {
    border-color: #ddd;
    background: rgba(255, 255, 255, .2)
}
.patt-error .patt-circ.hovered {
    background: rgba(243, 66, 53, .4);
    border-color: rgba(243, 66, 53, .8)
}
.patt-error .patt-lines {
    background: rgba(243, 66, 53, .5)
}
.patt-success .patt-circ.hovered {
    background: rgba(75, 174, 79, .4);
    border-color: rgba(75, 174, 79, .8)
}
.patt-success .patt-lines {
    background: rgba(75, 174, 79, .5)
}
.mhn-ui-page {
    height: 100%;
    z-index: 200;
    display: none;
    padding: 15px;
    position: relative
}
.mhn-ui-page.page-lock {
    position: initial
}
.mhn-ui-page .mhn-ui-app-title-head {
    padding: 15px;
    font-size: 16px;
    margin: 0 -15px;
    background: rgba(0, 0, 0, .4)
}
.mhn-ui-page .mhn-ui-filter {
    float: right;
    position: relative
}
.mhn-ui-page .mhn-ui-filter .mhn-ui-btn {
    right: 0;
    top: -5px;
    padding: 5px;
    cursor: pointer;
    position: absolute;
    display: inline-block
}
.mhn-ui-page .mhn-ui-filter .mhn-ui-btn.active {
    background: teal
}
.mhn-ui-page .mhn-ui-filter-list {
    right: 0;
    top: 20px;
    padding: 5px;
    width: 180px;
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, .8)
}
.mhn-ui-page .mhn-ui-filter-list>div {
    display: block;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px
}
.mhn-ui-page .mhn-ui-filter-list>div.active {
    color: teal
}
.mhn-ui-page .mhn-ui-filter-list>div:hover {
    background: teal
}
.mhn-ui-page .mhn-ui-filter-list>div.active:hover {
    background: 0 0
}
.mhn-ui-page .mhn-ui-row {
    margin-top: 15px
}
.mhn-ui-page .mhn-ui-row:after,
.mhn-ui-page .mhn-ui-row:before {
    content: '';
    display: table
}
.mhn-ui-page .mhn-ui-row:after {
    clear: both;
    display: block
}
.mhn-ui-page .mhn-ui-col {
    width: 25%;
    float: left;
    margin-bottom: 15px
}
.mhn-ui-bottom-link-bar {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    position: absolute;
    text-align: center;
	display: flex;
    align-items: center;
    justify-content: center;
}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn {
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 28px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
	display: flex;
    align-items: center;
    justify-content: center;
}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:nth-child(1) {
    margin-right: 15px
}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:nth-child(2) {
    margin-left: 15px
}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:hover {
    color: #ccc;
    background: rgba(0, 0, 0, .8)
}
.mhn-ui-icon {
    text-align: center
}
.mhn-ui-icon span {
    width: 55px;
    height: 55px;
    margin: auto;
    display: block;
    font-size: 28px;
    cursor: pointer;
    line-height: 55px;
    text-align: center;
    border-radius: 15px;
    background: rgba(0, 0, 0, .3);
    transition: background .4s ease-in-out 0s;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset;
	display: flex;
    justify-content: center;
    align-items: center;
}
.mhn-ui-icon .mhn-ui-icon-title {
    margin-top: 5px;
    cursor: default;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5)
}
.mhn-ui-page.page-author img {
    padding: 8px;
    margin-top: 15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
	max-width: 128px;
	height: auto;
}
.mhn-ui-credit {
    padding: 5px;
    font-size: 13px;
    margin-top: 15px;
    background: rgba(0, 0, 0, .2);
    border: 1px solid rgba(0, 0, 0, .2);
	overflow-wrap: anywhere;
}
.mhn-ui-credit p {
    margin: 0;
    color: #aaa
}
.mhn-ui-credit a {
    font-weight: 500
}
.mhn-ui-dialog-wrap {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 1000;
    position: absolute;
    background: rgba(0, 0, 0, .7)
}
.mhn-ui-dialog {
    padding: 15px;
    background: #000;
    margin: 50% 0 auto
}
.mhn-ui-dialog .mhn-ui-dialog-title {
    font-size: 18px;
    font-weight: 500
}
.mhn-ui-dialog .mhn-ui-dialog-btn {
    padding: 5px;
    min-width: 65px;
    cursor: pointer;
    margin-right: 10px;
    text-align: center;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, .8)
}
.mhn-ui-dialog .mhn-ui-dialog-btn:hover {
    background: #009688;
    text-decoration: none
}
.mhn-ui-info {
    margin: 30px 0;
    font-size: 16px;
    text-align: center;
	width: 100%;
    z-index: 50;
}
.mhn-ui-date,
.mhn-ui-time {
    animation: zoomIn 1s
}
.mhn-ui-day {
    animation: rubberBand 1s
}
.mhn-lock-failure {
    animation: zoomIn .4s
}
.patt-circ:nth-child(1),
.patt-circ:nth-child(2),
.patt-circ:nth-child(3) {
    animation: fadeInUp .4s
}
.patt-circ:nth-child(4),
.patt-circ:nth-child(5),
.patt-circ:nth-child(6) {
    animation: fadeInUp .6s
}
.patt-circ:nth-child(7),
.patt-circ:nth-child(8),
.patt-circ:nth-child(9) {
    animation: fadeInUp .8s
}
.mhn-ui-icon span {
    animation: zoomIn .6s
}
.mhn-ui-bottom-btn {
    animation: bounceInUp .8s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(1) {
    animation: fadeInUp .4s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(2) {
    animation: fadeInUp .5s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(3) {
    animation: fadeInUp .6s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(4) {
    animation: fadeInUp .7s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(5) {
    animation: fadeInUp .8s
}
.phone_wrapper {
	position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: black;
    z-index: 500;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	display: none;
}
#run_fn {
	display: none;
}
.code_weird_wrapper {
	max-width: 295px;
    margin: 0 auto;
    margin-top: 30px;
}
body {
	background: black;
}

body.not-front {
    background: black;
    background-image: url(../images/bg.jpg);
    background-size: cover;
}

.main_version {
	font-size: 14px;
	cursor: pointer;
}

.versions {
	position: relative;
    margin-left: 15px;
}
.versions .dropdown {
	position: absolute;
    left: 0;
    top: 50px;
	display: none;
	    background: black;
    padding: 15px;
}
.versions.opened .dropdown {
	display: block;
}
.versions .dropdown a {
    font-size: 14px;
    display: block;
    line-height: 165%;
	font-family: console;
}

.not-front .dropdown {
	display: none;
}
.arrow_down {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    vertical-align: middle;
    margin-left: 8px;
    margin-top: -5px;
}


.invaders_container {
    position: absolute;
    z-index: 500;
    width: 100%;
    height: 100%;
	background: black;
	display: none;
}
.invaders .invaders_container {
	display: block;
}
.invaders_container canvas {
    display: block;
    margin: 10vh auto;
    background-color: #000;
}

#menuicon {
    display: none;
    background-image: url(../images/menuicon.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 120px;
    top: 45px;
    z-index: 300;
}

@media (max-width: 1160px) {
	
	#menu {
		font-size: 16px;
	}
	h1 {
		font-size: 30px;
	}
	.not-front #container {
		width: 100%;
		padding: 0 20px;
		margin-bottom: 50px;
	}
	html,
	body {
		overflow-x: hidden;
	}
}

@media (max-width: 1000px) {
	.left {
		width: 70%;
	}

	.right {
		width: 30%;
	}
	#menuicon {
		display: block;
	}
	#menu > div {
		display: block;
		padding: 0 5px;
		position: relative;
		padding-bottom: 0;
	}
	
	#menu .submenu {
	    visibility: visible;
		transform: none !important;
		opacity: 1;
		position: relative;
		left: 0;
		width: 100%;
		text-align: center;
		margin: 0;
		padding: 0;	
	}
	#menu .submenu div {
	    padding: 0 5px;
		position: relative;
		padding-bottom: 0;
	}
	.has-submenu {
		padding: 0 !important;
	}
	.has-submenu > a:after {
		display: none;
	}
	#menu .submenu a {
		color: black !important;
		padding: 10px;
		display: block;
	}
	#menu {
		display: none;
		background: #63de00;
		position: absolute;
		left: 0;
		width: 100%;
		top: 0;
		margin-top: 100px;
		text-align: center;
		padding: 20px;
		color: black;
		font-weight: bold;
	}
	#menu.open {
		display: block;
	}
	
	#menu a {
	    display: block;
		width: 100%;
		padding: 10px;
	}
	#menu a.active, #menu a:hover {
		color: #ffffff;
	}
	#menu a:before {
		display: none !important;
	}
}

@media (max-width: 900px) {
	.console {
		width: 100%;
	}
	.mintbuttons a {
		width: 100%;
	}
	.mintcontainer button {
		width: 100%;
	}
}

@media (max-width: 768px) {
		.front .bottom {
		position: relative;
			margin: 0;
			width: 100%;
			text-align: center;
			right: 0;
			clear: both;
			margin-top: 80px;
			float: left;
		}
	.roadmapcase:before {
		display: none;
	}
	.roadmapboxbody {
		width: 100%;
		text-align: justify;
		padding: 0 !important;
		margin: 10px 0 !important;
		float: none !important;
	}
	.roadmapbox img {
		max-width: 100% !important;
		MAX-HEIGHT: inherit;
		float: none !important;
	}
	h1 {
		margin-top: 20px;
		max-width: calc(100% - 80px);
		left: 15px;
		top: 0px;
		line-height: initial;
	}
	.not-front.mints #container table td {
		vertical-align: top;
		padding: 10px;
		width: 100%;
		display: block;
		text-align: center;
	}
	.etherscan {
		margin-top: 20px;
		display: block;
		text-align: center;
	}
	.not-front.mints #container table td img, .not-front.mints #container table td video {
		display: inline-block;
	}
	.etherscan {
		margin-top: 0;
	}
	.not-front #container {
		margin-top: 120px;
	}
	.page-title {
		font-size: 30px;
		text-align: center;
	}
	.mintImg {
		float: left;
		margin-left: 0;
		margin-bottom: 20px;
		width: 100%;
	}
	#menuicon {
		right: 90px;
		top: 20px;
	}
	#language {
		position: absolute;
		right: 20px;
		top: 20px;
	}
	#container canvas {
		width: 100% !important;
		height: 100% !important;
	}
	#mint {
		display: none !important;
	}
	.console .consolebody p {
		margin: 0;
		line-height: 16px;
		font-family: console;
		font-weight: bold;
		font-size: 14px;
	}
	.gridlet b {
		display: inline-block;
		width: 12px;
		font-size: 13px;
	}
	.console {
		font-family: font;
		width: 100%;
		height: inherit;
		display: block;
		flex-direction: row;
	}
	.left {
		width: 100%;
	}
	.right {
		width: 100%;
	}
	.codeshere {
		margin: 0;
		height: 100%;
		padding: 0;
		border-radius: 15px;
		line-height: 25px;
	}
	.codeshere div {
		display: inline-block;
		margin-right: 10px;
	}
	.console {
		margin-bottom: 0px;
		margin-left: 0px;
	}
	.console .consolebody {
		height: 220px;
	}
	.front {
		padding: 0px;
	}
	#page {
		padding: 15px;
	}
	#boxcard div {
		width: 15VW;
		height: 15VW;
	}
	.pexeso .console .consolebody {
		box-sizing: border-box;
		padding: 20px 0px 0px 0px;
	}
	#boxcard div:before {
		left: 5px;
		padding: 0px 3px;
		font-size: 2vw;
	}
}

@media (max-width: 743px) {
	h1 {
		margin-top: 25px;
		font-size: 17px;
	}
}