:root{
    color-scheme: dark;
    min-height: 100vh;
}
body{
    background-color: rgb(48, 48, 48);
}
div>div{
    margin: .5em;
}
div>h1, div>h2{
    text-align: center;
}
.origin1{
    border: 10px dotted black;
    padding: 20px;
    background-image: url(../Lekcja%2012/patterns/p-02.jpg);
    background-origin: border-box;  
    background-repeat: no-repeat;
    height: 100px;
    width: 140px;
}
.origin2{
    border: 10px dotted black;
    padding: 20px;
    background-image: url(../Lekcja%2012/patterns/p-02.jpg);
    background-origin: padding-box;
    background-repeat: no-repeat;
    height: 100px;
    width: 140px;
    
}
.origin2>h2{
    font-size: 1.6em;
}

.origin3{
    border: 10px dotted black ;
    padding: 20px;
    background-image: url(../Lekcja%2012/patterns/p-02.jpg);
    background-origin: content-box;  
    background-repeat: no-repeat;
    height: 100px;
    width: 140px;
}
div>h2{
    color: black; 
    background: gainsboro; 
    font-size: 1.7em;
}
div>h1{
    color: black;
    background: gainsboro; 
}
.flex{
    display: flex;
    flex-wrap: wrap;
}
.clip1{
    border: 10px dotted black;
    padding: 20px;
    background-image: url(../Lekcja%2012/patterns/p-02.jpg);
    background-clip: border-box; 
    height: 100px;
    width: 140px;
}
.clip2{
    border: 10px dotted black;
    padding: 20px;
    background-image: url(../Lekcja%2012/patterns/p-02.jpg);
    background-clip: padding-box; 
    height: 100px;
    width: 140px;
}
.clip3{
    border: 10px dotted black;
    padding: 20px;
    background-image: url(../Lekcja%2012/patterns/p-02.jpg);
    background-clip: content-box; 
    height: 100px;
    width: 140px;
}
.clip4{
    border: 10px dotted black;
    padding: 20px;
    background-image: url(../Lekcja%2012/patterns/p-02.jpg);
    background-clip: text;
    -webkit-background-clip: text; 
    color: transparent;
    height: 100px;
    width: 140px;
}
.rad1>h1, .grad3 > h1, .grad2>h1, .grad1>h1, .clip4 > h1{
    color: transparent;
    text-align: center;
    font-size: 2.5em;
    background: none;
}
.rad1>h1, .grad3 > h1, .grad1>h1, .grad2 >h1{
    color: whitesmoke;
}
.grad1{
    height: 100px;
    width: 140px;
    text-align: center;
    background: linear-gradient(rgb(0, 90, 255), rgb(255, 0, 100));

}
.grad2{
    height: 100px;
    width: 140px;
    text-align: center;
    background: linear-gradient(0.25turn, rgb(0, 90, 255), rgb(255, 0, 100));

}
.grad3{
    height: 100px;
    width: 140px;
    text-align: center;
    background: linear-gradient(to left top, rgb(0, 90, 255), rgb(255, 0, 100));

}
.rad1{
    height: 100px;
    width: 140px;
    background: radial-gradient(5em, black, 4em, white);
}