body {
    font-family: Arial, sans-serif;
}

button {
    background-color: transparent;
}

#info {
    background-color: #393E46;
    color: #EEEEEE;
    height: 18.75rem;
    width: 56.25rem;
    margin: auto;
}

header {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 20px;
    background-color: #393E46;
    color: #EEEEEE;
    width: 56.25rem;
}

.hinfo {
    display: flex;
    justify-content: space-evenly;
    padding: 0.6125rem;
}

.linfo {
    display: flex;
    flex-direction: column;
    /* background-color: red; */
    width: 50%;
}

.rinfo {
    display: flex;
    flex-direction: column;
    /* background-color: red; */
    width: 50%;
}

.description_info {
    display: flex;
    line-height: 0;
    border: 5px dashed #FF2E63;
    padding-left: 10px;
    padding-right: 10px;
    width: 80%;
    margin: auto;
    animation: dashBorder 2.5s infinite alternate;
}




@keyframes dashBorder {
    0% {
        border-color: #FF2E63;
    }
    25% {
        border-color: #F47C7C
    }
    50% {
        border-color: #EF9F9F
    }
    75% {
        border-color: #FAD4D4
    }
    100% {
        border-color: rgb(224, 67, 96);
    }
}  




.naglowek:hover {
    animation: textAnimation 3s linear infinite;
}

/* Definicja animacji CSS */
@keyframes textAnimation {
    0% {
        transform: scale(1);
        /* color: rgb(255, 255, 255); */
    }
    50% {
        transform: scale(1.05);
        /* color: rgb(255, 255, 255); */
    }
    75% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        /* color: rgb(255, 255, 255); */
    }
}


.element {
    border: 1px solid #222831;
    text-align: center;
    padding: 0.938rem 0;
    transition: transform .2s;
}

.element:hover {
    transform: scale(1.3);    
    border: 0px;
    border-radius: 25%;
}


.description {
    display: block;
    font-size: 0.563rem;
    order: 2;
}

.upper {
    display: flex;
    font-size: 12px;
    justify-content: flex-start;
    position:absolute;
    /* top: 0.625rem; */
    margin-top: -2.425rem;
    margin-left: 0.156rem;
    order: 0;
}
.ptable {
    display: grid;
        align-items: center;
        justify-items: center;
        /* margin-left: 20px; */
        /* background-color: aqua; */
        /* width: 70%; */
    }

