* {padding: 0; margin: 0; box-sizing: border-box;}

html{
    background: lightgrey;
}

body{
    background: cadetblue;
    margin: 20px;
    /* height: calc(100vh - 20px);
    width: calc(100% - 20px); */
    box-shadow: black 5px 5px 10px;
    border: 1px solid grey;
}

.container{
    padding: 10px;
    margin: 10px;
    border: dotted 2px greenyellow;
    border-radius:1em;
}

p{
    font-size: 1.3em;
    text-align: justify;
    text-indent: 2em;
}
/* p{
    padding-bottom: 1em;
} */
p:not(:last-of-type){
    padding-bottom: 1em;
}
p::first-line{
    font-weight:bold;
}
p::first-letter{
    font-size: 2em;
    border: 1px solid black;
    padding: 0.1em 0.3em;
    background: black;
    color: white;
    border-radius: 50%;
    border: 3px dotted white;
}
p:nth-child(2n-1)::selection{
    color: blue;
    background: orangered;
}
p:nth-child(even){
    color: red;
}
.here{
    background: green;
}
.here::before{
    content: "To jest przed: "; color: white;
    border-bottom: white solid 1px;
}
.here::after{
    content: " To jest po";
    color: yellow;
    border-bottom: 1px white;

}
.here:hover::after{
    content: " Zabieraj myszkę";
    color: aliceblue;
    transition: 2s;
}