/* Variables */
:root {
	--main-color: rgb(32,36,255);       /* cobal blue */
	--secondary-color: rgb(85,186,255); /* light blue */
	--accent-color: rgb(255,204,0);     /* yellow */
	--text-color: rgb(255,255,255);     /* white */
	--max-width: 1400px;                /* set on body for big screens */
	}

/* Resets */
html, body, div, h1, h2, p, span, main, button {
	margin: 0; 
	padding: 0;
	}

.the-renewed-mind { 
	position: absolute; 
	width: 100%;
	height: 100% !IMPORTANT;

	max-width: var(--max-width); 
	margin: 0 auto;
	font-size: 120%;
	font-family: 'Encode Sans Semi Condensed', Verdana, sans-serif;
	font-weight: 400;
	text-align: center;
	line-height: 1.6;
	color: var(--text-color);
  	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;   
	box-sizing: border-box; 
	}

footer {
	margin: 0; 
	padding: 0;   
	box-sizing: border-box;   
	}

.the-renewed-mind h1 {
	color: #cccc00;
	font-size: 5vw; 
	line-height: 1; 
	text-shadow: -1px .02em 0 rgba(0,0,0,.5);  
	}

.the-renewed-mind h2 {
	color: #FFFFCC;
	font-size: clamp( 1rem, 1.6vw, 4vh);  
	font-weight: normal;
	text-shadow: -1px .02em 0 rgba(0,0,0,.5); 
	}

a, a:visited, a:active, a:hover {
	color: inherit; 
	text-decoration: none;
	}

.the-renewed-mind button {
	color:var(--text-color);
	font-family:inherit;
	font-family: 'Encode Sans Semi Condensed', Verdana, sans-serif;
	text-transform: uppercase;
	background-color:var(--main-color);
	box-shadow:none;
	border:none;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	padding:.6em .8em;
	margin-top: 1em;
	cursor: pointer; 
	}


html, body {
	width: 100%; 
	height: 100%;
	}

html {
  	background: #0b5d59 radial-gradient(circle at center, #66003b 0%, #65003b 8.1%, #62013a 15.5%, #5e0238 22.5%, #580435 29%, #510632 35.3%, #4a082f 41.2%, #420a2b 47.1%, #3b0d27 52.9%, #330f24 58.8%, #2b1120 64.7%, #25131d 71%, #1f151b 77.5%, #1b1619 84.5%, #181717 91.9%, #171717 100%);
	}

.the-renewed-mind, body {
	max-width: var(--max-width); 
	margin: 0 auto; 
	}

.top-bar {
	position: fixed;
	max-width: var(--max-width);
	margin: auto;
	top: 0; left: 0; right:0;
	padding: .5em 1em;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	z-index: 100;  
	}

.page {
	display: block; 
	position: relative;
	width: 100%; 
	height: 100%;
	overflow-x: hidden;   
	}

.flex-container {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-end;
	justify-content: center;
	height: 100%; 
	}

.underlined, .action-btn {
	padding: .2em 0;
	border-bottom: 2px solid var(--secondary-color);  
	}

.action-btn_primary {
	text-transform: uppercase;  
	}

.action-btn:hover {
	color: var(--secondary-color);
	cursor: pointer; 
	}

.modal {
	position: fixed;
	top: 50%; left: 50%;
	transform: translateX(-50%) translateY(-50%);
	max-width: 30em;
	padding: 2em 3em;
	background-color: #fff;
	color: var(--main-color);
	z-index: 100; 
	}

.modal > button {
	width: 100%;
	color: #fff;  
	}

.shrink {
	animation: shrink 600ms ease-in-out forwards;  
	}

@keyframes shrink {
	0% {
		transform: translateX(-50%) translateY(-50%) scale(1);
		}
	20% {
		transform: translateX(-50%) translateY(-50%) scale(1.2);
		}
	100% {
		transform: translateX(-50%) translateY(-50%) scale(0);
		}
	}

.fade-in {
	animation: fadeIn 400ms ease-in-out forwards;
	}

@keyframes fadeIn {
	from {
		opacity: 0;
		}
	to {
		opacity: 1;
		}
	}

footer {
	padding: 2.5em 1.4em; 
	}

.the-renewed-mind p {
	font-size: clamp( 0.9rem, 1vw, 2.5vh); 
	color: #cccc00;
	text-shadow: -1px .02em 0 rgba(0,0,0,.5);
	max-width: 48em;
	margin: 1.2em auto;  
	}



/* Game */
.game-counter-panel {
	font-size: clamp( 0.9rem, 1vw, 2.5vh);
	padding: .2em .8em;
	border: 1px solid var(--secondary-color); 
	}

.game-counter {
	color: #cccc00;
	font-size: 1.2em;
	display: inline-block;
	transform: translateY(1px);
	width: 1.4em;
	text-align: center; 
	}

#game-canvas {
	position: absolute;
	top: 0; left: 0;
	width: 100%; 
	height: 100%;
	cursor: grab;
	overflow: hidden; 
	}

.bug {
	display: block;
	height: 30px;
	position: absolute;
	top: 50%; left: 50%;
	transform: rotate(0deg);
	transform-origin: center center;
	z-index: 0; 
	}

/* Crawling animation */
#bug-legs {
	transform-origin: center center;
	animation: crawlcrawlcrawl 80ms infinite ease-in-out both;
}
@keyframes crawlcrawlcrawl {
	from {
		transform: translateX(0) translateY(0) rotate(20deg);
	}
	to {
		transform: translateX(0) translateY(0) rotate(-15deg);
	}
}





 


.open,
.close {
  background: linear-gradient(#92e8bb, #77e4b7);
  border: 1px solid #77e4b7;
  border-bottom: 4px solid #3cddb4;
  border-radius: 2px;
  color: #fff;
  font-weight: 600;
  padding: 0.5em 1em 0.4em;
  text-shadow: 1px 1px 0 #3cddb4;
  transition: 0.3s;
  float: right; 
	bottom: 0; 
	margin-bottom: 5px; 
	float: right; 
	right: 0; 
	margin-right: 12px;
} 
.open:hover,
.close:hover {
  filter: brightness(90%) contrast(120%);
}
.open:focus,
.close:focus {
  box-shadow: 0 0 10px #92e8bb;
  outline: none;
}

.close {
	z-index: 120000000000 !important; 
	position: absolute !important;
  background: linear-gradient(#fa5433, #fa3333);
  border: 1px solid #fa3333;
  border-bottom: 4px solid #d60505;
  text-shadow: 1px 1px 0 #d60505;
}
.close:focus {
  box-shadow: 0 0 10px #fa5433;
}


/** BUTTON FORMAT **/


.close {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
		-webkit-tap-highlight-color: transparent;
}

.modal-wrap button {
	width: 75px;
	height: 35px;
	cursor: pointer;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #7f5a83;
	background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%);
	background-size: 200% 100%;
	background-position: left;
	background-repeat: no-repeat;
	transition: 500ms; 
}

.modal-wrap button:before {
	content: 'CLOSE';
	color: rgba(255,255,255,0.5);
	font-size: 12px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 30px;
	background-color: #1b2845;
	background-image: linear-gradient(315deg, #1b2845 0%, #274060 74%);
	transition: 500ms;  
}

.modal-wrap button:hover {
	background-position: right;
}

button:hover:before {
	color: rgba(255,255,255,0.8);
}

.modal-wrap button:focus {
	outline: none;
}
/** END OF BUTTON FORMAT **/