*, *::before, *::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: transparent !important;
    background-image: -webkit-linear-gradient(-30deg, #50307b 0, #575bce 49%, #1b678a 100%);

    /*For audio latency delay*/
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    font-family: 'Varela Round', sans-serif;
}

#startScreen, .copyimg {
    opacity: 1;
}

.copyimg {
    right: 1%;
    left: 86%;
}

.instructions-p {
    width: 480px;
    text-align: center;
    margin: 20px auto;
    color: white;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 300;
}


.switchInstrument, .keyboard, .play{
    position: absolute;
    top: 40px;
    width: 190px;
    padding: 10px;
    background-color: #9a4eff;
    color: white;
    font-size: 21px;
    border-radius: 10px;
    box-shadow: black 0 0 10px 2px;
    transition: .2s ease-in-out;
}

.switchInstrument {
    left: 6px;
    width: 187px;
}

.keyboard {
    right: 10px;
    width: 170px;
}

.play {
    right: 10px;
    width: 170px;
    top: 150px;
}

.switchInstrument:hover, .keyboard:hover {
    transform: scale(1.05);
}
.switchInstrument:active, .keyboard:active {
    transform: scale(1.0);
}

.switchInstrument .fas, .keyboard .fas {
    font-size: 29px;
    line-height: 1.5;
}

.notation-container {
    position: relative;
    height: 630px;
    width: 65%;
    margin: auto;
    /* background-image: url('../../assets/images/recorder_songs/10_lucy_locket.jpg'); */
    background-size: cover;
    z-index: -1;
    border: 5px solid black;
}

.next, .previous{
    position: absolute;
    top: 35%;
    background: black;
    font-size: 30px;
    color: white;
}


.next {
    padding: 20px 40px 20px 30px;
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    right: 20px;
}
.previous {
    padding: 20px 30px 20px 40px;
    clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
    left: 20px;
}

.next:hover, .previous:hover {
    background: blue;
}

.glockenspiel-container {
    display: flex;
    position: absolute;
    bottom: -207px;
    transform: scale(0.70);
    left: 10px;
    justify-content: center;
    height: 710px;
    align-items: center;
    transition: transform 0.5s ease-in-out;
}

.rotate-glock {
    transform: rotate(-90deg) scale(0.6);
}

.rotate-text {
    /* transform: rotate(90deg) scale(1.5); */
    /* bottom: -24px !important; */
    /* font-size: 30px !important; */
}




.glock {
    display: flex;
}

.glock::before {
    content: '';
    width: 91%;
    height: 25px;
    display: inline-block;
    position: absolute;
    background: black;
    top: 255px;
    left: 4%;
    transform: rotate(4deg);
}

.glock::after {
    content: '';
    width: 91%;
    height: 25px;
    display: inline-block;
    position: absolute;
    background: black;
    bottom: 255px;
    left: 4%;
    transform: rotate(-4deg);
    z-index: -1;
}

.leftframe {
    content: '';
    width: 25px;
    height: 39.5%;
    display: inline-block;
    position: absolute;
    background: black;
    top: 215px;
    left: 4%;
    z-index: -1;
}

.rightframe {
    content: '';
    width: 25px;
    height: 16.7%;
    display: inline-block;
    position: absolute;
    background: black;
    top: 296px;
    right: 4%;
    z-index: -1;
}

.bar {
    position: relative;
    width: 120px;
    height: 320px;
    background-color: white;
    border: 1px solid #333;
    color:black;
    margin: auto 10px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.bar.active {
    animation: pulse 0.2s ease-in-out;
}

.bar::before {
    content: '';
    width: 25px;
    height: 25px;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 7px solid black;
    top: 55px;
    left: 39%;
}

.bar::after {
    content: '';
    width: 25px;
    height: 25px;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 7px solid black;
    bottom: 55px;
    left: 39%;
}


.bar:nth-of-type(1) {
    height: 400px;
    background: red;
}
.bar:nth-of-type(2) {
    background: orange;
    height: 380px;
}

.bar:nth-of-type(3) {
    background: yellow;
    height: 359px;
}
.bar:nth-of-type(4) {
    background: #c6dfad;
    height: 337px;
}
.bar:nth-of-type(5) {
    background: green;
    height: 314px;
}
.bar:nth-of-type(6) {
    background: purple;
    height: 292px;
}

.bar:nth-of-type(7) {
    background: hotpink;
    height: 271px;
}

.bar:nth-of-type(8) {
    background: red;
    height: 250px;
}

.bar:nth-of-type(9) {
    background: orange;
    height: 230px;
}




.keytext {
    font-size: 24px;
}

.ledger {
    position: absolute;
    width: 50px;
    height: 3px;
    left: 920px;
    background: black;
}

.ledgerlow {
left: 120px;
 bottom: 44px;
}
.ledgerhigh {
    top: 39px;
}

.ledgerhigh2 {
    top: 15px;
}

.col1 {
    left: 804px;
}

.col2 {
    left: 862px;
}


.black {
    width: 50px;
    height: 200px;
    background-color: black;
    border: 1px solid #333;
    margin-left: -25px;
    margin-right: -25px;
    z-index: 2;
    color:white;
}





.loading-div {
    position:absolute;
    left: 42%;
    top: 45%;
    margin-top: initial;
    width: 220px;
}

.logo {
    margin-bottom: 25px;
    width: 100%;
}

@keyframes pulse {
    50% {
        transform: scale(1.1);
    }
}