@keyframes animSpan{
    0%{
        font-size: 360%;
        font-weight: normal;
    }
    50%{
        font-size: 390%;
        font-weight: 900;
    }
    100%{
        font-size: 360%;
        font-weight: normal;
    }
}
*{
    margin: 0;
    padding: 0;
    font: 100%/1.5em monospace;
    box-sizing: border-box;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
html{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.conteinerVert{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
}
.conteinerHor{
    display: flex;
    flex-direction: row;
}
.row-1{
    flex: 1;
    align-content: center;
}
.row-2{
    flex: 2;
}
.col-1{
    flex: 1;
}
span{
    display: block;
    text-align: center;
    font-size: 300%;
}
#startBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 100px;
    font-size: 200%;
    background-color: white;
    border: 2px solid black;
}
#startBtn:hover{
    background-color:beige;
}
#startBtn:active{
    background-color:white;
    transform: rotate(2deg);
}
#drums{
    width: 300px;
    height: 300px;
    transform: none;
}
@media(max-width:650px){
    .conteinerHor{
        flex-direction: column-reverse;
    }
}