:root{

    
    --color-Sd:rgb(251, 36, 36);    /*Sprawdzian*/
    --border-Sd:rgb(52, 0, 0);      /*Sprawdzian*/

    --color-Zd: rgb(186, 139, 77);  /*Zdanie domowe*/
    --border-Zd: rgb(255, 253, 232);/*Zdanie domowe*/

    --color-K: rgb(255, 123, 0);    /*Kartkówka*/
    --border-K: rgb(141, 68, 0);    /*Kartkówka*/

    --color-Pa:rgb(127, 25, 79);    /*Przepytka*/
    --border-Pa:rgb(157, 0, 255);   /*Przepytka*/

    --color-Sn:rgb(80, 147, 20);;   /*Sprawozdanie*/
    --border-Sn:rgb(43, 255, 0);;   /*Sprawozdanie*/
    
    --color-Pj:rgb(21, 167, 150);   /*Prezentacja*/
    --border-Pj:rgb(0, 255, 225);   /*Prezentacja*/
    
}



.CCB-Category{
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    margin-right: 5px;
    background-color: aqua;
    font-size: 15px;
    border: 2px solid red;
    word-break:keep-all;
    color: white;
    font-weight: 500;
    transform: scale(1.2) rotate(5deg);
    transition: 0.2s ease;
}
.CCB-Category::first-letter{
    font-size: 20px;
    
}

.CCB-Category[data-category="K"]{
    background-color: var(--color-K);
    border: 2px solid var(--border-K);
}
.CCB-Category[data-category="Pj"]{
    background-color: var(--color-Pj);
    border: 2px solid var(--border-Pj);
}
.CCB-Category[data-category="Pa"]{
    background-color: var(--color-Pa);
    border: 2px solid var(--border-Pa);
}
.CCB-Category[data-category="Sd"]{
    background-color: var(--color-Sd);
    border: 2px solid var(--border-Sd);
}
.CCB-Category[data-category="Sn"]{
    background-color: var(--color-Sn);
    border: 2px solid var(--border-Sn);
}
.CCB-Category[data-category="Zd"]{
    background-color: var(--color-Zd);
    border: 2px solid var(--border-Zd);
}