.mozgathato {

position: absolute;

}

.mozgathato:hover {
cursor: move;
}

body {
background-color: black;
z-index: -3;
}

#hatter {
color: white;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: clear;

}

#hatterkep {
		width: 100%;
		height: 100%;
		position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
pointer-events: none;

}

#turnon {

	width: 200px;
	padding: 10px;
	background-color: white;
	color: peru;
	font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
}

.doboz {
		text-align: center;
		font-family: "Courier New", Courier, monospace;
		font-size: 4px;
}

/* randompos(4) */

#doboz1{
font-size: 60px;
z-index: 2;
width: 100px;
height: 200px;
background-color: black;
opacity: 0.2;
display: inline-block;
-webkit-transition: width 2s, background-color 0.5s, opacity 1.5s, transform .3s, left 1s, bottom 1s, right 1s, top 1s;
transition: width 8s, background-color 8s, opacity 1.5s, transform .3s, left 1s, bottom 1s, right 1s, top 1s;
overflow: hidden;

}

#doboz1.folotte{
opacity: 0.9;
width: 400px;
-webkit-transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
}


/* glitch-el */

#doboz2{
font-size: 40px;
z-index: 2;
width: 100px;
height: 200px;
background-color: black;
opacity: 0.2;
display: inline-block;
-webkit-transition: width 2s, background-color 2s, left 1s, bottom 1s, right 1s, top 1s, opacity 1.5s, transform .3s;
transition: width 8s, background-color 8s, left 1s, bottom 1s, right 1s, top 1s, opacity 1.5s, transform .3s;
}

#doboz2.folotte{
opacity: 0.9;
width: 800px;
-webkit-transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
transition: width 2s, background-color 0.5s, opacity 0.5s,  transform .3s;
}

/* háttérkép-léptető */

#doboz3{
font-size: 120px;
z-index: 2;
width: 100px;
height: 200px;
background-color: black;
display: inline-block;
opacity: 0.2;
border-radius: 230px;
-webkit-transition: width 2s, background-color 2s, opacity 1.5s, transform .3s, left 1s, bottom 1s, right 1s, top 1s;
transition: width 8s, background-color 8s, opacity 1.5s,  transform .3s, left 1s, bottom 1s, right 1s, top 1s;
}

#doboz3.folotte{
width: 500px;
opacity: 0.9;
-webkit-transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
}

/* randompos(rand:) */

#doboz4{
font-size: 70px;
z-index: 4;
width: 100px;
height: 200px;
opacity: 0.2;
background-color: black;
display: inline-block;
-webkit-transition: width 2s, background-color 2s, opacity 1.5s, transform .3s, left 1s, bottom 1s, right 1s, top 1s;
transition: width 8s, background-color 8s, opacity 1.5s, transform .3s, left 1s, bottom 1s, right 1s, top 1s;
}

#doboz4.folotte{
opacity: 0.9;
width: 300px;
-webkit-transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
}

/* képeslap-szövegdoboz */

#doboz5{
z-index: 4;
width: 100px;
height: 200px;
opacity: 0.2;
background-color: black;
display: inline-block;
-webkit-transition: width 2s, background-color 2s, opacity 1.5s, transform .3s, left 1s, bottom 1s, right 1s, top 1s, font-size 2s;
transition: width 8s, background-color 8s, opacity 1.5s, transform .3s, left 1s, bottom 1s, right 1s, top 1s, font-size 2s;
overflow: hidden;
}

#doboz5.folotte{
opacity: 0.9;
font-size:18px; 
width: 600px;
-webkit-transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s, font-size 2s;
transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s, font-size 2s;
}

/* forgató */

#doboz6{
font-size: 120px;
z-index: 4;
width: 100px;
height: 200px;
background-color: pink;
background-color: black;
opacity: 0.2;
display: inline-block;
-webkit-transition: width 2s, background-color 2s, left 1s, bottom 1s, right 1s, top 1s, opacity 1.5s, transform .3s;
transition: width 8s, background-color 8s, left 1s, top 1s, opacity 1.5s, transform .3s;
}

#doboz6:hover{
opacity: 0.9;
width: 700px;
-webkit-transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
}

/* manuálisan növekedő-csökkenő doboz */

#doboz7{
font-size: 70px;
z-index: 5;
width: 100px;
height: 200px;
opacity: 0.2;
background-color: pink;
background-color: black;
display: inline-block;
-webkit-transition: width .5s, background-color 2s, opacity 1.5s, transform .3s, left 1s, bottom 1s, right 1s, top 1s;
transition: width .5s, background-color 8s, opacity 1.5s, transform .3s, left 1s, bottom 1s, right 1s, top 1s;
}

#doboz7.folotte{
opacity: 0.9;
-webkit-transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
}

/* forgató */

