html, body {
	/* max-width: 150%; */
	height: 100vh;
    width: 100vw;

	overflow-x: hidden;
	overflow-y: hidden;
	color: #f1f1f1;
}

#game {
	position: absolute;
	left: 0;
	top: 0;
	/* filter: drop-shadow(0 0 10px rgba(0, 0, 0)); */
}

#background-game{
    height: 100vh;
    width: 100vw;

    /* height: 102vh;
    width: 102vw;

	top: -1vh;
	left: -1vw; */

	background-repeat: no-repeat;
    background-size: cover;
	background-position: center;

    /* filter: blur(5px); */

	transform: scale(1.02);
}

#logoContainer img {
	max-width: 718px;
}

/* Dropdown Button */

.dropbtn {
	background-color: #4caf50;
	color: white;
	padding: 8px;
	font-size: clamp(10px, 1vw, 20px);
	border: none;
	cursor: pointer;
	z-index: 2;
}

/* Dropdown button on hover & focus */

.dropbtn:hover {
	background-color: #71C64C;
}

/* The container <div> - needed to position the dropdown content */

.dropdown {
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 1;
}

/* Dropdown Content (Hidden by Default) */

.dropdown-content {
	display: none;
	position: absolute;
	right: 0;
	background-color: #f9f9f9;
	min-width: 5%;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
	z-index: 1;
}

/* Links inside the dropdown */

.dropdown-content a {
	color: black;
	padding: 6px 8px;
	font-size: clamp(10px, 1vw, 20px);
	text-decoration: none;
	display: block;
}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {
	background-color: #dbdbdb;
}

/* Dropdown Content (Hidden by Default) */

.textinput {
	position: absolute;
	display: block;
	top: 0px;
	padding: 10px;
	box-shadow: 1px rgba( 0, 0, 0, 0.2);
	background-color: #f9f9f9;
	z-index: 2;
}

.textinput input {
	width: 50vw;
	padding: 5px;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
	display: block;
	position: absolute;
}

/* FULL SCREEN */

#fullscreen {
	visibility: hidden
}

#fullscreen-mask {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../img/fullscreen-mask.png) repeat;
	width: 100%;
	height: 200%;
}

#fullscreen-img {
	animation: swipeUp;
	animation-duration: 1s; 
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

@keyframes swipeUp {
    from { transform : translate(-50%, -50%) } /* slide down from off-screen */
    to   { transform : translate(-50%, -25%) }
}

.swipe-control {
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    padding-bottom: 100vh;
    overflow-x: hidden;
	overflow-y: scroll;
	scroll-behavior: smooth;
	-ms-scroll-limit-x-min: 0;
	-ms-scroll-limit-x-max: 0;
    height: 200vh;
	z-index: -1
}

.pdebug {
	width: 100%;
	height: 50%;
	color: #f1f1f1;
	top:50%;
	font-size: 30pt;
	z-index: 10;
	position: absolute;
	pointer-events: none;
}


.arte_tools {
    width: 500px;
    height: 490px;
}
.tool_title_bar {
    background: #0a5a7a;
    height: 25px;
    width: 100%;
    color: white;
}
.tool_max_min_button {
    border:solid 1px;
    width: 25px;
    height: 23px;
    float:right;
    cursor:pointer;
}
.tool_body {
    height: 490px;
    background: #0c1b3fd5;
    border:solid 1px;
}

/* END FULL SCREEN */