.htable {
    display: grid;
    grid-template-columns: repeat(18, 3.125rem);
    grid-template-rows: repeat(7, 3.125rem);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
        
    .div1 {
        grid-area: 1 / 1 / 2 / 2;
        background-color: rgb(118, 255, 168);
    }
    .div2 {
        grid-area: 1 / 18 / 2 / 19;
        background-color: rgb(210, 113, 255);
    }
    .div3 {
        grid-area: 2 / 1 / 3 / 2;
        background-color: rgb(255, 143, 83);
    }
    .div4 {
        grid-area: 2 / 2 / 3 / 3;
        background-color: rgb(251, 255, 121);
    }
    .div5 {
        grid-area: 2 / 13 / 3 / 14;
        background-color: rgb(138, 255, 234);
    }
    .div6 {
        grid-area: 2 / 14 / 3 / 15;
        background-color: rgb(118, 255, 168); 
        }
    .div7 {
        grid-area: 2 / 15 / 3 / 16;
        background-color: rgb(118, 255, 168);
    }
    .div8 {
        grid-area: 2 / 16 / 3 / 17;
        background-color: rgb(118, 255, 168);
    }
    .div9 {
        grid-area: 2 / 17 / 3 / 18;
        background-color: rgb(118, 255, 168);
    }
    .div10 {
        grid-area: 2 / 18 / 3 / 19;
        background-color: rgb(210, 113, 255);
    }
    .div11 {
        grid-area: 3 / 1 / 4 / 2;
        background-color: rgb(255, 143, 83);
    }
    .div12 {
        grid-area: 3 / 2 / 4 / 3;
        background-color: rgb(251, 255, 121);
    }
    .div13 {
        grid-area: 3 / 13 / 4 / 14;
        background-color: rgb(77, 130, 255);
    }
    .div14 {
        grid-area: 3 / 14 / 4 / 15;
        background-color: rgb(138, 255, 234);
    }
    .div15 {
        grid-area: 3 / 15 / 4 / 16;
        background-color: rgb(118, 255, 168);
    }
    .div16 {
        grid-area: 3 / 16 / 4 / 17;
        background-color: rgb(118, 255, 168);
    }
    .div17 {
        grid-area: 3 / 17 / 4 / 18;
        background-color: rgb(118, 255, 168);
    }
    .div18 {
        grid-area: 3 / 18 / 4 / 19;
        background-color: rgb(210, 113, 255);
    }
    .div19 {
        grid-area: 4 / 1 / 5 / 2;
        background-color: rgb(255, 143, 83);
    }
    .div20 {
        grid-area: 4 / 2 / 5 / 3;
        background-color: rgb(251, 255, 121);
    }
    .div21 {
        grid-area: 4 / 3 / 5 / 4;
        background-color: rgb(255, 118, 109);
    }
    .div22 {
        grid-area: 4 / 4 / 5 / 5;
        background-color: rgb(255, 118, 109);
    }
    .div23 {
        grid-area: 4 / 5 / 5 / 6;
        background-color: rgb(255, 118, 109);
    }
    .div24 {
        grid-area: 4 / 6 / 5 / 7;
        background-color: rgb(255, 118, 109);
    }
    .div25 {
        grid-area: 4 / 7 / 5 / 8;
        background-color: rgb(255, 118, 109);
    }
    .div26 {
        grid-area: 4 / 8 / 5 / 9;
        background-color: rgb(255, 118, 109);
    }
    .div27 {
        grid-area: 4 / 9 / 5 / 10;
        background-color: rgb(255, 118, 109);
    }
    .div28 {
        grid-area: 4 / 10 / 5 / 11;
        background-color: rgb(255, 118, 109);
    }
    .div29 {
        grid-area: 4 / 11 / 5 / 12;
        background-color: rgb(255, 118, 109);
    }
    .div30 {
        grid-area: 4 / 12 / 5 / 13;
        background-color: rgb(255, 118, 109);
    }
    .div31 {
        grid-area: 4 / 13 / 5 / 14;
        background-color: rgb(77, 130, 255);
    }
    .div32 {
        grid-area: 4 / 14 / 5 / 15;
        background-color: rgb(138, 255, 234);
    }
    .div33 {
        grid-area: 4 / 15 / 5 / 16;
        background-color: rgb(138, 255, 234);
    }
    .div34 {
        grid-area: 4 / 16 / 5 / 17;
        background-color: rgb(118, 255, 168);
    }
    .div35 {
        grid-area: 4 / 17 / 5 / 18;
        background-color: rgb(118, 255, 168);
    }
    .div36 {
        grid-area: 4 / 18 / 5 / 19;
        background-color: rgb(210, 113, 255);
    }
    .div37 {
        grid-area: 5 / 1 / 6 / 2;
        background-color: rgb(255, 143, 83);
    }
    .div38 {
        grid-area: 5 / 2 / 6 / 3;
        background-color: rgb(251, 255, 121);
    }
    .div39 {
        grid-area: 5 / 3 / 6 / 4;
        background-color: rgb(255, 118, 109);
    }
    .div40 {
        grid-area: 5 / 4 / 6 / 5;
        background-color: rgb(255, 118, 109);
    }
    .div41 {
        grid-area: 5 / 5 / 6 / 6;
        background-color: rgb(255, 118, 109);
    }
    .div42 {
        grid-area: 5 / 6 / 6 / 7;
        background-color: rgb(255, 118, 109);
    }
    .div43 {
        grid-area: 5 / 7 / 6 / 8;
        background-color: rgb(255, 118, 109);
    }
    .div44 {
        grid-area: 5 / 8 / 6 / 9;
        background-color: rgb(255, 118, 109);
    }
    .div45 {
        grid-area: 5 / 9 / 6 / 10;
        background-color: rgb(255, 118, 109);
    }
    .div46 {
        grid-area: 5 / 10 / 6 / 11;
        background-color: rgb(255, 118, 109);
    }
    .div47 {
        grid-area: 5 / 11 / 6 / 12;
        background-color: rgb(255, 118, 109);
    }
    .div48 {
        grid-area: 5 / 12 / 6 / 13;
        background-color: rgb(255, 118, 109);
    }
    .div49 {
        grid-area: 5 / 13 / 6 / 14;
        background-color: rgb(77, 130, 255);
    }
    .div50 {
        grid-area: 5 / 14 / 6 / 15;
        background-color: rgb(77, 130, 255);
    }
    .div51 {
        grid-area: 5 / 15 / 6 / 16;
        background-color: rgb(138, 255, 234);
    }
    .div52 {
        grid-area: 5 / 16 / 6 / 17;
        background-color: rgb(138, 255, 234);
    }
    .div53 {
        grid-area: 5 / 17 / 6 / 18;
        background-color: rgb(118, 255, 168);
    }
    .div54 {
        grid-area: 5 / 18 / 6 / 19;
        background-color: rgb(210, 113, 255);
    }
    .div55 {
        grid-area: 6 / 1 / 7 / 2;
        background-color: rgb(255, 143, 83);
    }
    .div56 {
        grid-area: 6 / 2 / 7 / 3;
        background-color: rgb(251, 255, 121);
    }
    .div57 {
        grid-area: 6 / 3 / 7 / 4;
        background-color: rgb(239, 148, 87);
    }
    .div72 {
        grid-area: 6 / 4 / 7 / 5;
        background-color: rgb(255, 118, 109);
    }
    .div73 {
        grid-area: 6 / 5 / 7 / 6;
        background-color: rgb(255, 118, 109);
    }
    .div74 {
        grid-area: 6 / 6 / 7 / 7;
        background-color: rgb(255, 118, 109);
    }
    .div75 {
        grid-area: 6 / 7 / 7 / 8;
        background-color: rgb(255, 118, 109);
    }
    .div76 {
        grid-area: 6 / 8 / 7 / 9;
        background-color: rgb(255, 118, 109);
    }
    .div77 {
        grid-area: 6 / 9 / 7 / 10;
        background-color: rgb(255, 118, 109);
    }
    .div78 {
        grid-area: 6 / 10 / 7 / 11;
        background-color: rgb(255, 118, 109);
    }
    .div79 {
        grid-area: 6 / 11 / 7 / 12;
        background-color: rgb(255, 118, 109);
    }
    .div80 {
        grid-area: 6 / 12 / 7 / 13;
        background-color: rgb(255, 118, 109);
    }
    .div81 {
        grid-area: 6 / 13 / 7 / 14;
        background-color: rgb(77, 130, 255);
    }
    .div82 {
        grid-area: 6 / 14 / 7 / 15;
        background-color: rgb(77, 130, 255);
    }
    .div83 {
        grid-area: 6 / 15 / 7 / 16;
        background-color: rgb(77, 130, 255);
    }
    .div84 {
        grid-area: 6 / 16 / 7 / 17;
        background-color: rgb(77, 130, 255);
    }
    .div85 {
        grid-area: 6 / 17 / 7 / 18;
        background-color: rgb(138, 255, 234);
    }
    .div86 {
        grid-area: 6 / 18 / 7 / 19;
        background-color: rgb(210, 113, 255);
    }
    .div87 {
        grid-area: 7 / 1 / 8 / 2;
        background-color: rgb(255, 143, 83);
    }
    .div88 {
        grid-area: 7 / 2 / 8 / 3;
        background-color: rgb(251, 255, 121);
    }
    .div89 {
        grid-area: 7 / 3 / 8 / 4;
        background-color: rgb(255, 155, 215);
    }
    .div104 {
        grid-area: 7 / 4 / 8 / 5;
        background-color: rgb(255, 118, 109);
    }
    .div105 {
        grid-area: 7 / 5 / 8 / 6;
        background-color: rgb(255, 118, 109);
    }
    .div106 {
        grid-area: 7 / 6 / 8 / 7;
        background-color: rgb(255, 118, 109);
    }
    .div107 {
        grid-area: 7 / 7 / 8 / 8;
        background-color: rgb(255, 118, 109);
    }
    .div108 {
        grid-area: 7 / 8 / 8 / 9;
        background-color: rgb(255, 118, 109);
    }
    .div109 {
        grid-area: 7 / 9 / 8 / 10;
        background-color: rgb(161, 152, 152);
    }
    .div110 {
        grid-area: 7 / 10 / 8 / 11;
        background-color: rgb(161, 152, 152);
    }
    .div111 {
        grid-area: 7 / 11 / 8 / 12;
        background-color: rgb(161, 152, 152);
    }
    .div112 {
        grid-area: 7 / 12 / 8 / 13;
        background-color: rgb(161, 152, 152);
    }
    .div113 {
        grid-area: 7 / 13 / 8 / 14;
        background-color: rgb(161, 152, 152);
    }
    .div114 {
        grid-area: 7 / 14 / 8 / 15;
        background-color: rgb(161, 152, 152);
    }
    .div115 {
        grid-area: 7 / 15 / 8 / 16;
        background-color: rgb(161, 152, 152);
    }
    .div116 {
        grid-area: 7 / 16 / 8 / 17;
        background-color: rgb(161, 152, 152);
    }
    .div117 {
        grid-area: 7 / 17 / 8 / 18;
        background-color: rgb(161, 152, 152);
    }
    .div118 {
        grid-area: 7 / 18 / 8 / 19;
        background-color: rgb(161, 152, 152);
    }
    .ltable {
        display: grid;
        grid-template-columns: repeat(14, 3.125rem);
        grid-template-rows: repeat(2, 3.125rem);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        margin-left: 9.375rem;
        margin-right: 3.125rem;
        margin-top: 25px;

        }

        .div58 {
                        grid-area: 1 / 1 / 2 / 2;
                        background-color: rgb(239, 148, 87);
                    }
                    .div59 {
                        grid-area: 1 / 2 / 2 / 3;
                        background-color: rgb(239, 148, 87);
                    }
                    .div60 {
                        grid-area: 1 / 3 / 2 / 4;
                        background-color: rgb(239, 148, 87);
                    }
                    .div61 {
                        grid-area: 1 / 4 / 2 / 5;
                        background-color: rgb(239, 148, 87);
                    }
                    .div62 {
                        grid-area: 1 / 5 / 2 / 6;
                        background-color: rgb(239, 148, 87);
                    }
                    .div63 {
                        grid-area: 1 / 6 / 2 / 7;
                        background-color: rgb(239, 148, 87);
                    }
                    .div64 {
                        grid-area: 1 / 7 / 2 / 8;
                        background-color: rgb(239, 148, 87);
                    }
                    .div65 {
                        grid-area: 1 / 8 / 2 / 9;
                        background-color: rgb(239, 148, 87);
                    }
                    .div66 {
                        grid-area: 1 / 9 / 2 / 10;
                        background-color: rgb(239, 148, 87);
                    }
                    .div67 {
                        grid-area: 1 / 10 / 2 / 11;
                        background-color: rgb(239, 148, 87);
                    }
                    .div68 {
                        grid-area: 1 / 11 / 2 / 12;
                        background-color: rgb(239, 148, 87);
                    }
                    .div69 {
                        grid-area: 1 / 12 / 2 / 13;
                        background-color: rgb(239, 148, 87);
                    }
                    .div70 {
                        grid-area: 1 / 13 / 2 / 14;
                        background-color: rgb(239, 148, 87);
                    }
                    .div71 {
                        grid-area: 1 / 14 / 2 / 15;
                        background-color: rgb(239, 148, 87);
                        }
        .div90 {
            grid-area: 2 / 1 / 3 / 2;
            background-color: rgb(255, 155, 215);
        }
        .div91 {
            grid-area: 2 / 2 / 3 / 3;
            background-color: rgb(255, 155, 215);
        }
        .div92 {
            grid-area: 2 / 3 / 3 / 4;
            background-color: rgb(255, 155, 215);
        }
        .div93 {
            grid-area: 2 / 4 / 3 / 5;
            background-color: rgb(255, 155, 215);
        }
        .div94 {
            grid-area: 2 / 5 / 3 / 6;
            background-color: rgb(255, 155, 215);
        }
        .div95 {
            grid-area: 2 / 6 / 3 / 7;
            background-color: rgb(255, 155, 215);
        }
        .div96 {
            grid-area: 2 / 7 / 3 / 8;
            background-color: rgb(255, 155, 215);
        }
        .div97 {
            grid-area: 2 / 8 / 3 / 9;
            background-color: rgb(255, 155, 215);
        }
        .div98 {
            grid-area: 2 / 9 / 3 / 10;
            background-color: rgb(255, 155, 215);
        }
        .div99 {
            grid-area: 2 / 10 / 3 / 11;
            background-color: rgb(255, 155, 215);
        }
        .div100 {
            grid-area: 2 / 11 / 3 / 12;
            background-color: rgb(255, 155, 215);
        }
        .div101 {
            grid-area: 2 / 12 / 3 / 13;
            background-color: rgb(255, 155, 215);
        }
        .div102 {
            grid-area: 2 / 13 / 3 / 14;
            background-color: rgb(255, 155, 215);
        }
        .div103 {
            grid-area: 2 / 14 / 3 / 15;
            background-color: rgb(255, 155, 215);
        }
        

body {
    background-color: #222831;
}