body{
    background-color: black;
    color: whitesmoke;
}
.s{
    background-color: greenyellow;
    width: 2px;
    height: 20px;
    position: relative;
}
.b{
    width: 20px;
    height: 20px;
    position: relative;
}
.g{
    background-color: lightblue;
    position: relative;
    height: 20px;
    width: 5px;
    left: 7.5px;
}
.d{
    background-color: lightblue;
    position: relative;
    height: 7px;
    width: 20px;
    bottom: 7px;
}
#kontener{
    height: 200px;
}
@keyframes up1{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes down1{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }

}
@keyframes up2{
    0%{
        top: 50px;
        left: 200px;
    }
    100%{
        top: 70px;
        left: 200px;
    }
}
@keyframes down2{
    0%{
        top: 70px;
        left: 200px;
    }
    100%{
        top: 50px;
        left: 200px;
    }
}
@keyframes up3{
    0%{
        top: 57px;
        left: 212px;
    }
    100%{
        top: 73px;
        left: 208px;
    }
}
@keyframes down3{
    0%{
        top: 73px;
        left: 208px;
    }
    100%{
        top: 57px;
        left: 212px;
    }
}
@keyframes up4{
    0%{
        top: 67px;
        left: 239px;
    }
    100%{
        top: 79px;
        left: 231px;
    }
}
@keyframes down4{
    0%{
        top: 79px;
        left: 231px;
    }
    100%{
        top: 67px;
        left: 239px;
    }
}
@keyframes up5{
    0%{
        top: 83px;
        left: 247px; 
    }
    100%{
        top: 91px;
        left: 235px;
    }
}
@keyframes down5{
    0%{
        top: 91px;
        left: 235px;
    }
    100%{
        top: 83px;
        left: 247px; 
    }
}
@keyframes up6{
    0%{
        top: 101px;
        left: 269px;
    }
    100%{
        top: 105px;
        left: 253px;
    }
}
@keyframes down6{
    0%{
        top: 105px;
        left: 253px;
    }
    100%{
        top: 101px;
        left: 269px;
    }
}
@keyframes up7{
    0%{
        top: 122px;
        left: 267px;
    }
    100%{
        top: 122px;
        left: 247px;
    }
}
@keyframes down7{
    0%{
        top: 122px;
        left: 247px;
    }
    100%{
        top: 122px;
        left: 267px;
    }
}
@keyframes up8{
    0%{
        top: 142px;
        left: 269px; 
    }
    100%{
        top: 138px;
        left: 253px;
    }
}
@keyframes down8{
    0%{
        top: 138px;
        left: 253px; 
    }
    100%{
        top: 142px;
        left: 269px;
    }
}
@keyframes up9{
    0%{
        top: 160px;
        left: 248px;
    }
    100%{
        top: 152px;
        left: 236px;
    }
}
@keyframes down9{
    0%{
        top: 152px;
        left: 236px;
    }
    100%{
        top: 160px;
        left: 248px;
    }
}
@keyframes up10{
    0%{
        top: 177px;
        left: 240px;
    }
    100%{
        top: 165px;
    left: 232px;
    }
}
@keyframes down10{
    0%{
        top: 165px;
        left: 232px;
    }
    100%{
        top: 177px;
        left: 240px;
    }
}
@keyframes up11{
    0%{
        top: 189px;
        left: 213px;
    }
    100%{
        top: 173px;
        left: 209px;
    }
}
@keyframes down11{
    0%{
        top: 173px;
        left: 209px;
    }
    100%{
        top: 189px;
        left: 213px;
    }
}
@keyframes up12{
    0%{
        top: 196px;
        left: 200px;
    }
    100%{
        top: 176px;
        left: 200px;
    }
}
@keyframes down12{
    0%{
        top: 176px;
        left: 200px;
    }
    100%{
        top: 196px;
        left: 200px;
    }
}
@keyframes up13{
    0%{
        top: 189px;
        left: 172px;
    }
    100%{
        top: 173px;
        left: 176px;
    }
}
@keyframes down13{
    0%{
        top: 173px;
        left: 176px;
    }
    100%{
        top: 189px;
        left: 172px;
    }
}
@keyframes up14{
    0%{
        top: 177px;
        left: 159px;
    }
    100%{
        top: 165px;
        left: 167px;
    }
}
@keyframes down14{
    0%{
        top: 165px;
        left: 167px;
    }
    100%{
        top: 177px;
        left: 159px;
    }
}
@keyframes up15{
    0%{
        top: 160px;
        left: 136px;
    }
    100%{
        top: 152px;
        left: 148px;
    }
}
@keyframes down15{
    0%{
        top: 152px;
        left: 148px;
    }
    100%{
        top: 160px;
        left: 136px;
    }
}
@keyframes up16{
    0%{
        top: 142px;
        left: 130px;
    }
    100%{
        top: 138px;
        left: 146px;
    }
}
@keyframes down16{
    0%{
        top: 138px;
        left: 146px;
    }
    100%{
        top: 142px;
        left: 130px;
    }
}
@keyframes up17{
    0%{
        top: 122px;
        left: 118px;
    }
    100%{
        top: 122px;
        left: 138px;
    }
}
@keyframes down17{
    0%{
        top: 122px;
        left: 138px;
    }
    100%{
        top: 122px;
        left: 118px;
    }
}
@keyframes up18{
    0%{
        top: 101px;
        left: 130px;
    }
    100%{
        top: 105px;
        left: 146px;
    }
}
@keyframes down18{
    0%{
        top: 105px;
        left: 146px;
    }
    100%{
        top: 101px;
        left: 130px;
    }
}
@keyframes up19{
    0%{
        top: 82px;
        left: 135px;
    }
    100%{
        top: 91px;
        left: 147px;
    }
}
@keyframes down19{
    0%{
        top: 91px;
        left: 147px;
    }
    100%{
        top: 82px;
        left: 135px;
    }
}
@keyframes up20{
    0%{
        top: 67px;
        left: 158px;
    }
    100%{
        top: 79px;
        left: 166px;
    }
}
@keyframes down20{
    0%{
        top: 79px;
        left: 166px;
    }
    100%{
        top: 67px;
        left: 158px;
    }
}
@keyframes up21{
    0%{
        top: 57px;
        left: 171px;
    }
    100%{
        top: 73px;
        left: 175px;
    }
}
@keyframes down21{
    0%{
        top: 73px;
        left: 175px;
    }
    100%{
        top: 57px;
        left: 171px;
    }
}

