body, html {
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
	margin:.5em;
  justify-content: center;
	align-items: center;
	font-family: 'Nova Mono', monospace;
	background: #171717;
	background-color: #a83832;
}
.parent {
display: grid;
grid-template-columns: 650px 350px;
grid-template-rows: 100px 480px 94px 50px;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

header {
	grid-area: 1 / 1 / 2 / 3;
	border:0;
  justify-content: center;
	align-items: center;
}
#computer1{
	grid-area: 2 / 1 / 3 / 2;
}

#computer2{
	grid-area: 3 / 1 / 4 / 2;
}

#control_wrapper{ 
	grid-area: 2 / 2 / 4 / 3; 
}

.control{
	width:324px;
	height:538px;
}

#control_on{
	background: #DDD url('regler-hoch-runter.gif');
	
}
#control_off{
	background: #DDD url('regler-unten.gif');
	
}

.debug{
	 grid-area: 4 / 1 / 5 / 3; 
	 padding:10px;
	 margin:10px;
	 border:1px dashed black;
 }


#code-input{
	justify-content: center;
	align-items: center;
	border:2px inset black;
  padding:3em;
}
#code-div{
	width:80vw;
	justify-content: center;
	align-items: center;
  padding:2em;
}
#submit-div{
	width:80vw;
	justify-content: center;
	align-items: center;
  padding:2em;
}
#alert{
  font-size: 4em; padding: 5px 12px;
	color: #a83832;
	font-family: 'Orbitron', sans-serif;
}

input[type="text"], input[type="password"]{
  font-size: 3em; padding: 5px 12px;
	font-family: 'Orbitron', sans-serif;
	background-color: #404040;
  font-weight: 200;
	border: 0;
	width:68vw;
	color: #dedede;
  justify-content: center;
  align-items: center;
}
input[type="submit"] {
  font-size: 4em; padding: 5px 12px;
  font-weight: 300;
  color: black;
  border: 0;
  background-image: linear-gradient(to top, #fca503 0%, #cc7a00 90%);
  border-radius: 3px;
	width:30vw;
	justify-content: center;
	align-items: center;
}
#red{
  background-image: linear-gradient(to top, #cc0000 0%, #800000 90%);;
}
#blue{
  background-image: linear-gradient(to top, #000066 0%, #000033 90%);;
}
#green{
  background-image: linear-gradient(to top, #003300 0%, #001a00 90%);;
}