body, html{
	overflow: hidden;
	padding: 0;
	margin: 0;
	height: 100vh;
	width: 100vw;
	text-align: center;
    background-image: url(img/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#drums {
	display: inline-block;
	position: relative;
    top: -35px;
/*
	height: 95vh;
	width: 126.7vh;
*/
    height: 105vh;
    width: 149vh;
/*	background: url("img/drums.png") no-repeat center center;*/
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: cover;
}
.labledDrums{
    background: url(img/drums.png) no-repeat center center;
}
.clearDrums{
    background: url(img/drumsClear.png) no-repeat center center;
    background-size: cover;
}
.drum {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.01);
}

#bass {
	position: absolute;
	width: 35vh;
	height: 20vh;
	left: 30vh;
	bottom: 0vh;
}

#crash {
	position: absolute;
	width: 50vh;
	height: 37vh;
	left: 0vh;
	top: 0vh;
	border-radius: 10vh;
}

#floor1 {
	position: absolute;
	width: 43vh;
	height: 22vh;
	right: 10vh;
	bottom: 22vh;
}

#floor2 {
	position: absolute;
	width: 35vh;
	height: 22vh;
	right: 0vh;
	bottom: 0vh;
}

#ride {
	position: absolute;
	width: 35vh;
	height: 38vh;
	right: 0vh;
	bottom: 50vh;
}

#snare {
	position: absolute;
	width: 42vh;
	height: 33vh;
	right: 56vh;
	bottom: 16vh;
}

#tom1 {
	position: absolute;
	width: 41vh;
	height: 30vh;
	left: 8vh;
	bottom: 15vh;
}

#tom2 {
	position: absolute;
	width: 33vh;
	height: 24vh;
	left: 40vh;
	bottom: 49vh;
	border-top-left-radius: 15vh;
}

#tom3 {
	position: absolute;
	width: 28vh;
	height: 25vh;
	right: 38vh;
	bottom: 55vh;
}

#hihat {
    position: absolute;
    width: 15vh;
    height: 15vh;
    left: 0vh;
    top: 33vh;
}

#menubar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	text-align: center;
}

.btn {
	margin-top: 0.2em;
	background: linear-gradient(to bottom, rgba(125,185,232,1) 0%,rgba(0,78,255,1) 100%);
	color: #447;
	border-radius: 0.3em;
	font-size: 2vw;
	font-weight: bold;
	line-height: 2em;
	height: 2em;
	text-align: center;
	cursor: pointer;
	user-select: none;
	width: 12vw;
	border: 0.1em solid #449;
	display: inline-block;
	user-select: none;
	-moz-user-select: none;
}

@keyframes btnblink {
	from {
		background: #7f0000;
        border: 0.1em solid #7f0000;
	}
	to {
		background: #ff2d2d;
        border: 0.1em solid #7f0000;
	}
}

.btn.active {
	background: yellow;
	animation-duration: 2s;
	animation-name: btnblink;
	animation-iteration-count: infinite;
}

#recbtn {
	color: white;
    text-shadow: 1px 1px 2px #000;
}

#playbtn {
	color: white;
    text-shadow: 1px 1px 2px #000;
}

#loopselbtn {
	color: white;
    text-shadow: 1px 1px 2px #000;
}
#toggleBackground{
    color: white;
    text-shadow: 1px 1px 2px #000;
}
#drumbeatbtn{
    color: white;
    text-shadow: 1px 1px 2px #000;
}

/*
@media (min-width: 1700px) {

    #drums{
        top: -300px;
        height: 132vh;
        width: 186vh;
    }
    
}

@media (min-width: 1900px) {

    #drums{
        top: -300px;
        height: 128vh;
        width: 179vh;
    }
    
}
*/