@import url('https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap');
@import url('https://fonts.cdnfonts.com/css/univers');
@import url('https://fonts.googleapis.com/css2?family=Nabla&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
	box-sizing: border-box;

	margin: 0 auto;

	overflow: hidden;
}

body {
	background-color: #000;
}

p {
	margin-block-start: 0.5vw;
	margin-block-end: 0.5vw;
}

#content-container {
	margin: 0 auto;
	background-color: #000;
	width: 100%;
	max-width: 1000px;
	padding-top: 65%;
	position: relative;

}
#content-container::after {
	display: block;
	padding-bottom: 100%;
}

#content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

#canvas {

	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	/*border: 1px solid white;*/
	image-rendering: pixelated;
}

#canvasCurve {
	display: block;
	position: fixed;
	width: 100%;
	height: 20%;
	z-index: 999;
	/*border: 1px solid white;*/
	pointer-events: none;
	image-rendering: pixelated;
}

#player, #playerContainer{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

#player {
	display: none;
}

/*STREAM SIZE*/
#stream {
	width: 100%;
	height: 100%;
	display: none;
}

#screenshot {
  display: none;
}


/*OVERLAYS ON TOP OF STREAM*/
#overlay {
	position: fixed; /* Sit on top of the page content */
	width: 1000px;
	height: 650px;
	/*display: none;*/
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	cursor: pointer;
	image-rendering: pixelated;
	pointer-events: none;
}

/*Textbox Overlay*/
#textbox {
	position: fixed; /* Sit on top of the page content */



	top:0;
	left: 0;
	right: 0;
	bottom: 0;

	font-size: 4vw;
	padding: 10%;
	color: #f0f;
	/*font-family: 'Nabla', cursive;*/
	font-family: 'Press Start 2P', cursive;
	/*display: none;*/

	/*text-transform: uppercase;*/
	font-weight: 400;
	z-index: 999;
	pointer-events: none;
}




.startScreenText {
	pointer-events: all
}
.startScreenText:hover {
	color:#fff  !important;
}
.startScreenText:active {
	color:#000  !important;
}

.chapter0 {
	pointer-events: all
}
.chapter0:hover {
	color:#fff !important;
}
.chapter0:active {
	color:#000 !important;
}

#skip, #start {
	pointer-events: all;
}

.backButtonClass {
	pointer-events: all;
	font-size: 2.5vw;
}
.backButtonClass:hover {
	color:#f0f !important;
}
.backButtonClass:active {
	color:#000 !important;
}





/*-------------------------
 TOP BUTTONs
 -------------------------*/

#buttonbox {
	display: none;
	box-sizing: border-box;
	position: fixed;
	width: 100%;
	max-width: 1000px;
	/*display: inline-block;*/
	height: 10%;
	padding: 10px;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 2.5vw;
	font-family: 'Press Start 2P', cursive;

	z-index: 999 !important;
}

#skip {
	pointer-events: all;
	float: right;
	color: #fff;
	display: inline-block;
	width: 10%;
	text-align: right;
}

#skip:hover {
	color: #ff0 !important;
}

#skip:active {
	color: #000 !important;
	background-color: #ff0;
}




#back {
	pointer-events: all;
	color: #fff;
	display: inline-block;
	width: 10%;
	text-align: left;
	pointer-events: all;
}

#back:hover {
	color: #0ff !important;
}

#back:active {
	color: #000 !important;
	background-color: #0ff;
}


#message_box {
	color: #ff0 !important;
	text-align: center;
	width: 980px;
	position: fixed;
	top: 10px;
}


/*-------------------------
 START BUTTON 
 -------------------------*/

#start {
	font-size: 2.5vw;
	pointer-events: all;
	background-color: #000;
	float: right;
}

#start:hover {
	color: #000 !important;
	background-color: #ff0;
}

#start:active {
	color: #000 !important;
}





#startGame {
	font-size: 2.5vw;
	pointer-events: all;
	background-color: #f0f;
}

#startGame:hover {
	color: #f0f !important;
	background-color: #fff;
}

#startGame:active {
	color: #000 !important;
}

/*-------------------------
INDEX MENU
 -------------------------*/
#indexTitle {
	text-transform: uppercase;
	/*background-color: #000;*/
	/*color: black !important;
	font-size: 40px;
	-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #fff;*/
}