#doboz8{
font-size: 120px;
z-index: 5;
width: 100px;
height: 200px;
background-color: pink;
opacity: 0.2;
-webkit-transition: width 2s, background-color 2s, left 1s, bottom 1s, right 1s, top 1s, opacity 1.5s, transform .3s;
transition: width 8s, background-color 8s, left 1s, bottom 1s, right 1s, top 1s, opacity 1.5s, transform .3s;
}

#doboz8:hover{
width: 900px;
opacity: 0.9;
-webkit-transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
}

#doboz9{
z-index: 5;
width: 100px;
height: 200px;
background-color: pink;
display: inline-block;
opacity: 0.2;
-webkit-transition: width 2s, background-color 2s, opacity 1.5s, transform .3s;
transition: width 8s, background-color 8s, opacity 1.5s, transform .3s;
}

#doboz9:hover{
width: 500px;
opacity: 0.9;
-webkit-transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
}

#doboz10{
z-index: 5;
width: 100px;
height: 200px;
background-color: pink;
opacity: 0.2;
display: inline-block;
-webkit-transition: width 2s, background-color 2s, opacity 1.5s, transform .3s;
transition: width 8s, background-color 8s, opacity 1.5s, transform .3s;
}

#doboz10:hover{
width: 600px;
opacity: 0.9;
-webkit-transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
}

#doboz11{
z-index: 7;
width: 100px;
height: 200px;
background-color: pink;
opacity: 0.2;
display: inline-block;
-webkit-transition: width 2s, background-color 2s, opacity 1.5s, transform .3s;
transition: width 8s, background-color 8s, opacity 1.5s, transform .3s;
}

#doboz11:hover{
width: 500px;
opacity: 0.9;
-webkit-transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
transition: width 2s, background-color 0.5s, opacity 0.5s, transform .3s;
}

#statusz{
	width: 200px;
	height: 300px;
	overflow: auto;
	color: red;
	font-size: 12px;
	opacity: 0.7;
	background-color: #ddd;
	position: absolute;
	bottom: 0px;
	display: none;
}

#szamlalo{
	width: 50px;
	height: 13px;
	overflow: clear;
	color: white;
	font-size: 12px;
	opacity: 0.7;
	background-color: gray;
	position: absolute;
	bottom: 0px;
	right: 0px;
	text-align:right;
}

#paletta{
	text-align: right; 
	width: 225px;
	height: 110px;
	background-color: black;
	opacity: 0.5;
	position: absolute;
	right: 0px;
	top: 0px;
	-webkit-transition: background-color 0.5s, opacity 0.5s;
	transition: background-color 0.5s, opacity 0.5s;
}

#paletta:hover{
	opacity: 0.7;
	-webkit-transition: background-color 0.5s, opacity 0.5s;
	transition: background-color 0.5s, opacity 0.5s;
}
#szindoboz1 {background-color: yellow;}
#szindoboz2 {background-color: red;}
#szindoboz3 {background-color: green;}
#szindoboz4 {background-color: deeppink;}
#szindoboz5 {background-color: white;}
#szindoboz6 {background-color: brown;}
#szindoboz7 {background-color: darkmagenta;}
#szindoboz8 {background-color: black;}
#szindoboz9 {background-color: cyan;}
#szindoboz10 {background-color: seagreen;}

#volup, #voldown, #gain{
	font-family: "Courier New", Courier, monospace;
	font-size: 11px;
	background-color: grey;
	opacity: 0.85;
	}


#volup:hover{
	background-color: red;
	cursor: pointer;
	}

#voldown:hover{
	background-color: darkmagenta;
	cursor: pointer;
	}

.szin {
	width: 40px;
	height: 40px;
	display: inline-block;
}

.szoveg {
	background-color: transparent;
	border: 0px;
  	color: white;
  	resize: none;
  	width: 100%;
  	font-size: 1em;
  	height: 100%;
	}

#info1 {
		font-weight: bold;
		font-family: "Courier New", Courier, monospace;
		max-height: 60%;
		mix-blend-mode: exclusion;
		}
#leiras {
		width: 200px;
		height: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: "Courier New", Courier, monospace;
		font-weight: normal;
		z-index: 4;
		-webkit-transition: width 1s, height 1s;
		transition: width 1s, height 1s;
		position: absolute;
		bottom: 0px;
		}

#leiras:hover {
		width: 80%;
		height: 20%;
		overflow: clear;
		background-color: grey;
		-webkit-transition: width 2s, height 2s;
		transition: width 2s, height 2s;
		}

#uzenet {
		font-family: "Courier New", Courier, monospace;
		}

.noselect {
  		-webkit-touch-callout: none; /* iOS Safari */
  		-webkit-user-select: none;   /* Chrome/Safari/Opera */
  		-khtml-user-select: none;    /* Konqueror */
  		-moz-user-select: none;      /* Firefox */
  		-ms-user-select: none;       /* Internet Explorer/Edge */
  		user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}