html{
	scroll-behavior: smooth;
}

body{
	background-color:black;
	margin:0px;
	position:relative;
	font-size:2em;
	background-image: url("../images/UI/AAAAAAAAA.png"),url("../images/UI/AAAAAAAA.png");
	background-position: center top;
	background-repeat: no-repeat;
}

.desktopOnly{
	display:unset;
}
	
.mobileOnly{
	display:none;
}

#content iframe, #content video{
	display:block;
	margin:auto;
	max-height:100vh;
	max-width:100%;
}

.videoContainer{
	border: 3px solid black;
    border-radius: 20px;
    overflow: hidden;
}

#background{
	z-index:-1;
	position:fixed;
	top:0px;
	left:-9999px;
	right:-9999px;
	width:1600px;
	margin:auto;
}

#content{
	z-index:0;
	padding:20px;
	color:white;
	max-width:540px;
	margin-left:auto;
	margin-right:auto;
	padding-top:190px;
	padding-bottom:150px;
}

#content img{
	border: 3px solid black;
	display: block;
	margin-bottom:60px;
	margin-top:60px;
	margin-left: auto;
	margin-right: auto;
	max-height:100vh;
	max-width:100%;
	border-radius:20px;
}

#content img.fullheight {
    max-height: unset;
}

#content .game{
	border: 3px solid black;
	border-radius:20px;
}

#content.sfw *{
	display:none;
}

#content.sfw *.safe{
	display:block;
}

/* #content.sfw img{
	display:none;
}


#content.sfw iframe{
	display:none;
}

#content.sfw  img.safe{
	display:block;
} */

.alwaysVisible{
	display:block !important;
}

#continueToComicArrow{
	border:unset !important;
	opacity: 0.75;
}

.clickable{
	cursor:pointer;
}

#continueToComicArrow:hover{
	opacity: 1;
	animation-name:float;
	animation-duration:1s;
	animation-iteration-count: infinite;
}



.bottomFade{
	mask:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

#menu{
	height:unset;
	width:unset;
	position:fixed;
	top:0px;
	//top:50%;
	bottom:unset;
	right:0px;
	//background:white;
	background-image: url("../images/UI/menubackground.png");
	background-color:#3e324e;
	padding:20px;
	border: 3px black solid;	
	border-radius: 0px 0px 0px 15px;
	//transform: translateY(-50%);
	opacity:0.3;
	-webkit-transition: opacity 3s;
	transition: opacity 3s;
	transition-delay: 2s;
}

#menu:hover, .opaque{
	opacity:1 !important;
	-webkit-transition: opacity 0.2s !important;
	transition: opacity 0.2s !important;
	transition-delay: 0s !important;
}

#menu a{
	cursor:pointer;
}

#menu ul{
	list-style-type: none;
	padding:0px;
	margin:0px;
}

#keyboardIcon{
	opacity:0;
	transition: opacity 3s;
	position:fixed;
	left:0px;
	top:0px;
	width:100px;
	height:100px;
}

#rope{
	transform-origin: top center;
	transform:rotate(-0.5deg);
	animation-name:sway;
	animation-duration:10s;
	animation-iteration-count: infinite;
}

@keyframes sway{
	0% {transform:rotate(-0.5deg)}
	50% {transform:rotate(0.5deg)}
	100% {transform:rotate(-0.5deg)}
}

@keyframes float{
	0% {transform:translateY(-3px)}
	50% {transform:translateY(3px)}
	100% {transform:translateY(-3px)}
}


.noscript{
	font-size:1.5em;
	text-align:center;
	background: black;
	border-radius: 15px;
	padding:10px;
}

@media only screen and (max-width: 1100px) {
	
	#content{
		width:90vw;
		max-width:unset;
	}
	
	#content img{
		width:100%;
		max-height:unset;
	}
	
	#content iframe, #content video{
		width:100%;
		/* height:100vh; */
		max-height:unset;
	}
	
    #menu{
		position:absolute;
		text-align:center;
		margin:auto;
		top:unset;
		bottom:0;
		left:-9999px;
		right:-9999px;
		width:100%;
		height:100px;
		transform: unset;
		border-radius: unset;
	}
	
	#menu ul{
		padding:0px;
	}
	
	#menu li{
		display:inline;
	}
	
	.desktopOnly{
		display:none;
	}
	
	.mobileOnly{
		display:unset;
	}
}

.fullscreenfadein{
	height: 100vh;
	width: 100vw;
	position: fixed;
	left: 0px;
	top: 0px;
	overflow: hidden;
	background-position: center center;
	opacity: 0;
	pointer-events: none;
}

#midground{
	z-index: -1;
    position: relative;
}