.container {
    display: grid;
    grid-template-columns: 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr;
    grid-template-rows: 0.1fr 0.03fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr;
    grid-gap: 1em;
}

.container > div {
    background-color: #0f61;
    border: 1px solid black;
    padding: 5px;
}

#adsrko{

    grid-row-start:1;
    grid-row-end: 12;
    grid-column-start:4;
    grid-column-end:8;
}

#atack{    grid-row-start:1;
    grid-row-end: 2;
    grid-column-start:1;
    grid-column-end:2

}
.Attack{

    grid-row-start:1;
    grid-row-end: 2;
    grid-column-start:2;
    grid-column-end:3;

}

#AIn{

    grid-row-start:1;
    grid-row-end: 2;
    grid-column-start:3;
    grid-column-end:4;


}

#DecayID{
    grid-row-start:2;
    grid-row-end: 3;
    grid-column-start:1;
    grid-column-end:2;


}

.Decay{

    grid-row-start:2;
    grid-row-end: 3;
    grid-column-start:2;
    grid-column-end:3;


}


#DIn{

    grid-row-start:2;
    grid-row-end: 3;
    grid-column-start:3;
    grid-column-end:4;

}



#SustainID{
    grid-row-start:3;
    grid-row-end: 4;
    grid-column-start:1;
    grid-column-end:2;



}

.Sustain{
    grid-row-start:3;
    grid-row-end: 4;
    grid-column-start:2;
    grid-column-end:3;


}

#SIn{ grid-row-start:3;
    grid-row-end: 4;
    grid-column-start:3;
    grid-column-end:4;


}

#ReleaseID{

    grid-row-start:4;
    grid-row-end: 5;
    grid-column-start:1;
    grid-column-end:2;


}

.Release{

    grid-row-start:4;
    grid-row-end: 5;
    grid-column-start:2;
    grid-column-end:3;




}


#RIn{

    grid-row-start:4;
    grid-row-end: 5;
    grid-column-start:3;
    grid-column-end:4;



}

#OutId{


    grid-row-start:5;
    grid-row-end: 6;
    grid-column-start:1;
    grid-column-end:2;

}

.sliderOut{

    grid-row-start:5;
    grid-row-end: 6;
    grid-column-start:2;
    grid-column-end:3;



}

#outIn{

    grid-row-start:5;
    grid-row-end: 6;
    grid-column-start:3;
    grid-column-end:4;
}

#freq{

    grid-row-start:6;
    grid-row-end: 7;
    grid-column-start:1;
    grid-column-end:2;


}

.Kmitocet{
    grid-row-start:6;
    grid-row-end: 7;
    grid-column-start:2;
    grid-column-end:3;


}

#KmitocetIn{

    grid-row-start:6;
    grid-row-end: 7;
    grid-column-start:3;
    grid-column-end:4;

}

#shape{
    grid-row-start:8;
    grid-row-end: 9;
    grid-column-start:1;
    grid-column-end:2;

}

#tvarsignalu{

    grid-row-start:8;
    grid-row-end: 9;
    grid-column-start:2;
    grid-column-end:3;

}

#play1{

    grid-row-start:8;
    grid-row-end: 9;
    grid-column-start:3;
    grid-column-end:4;
    background-color: green;

}


#navod{

    grid-row-start:9;
    grid-row-end: 25;
    grid-column-start:1;
    grid-column-end:4;
    background-color: cyan;


}



#casprubehu{

    grid-row-start:10;
    grid-row-end: 11;
    grid-column-start:5;
    grid-column-end:6;
    text-align: center;

}