.impressum {
	font-size: 1vw;
	text-align: center;
	font-family: 'Press Start 2P', cursive;
}
.impressum a {
	color: #222;
}
.impressum a:hover {
	color: #fff;
}

/*-------------------------
CHAPTER TITLE
 -------------------------*/
.line {
	font-size: 2.5vw;
}

.chaptertitle {
	background-color: #000;
}

/*-------------------------
CHAPTER DESCRIPTIONS
 -------------------------*/

.chapterdescription {
	font-size: 2.5vw;
	background-color: #000;
}

.instructions {
	font-size: 1vw;
	background-color: #000;
	margin-block-start: 0.2vw !important;
	margin-block-end: 0.2vw !important;
}


.aboutScreenText {
	font-size: 1.5vw;
}


/*-------------------------
CHAPTER DESCRIPTIONS
 -------------------------*/

 .chapter1 {
 	font-size: 2.5vw;
 	background-color: #000;
 }

/*-------------------------
CURSOR
 -------------------------*/

*{cursor:none;}
#crosshair-h{
	display: none;
    width:50%;
    height:1px;

}
#crosshair-v{
	display: none;
    height:50%;
    width:1px;

}
.hair{    
    position:fixed;
    background-color:#f0f;
    /*box-shadow:0 0 5px rgb(100,100,100);*/
    pointer-events:none;
    z-index: 1000;
}


#custom-cursor {
  width: 200px;
  height: 200px;
  position: fixed;
  top: -100px; /* Set the initial position off-screen */
  left: -100px;
  background-color: transparent;
  /*border: 3px solid red;*/
  pointer-events: none; /* Make sure the cursor does not interfere with other elements */
  z-index: 9999; /* Ensure the cursor is on top of other elements */
}

#cursor-cross {
	height: 10px;
	width: 10px;
	top:90px;
	left: 0px;
	position: relative;
	background-image: url("img/cursor_menu.png");
	background-position: center;
}

/*-------------------------
ARCHIVE
 -------------------------*/
#archive {
	position: relative;
	display: none;
	width: 1000px;
	height: 650px;
	margin: 0 !important;
}
#archive_screenshot {
	position: relative;
	width: 1000px;
	height: 650px;
	margin: 0 !important;
	display: none;
}
#archive img, #archive_screenshot img {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.container_a_class {
	z-index: 7;
	background-color: #fff;
}
#container_a_s {
	display: none;
	position: absolute;
	width: 200px;
	height: 200px;
	border: 1px solid black;
	z-index: 6;
}

#container_a {
	position: absolute;
	width: 200px;
	height: 200px;
	border: 1px solid black;
}
#container_a #rating {height: 2px !important}
#container_a #rating #rating_c{height: 2px !important}
#container_a #rating #rating_m{height: 2px !important}
#container_a #rating #rating_y{height: 2px !important}

#rating
{
	display: none;
	position: absolute;
	height: 5px;
	width: 100%;
	z-index: 7;
	bottom: 0px;
	pointer-events: none;

}
#rating_s
{
	position: absolute;
	height: 5px;
	width: 100%;
	z-index: 7;
	bottom: 0px;
	pointer-events: none;

}
#rating_c, #rating_m, #rating_y {
	height: 5px;
	margin: 0 !important;
	
	float: left;

}
#rating_c {
	width:33.3%;
	background-color:#0ff;
}

#rating_m {
	width: 33.3%;
	background-color: #f0f;
}
#rating_y {
	width: 33.3%;
	background-color: #ff0;
}
#date{
	display: none;
}

#date, #date_s
{
	position: absolute;
	z-index: 7;
	font-family: 'Press Start 2P', cursive;
	font-size: 10px;
	color: #fff;
	margin: 2px;
	pointer-events: none;
}
#date span {
	display: block !important;
	pointer-events: none;
}

/*-------------------------
SCREEN OVER 1000px
 -------------------------*/

@media only screen and (min-width: 1000px) {
  #textbox {
    font-size: 40px;
    width: 1000px;
    height: 650px;
    padding: 100px;
  }
  #content-container {
  	padding-top: 650px;
  }
  #buttonbox {
  	font-size: 1.5em !important;
  }
  .chaptertitle {
  	font-size: 40px !important;
  }
  .chapterdescription {
  	font-size: 25px !important;
  }
  #start {
  	font-size: 25px;
  }
  .chapter1 {
  	font-size: 25px;
  }

}