/* position */
.content {
	display: flex;
	flex-direction: row;
}

#door {
	margin-left: 70px;
	margin-right: 20px;
	margin-top: 70px;
}

#light {
	margin-top: 190px;
	margin-right: 55px;
}

#music {
	margin-top: 40px;
	margin-right: 100px;
}

#safe {
	margin-top: 225px;
}

#body {
	background-color:#838383;
}

#condition {
	color: transparent;
}

#music-text, #screwdriver-text, #key-text, #End, #intro {
	font-family: "Monaco";
}

/*hover*/

#door, #light-button, #music, #safe-button :hover{
	cursor: pointer;
}

/* light */
#light-button {
	padding: 13px 10px;
	margin: 20px 0;
	border: 0px;
	font-size: 12px;
	color: #e6e6e6;
	text-transform: uppercase;
	background: transparent;
	position: relative;
	top: -235px;
	left: 268px;
}

.background{
	position: absolute;
	z-index: -3;
}

.darkimg{
	position: absolute;
	z-index: -5;
}

.dark .darkimg{
	position: absolute;
	z-index: 0;	
}

.dark .body{
	background-color: #838383;
}

/* safe */
#safe-button {
	padding: 17px 31px;
	margin: 20px 0;
	border: 0px;
	font-size: 12px;
	color: #ffffff;
	text-transform: uppercase;
	background: transparent;
	position: relative;
	top: -102px;
	left: 630px;
}

#safe-button:hover {
	font-weight: bold;
	font-size: 13px;
	color: #fff;
}

#safe-button:focus {
	outline: none;
}

#safe-button:active {
	border-color: #838383;
	font-weight: normal;
	font-size: 12px;
	color: #ccc;
}

/* music*/

@keyframes drop{
	0% { transform: translateY(0px)}
	100% { transform: translateY(93px)}
}

/*
#music {
	animation-name: drop;
	animation-duration: 0.7s;
	animation-timing-function: ease-in;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}
*/