@keyframes up22{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes down22{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

table, tr, td{
    border: 1px solid white
}
table{
    width: 90%;
}
#legend{
    width: 50%;
}
#totalChecksum{
    border: 1px solid white;
    width: 90%;
}
#totalChecksumText{
    width: 10%;
    display: inline;
}
#check_total{
    width: 80%;
    display: inline;
}
#teraz{
    background-color: black;
    color: antiquewhite;
}
.pudlo1{
    position: absolute;
    border-radius: 100%;
    height: 15px;
    width: 15px;
    top: 125px;
    left: 195px;
    opacity: 0;
    background-color: rgb(255, 251, 11);
    z-index: 2;
}
.pudlo2{
    height: 20px;
    width: 5px;
    position: absolute;
    top: 50px;
    left: 200px;
}
.pudlo3{
    height: 20px;
    width: 20px;
    position: absolute;
    top: 57px;
    left: 212px;
}
.pudlo4{
    height: 20px;
    width: 5px;
    position: absolute;
    top: 67px;
    left: 239px;
}
.pudlo5{
    height: 20px;
    width: 20px;
    position: absolute;
    top: 83px;
    left: 247px;      
}
.pudlo6{
    height: 20px;
    width: 5px;
    position: absolute;
    top: 101px;
    left: 269px;
}
.pudlo7{
    height: 20px;
    width: 20px;
    position: absolute;
    top: 122px;
    left: 267px;
}
.pudlo8{
    height: 20px;
    width: 5px;
    position: absolute;
    top: 142px;
    left: 269px;
}
.pudlo9{
    height: 20px;
    width: 20px;
    position: absolute;
    top: 160px;
    left: 248px;
}
.pudlo10{
    height: 20px;
    width: 5px;
    position: absolute;
    top: 177px;
    left: 240px;
}
.pudlo11{
    height: 20px;
    width: 20px;
    position: absolute;
    top: 189px;
    left: 213px;
}
.pudlo12{
    height: 20px;
    width: 5px;
    position: absolute;
    top: 196px;
    left: 200px;
}
.pudlo13{
    height: 20px;
    width: 20px;
    position: absolute;
    top: 189px;
    left: 172px;
}
.pudlo14{
    height: 20px;
    width: 5px;
    position: absolute;
    top: 177px;
    left: 159px;
}
.pudlo15{
    height: 20px;
    width: 20px;
    position: absolute;
    top: 160px;
    left: 136px;
}
.pudlo16{
    height: 20px;
    width: 5px;
    position: absolute;
    top: 142px;
    left: 130px;
}
.pudlo17{
    height: 20px;
    width: 20px;
    position: absolute;
    top: 122px;
    left: 118px;
}
.pudlo18{
    height: 20px;
    width: 5px;
    position: absolute;
    top: 101px;
    left: 130px;
}
.pudlo19{
    height: 20px;
    width: 20px;
    position: absolute;
    top: 82px;
    left: 135px;
}
.pudlo20{
    height: 20px;
    width: 5px;
    position: absolute;
    top: 67px;
    left: 158px;
}
.pudlo21{
    height: 20px;
    width: 20px;
    position: absolute;
    top: 57px;
    left: 171px;
    
}
.pudlo22{
    position: absolute;
    border-radius: 50%;
    height: 80px;
    width: 80px;
    background-color: rgb(119, 112, 214);
    top: 92px;
    left: 162px;
    opacity: 0;
}

.s1{
   transform: rotate(0deg);
}
.b2{
    transform: rotate(17deg);
}
.s3{
    transform: rotate(36deg);
}
.b4{
    transform: rotate(54deg);
}
.s5{
    transform: rotate(72deg);
}
.b6{
    transform: rotate(90deg);
}
.s7{
    transform: rotate(108deg);
}
.b8{
    transform: rotate(126deg);
}
.s9{
    transform: rotate(144deg);
}
.b10{
    transform: rotate(162deg);
}
.s11{
    transform: rotate(180deg);
}
.b12{
    transform: rotate(198deg);
}
.s13{
    transform: rotate(216deg);
}
.b14{
    transform: rotate(234deg);
}
.s15{
    transform: rotate(252deg);
}
.b16{
    transform: rotate(270deg);
}
.s17{
    transform: rotate(288deg);
}
.b18{
    transform: rotate(306deg);
}
.s19{
    transform: rotate(324deg);
}
.b20{
    transform: rotate(342deg);
}