body
background-image: url(/img/drum.jpg)
background-size: cover
background-repeat: no-repeat
.main-background
height: 100vh
position: relative
.key-box
height: 60px
position: absolute
top: 50%
width: 100%
text-align: center
margin-top: -30px
.key
width: 75px
height: 60px
display: inline-block
margin-left: 20px
border: 2px solid rgba(#000, .8)
border-radius: 3px
box-shadow: 1px 1px 1px rgba(0,0,0,0.5)
background-color: rgba(#0E202C, .5)
cursor: pointer
transition: all .25s ease
&:hover
box-shadow: 2px 2px 4px rgba(0,0,0,0.8)
background-color: rgba(#0E202C, .2)
&.active, &:hover
border-color: #ffc668
transform: scale(1.2)
box-shadow: 0 0 8px #ffc668
kbd
padding-top: 12px
line-height: 18px
font-size: 18px
color: #fff
display: block
margin: 0 auto
text-align: center
span
margin: 0 auto
color: #F9BB3B
&:first-child
margin-left: 0
.section-overlay::before
content: ""
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-color: #0E202C
opacity: .4