@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

#playground > p:nth-child(3){
    font-family: 'Orbitron';
}
#playground > p:nth-child(4){
    font-family: 'Ballet';
}
#playground > section{
    display: flex;
    width: 100%;
}
#playground > section > section{
    display: flex;
    width: 45%;
    justify-content: center;
    text-align: center;
    margin: auto;
    border: 3px solid black;
    border-radius: 20px;
    flex-direction: column;
    align-items: center;
}
ul{
    padding-left: 0px;
}
ul > li{
    margin-bottom: 10px;
    border: 1px solid black;
    border-radius: 10px;
    text-align: center;
    padding: 3px;
}
#wlasciwosci> ul > li:nth-child(1):hover{
    font-family: 'Times New Roman';
}
#wlasciwosci> ul > li:nth-child(2){
    transition: all 0.5s ease-in-out;
}
#wlasciwosci> ul > li:nth-child(2):hover{
    font-size: 25px;
    transition: all 0.5s ease-in-out;
}
#wlasciwosci> ul > li:nth-child(3):hover{
    font-weight: bolder ;
}
#wlasciwosci> ul > li:nth-child(4):hover{
    font-style:italic;
}
#wlasciwosci> ul > li:nth-child(5):hover{
    font-variant: small-caps;
}
#efekty> ul > li:nth-child(1):hover{
    text-transform: uppercase;
}
#efekty> ul > li:nth-child(2):hover{
    text-shadow: 1px 1px 2px gray;
}
#efekty> ul > li:nth-child(3):hover{
    text-decoration: wavy underline red;
}
#efekty> ul > li:nth-child(4):hover{
    letter-spacing: 2px;
}
#efekty> ul > li:nth-child(5):hover{
    word-spacing: 7px;
}