@import url('https://fonts.googleapis.com/css2?family=Cherry+Swash:wght@400;700&family=Press+Start+2P&display=swap');
@import url('https://fonts.cdnfonts.com/css/open-dyslexic');

* {
  box-sizing: border-box;
}
html { scroll-behavior: smooth; }

html, body { background-color: #212529; }

body {
	color: #edeec6;
	font-family: 'Open-Dyslexic', sans-serif;
	margin: 0;
	overflow-x: hidden;
}

a { color: #f72585; }

.container-fluid { margin: 0; padding: 0; }
.row { overflow-x: hidden; }

h1, h3, h4 {
	font-family: "Press Start 2P", system-ui; 
	font-weight: 400; 
	font-style: normal; 
	text-transform: uppercase;
}

h1 { margin: 8px 2px 5px 2px; background: #f72585; background: linear-gradient(90deg, #f72585 0%, #ff595e 20%, #ffca3a 40%, #8ac926 60%, #1982c4 80%, #6a4c93 100%); text-decoration: none; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.5px #f72585; }

section .label, h2 {
	font-family: "Cherry Swash", serif;
	font-weight: 700;
	font-style: normal;
}

section .game-description {
	text-align: justify;
	font-size: 100%;
}

section .game-description .label {
	font-family: "Cherry Swash", serif;
	font-weight: 400;
	font-style: normal;
}

.color-dark { background-color: #342894; color: #edeec6;}
.color-pink { background-color: #f21986; color: #edeec6; text-shadow: 2px 2px #342894; text-align: right; border-top: 5px solid #f21986; }
.color-red { background-color: #FB5366; color: #edeec6; text-shadow: 2px 2px #342894; text-align: right; border-top: 5px solid #FB5366;}
.color-green { background-color: #8EC946; color: #342894; text-shadow: 1px 1px #edeec6; text-align: left; border-top: 5px solid #8EC946;}
.color-yellow { background-color: #fdc758; color: #342894; text-shadow: 1px 1px #edeec6; text-align: left; border-top: 5px solid #fdc758;}
.color-blue { background-color: #2b87c0; color: #edeec6; text-shadow: 2px 2px #342894; text-align: right; border-top: 5px solid #2b87c0;}
.color-purple { background-color: #695090; color: #edeec6; text-shadow: 2px 2px #342894; text-align: left; border-top: 5px solid #695090;}

section:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #212529;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  z-index: -1;
}

.color-pink:after {
	-webkit-transform: skew(-50deg);
	-ms-transform: skew(-50deg);
	transform: skew(-50deg);
	background-color: rgba(242, 25, 134, 0.9);
}

.color-red:after {
	-webkit-transform: skew(-35deg);
	-ms-transform: skew(-35deg);
	transform: skew(-35deg);
	background-color: rgba(251, 83, 102, 0.9);
}

.color-blue:after {
	-webkit-transform: skew(150deg);
	-ms-transform: skew(150deg);
	transform: skew(150deg);
	background-color: rgba(43, 135, 192, 0.9);
}

.color-green:after {
	-webkit-transform: skew(40deg);
	-ms-transform: skew(40deg);
	transform: skew(40deg);
	background-color: rgba(142, 201, 70, 0.9);
}

.color-yellow:after {
	-webkit-transform: skew(-140deg);
	-ms-transform: skew(-140deg);
	transform: skew(-140deg);
	background-color: rgba(253, 199, 88, 0.9);
}

.color-purple:after {
	-webkit-transform: skew(40deg);
	-ms-transform: skew(40deg);
	transform: skew(40deg);
	background-color: rgba(105, 80, 144, 0.9);
}


#games-menu {
	position: sticky;
	top: 0;
	padding: 10px 20px;
	background: #212529;
	color: #edeec6;
	z-index: 99;
}

section {
	display: flex;
	width: 100vw;
	height: 100vh;
	border-top: 5px solid #342894;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	
	background-color: #342894; 
	background-size: cover; 
	transition: background-image 0.3s ease;
}

#games-menu-bar {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 3000;
	text-transform: uppercase;
	text-align: right;
	
	-webkit-transition: all ease 0.1s;
	transition: all ease 0.1s;
}
#games-menu-bar.freeze {
	right: -112px;
}

#games-menu-bar a {
	float: right;
	clear: both;

	display: block;
	height: 2em;
	line-height: 2em;
	text-decoration: none;
	padding: 0 16px;
	background: rgba(0,0,0,0.5);
	color: #fff;
	white-space: nowrap;

	-webkit-transition: all ease 0.1s;
	transition: all ease 0.1s;
}
#games-menu-bar.freeze a {
	float: none;
	width: 128px;
}

#games-menu-bar a:hover,
#games-menu-bar a:focus {
	background: rgba(52, 40, 148, 0.749);
	font-size: 1.2em;
}
#games-menu-bar a span {
	display: none;
	font-weight: 700;
	position: relative;
	width: 48px;
	left: -16px;
	text-align: center;
	background: rgba(0,0,0,0.1);
}
#games-menu-bar a.active {
	background: #342894;
	font-size: 1.4em;
	font-weight: 700;
}
#games-menu-bar.freeze a span {
	display: inline-block;
}
#games-menu-bar a.active span {
	display: inline-block;
	background: #342894;
}
#games-menu-bar a.active span:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	background: rgba(255,255,255,0.25);
}
#games-menu-bar.freeze a.active span:before {
	display: none;
}

@media (max-width: 767.98px) {
  section .game-description {
	  font-size: 90% !important;
  }
  
  .color-pink:after {
	  -webkit-transform: none !important;
	  -ms-transform: none !important;
	  transform: none !important;
	  background-color: rgba(242, 25, 134, 0.9) !important;
  }
  
  .color-red:after {
	  -webkit-transform: none !important;
		-ms-transform: none !important;
		transform: none !important;
	  background-color: rgba(251, 83, 102, 0.9) !important;
  }
  
  .color-blue:after {
	  -webkit-transform: none !important;
		-ms-transform: none !important;
		transform: none !important;
	  background-color: rgba(43, 135, 192, 0.9) !important;
  }
  
  .color-green:after {
	 -webkit-transform: none !important;
	   -ms-transform: none !important;
	   transform: none !important;
	  background-color: rgba(142, 201, 70, 0.9) !important;
  }
  
  .color-yellow:after {
	  -webkit-transform: none !important;
		-ms-transform: none !important;
		transform: none !important;
	  background-color: rgba(253, 199, 88, 0.9) !important;
  }
  
  .color-purple:after {
	  -webkit-transform: none !important;
		-ms-transform: none !important;
		transform: none !important;
	  background-color: rgba(105, 80, 144, 0.9) !important;
  }
}

@media print {
	section {
		visibility: visible !important;
	}
}