body{
    background-color: blanchedalmond;
}
* {
    text-align: justify;
}

h1 {
    text-align: center;
    color: blue;
}

p {
    width: 50%;
    margin: auto;
    padding-bottom: 10px;
}

.color {
    font-weight: bold;
    color: blue
}

.normal::first-letter {
    /*For Safari and Webview, we have to use vendor prefixes.*/
    -webkit-initial-letter: normal;
    initial-letter: normal;
    color: red;
    font-weight: bold;
}

.fourLines::first-letter {
    -webkit-initial-letter: 4;
    initial-letter: 4;
    /*
    These 3 example will give back the same result as the initial-letter: 4
        initial-letter: 4 4;
        initial-letter: 4 drop;
        initial-letter: drop 4;
    */
}

.raised::first-letter {
    -webkit-initial-letter: 4;
    initial-letter: 4 1;
    /*Same: 
    initial-letter: 4 raise;
    initial-letter: raise 4;
    */
}

.sunken::first-letter {
    -webkit-initial-letter: 4 2;
    initial-letter: 4 2;
}

.notInt::first-letter {
    -webkit-initial-letter: 3.51 4;
    initial-letter: 3.51 4;
}

.fourLines::first-letter,
.sunken::first-letter {
    padding:4px 10px;
    margin-right: 5px;
    background: center / cover no-repeat url(inback.png);
}

.raised::first-letter,
.notInt::first-letter {
    padding:4px 10px;
    margin-right: 5px;
    background: center / cover no-repeat url(inback2.png);
}

:root{
    --initSize: 4;
    --initSink: 2;
}

.sliderInitial::first-letter{
    -webkit-initial-letter: var(--initSize) var(--initSink);
    initial-letter: var(--initSize) var(--initSink);
}

.controls{
    display: flex;
    justify-content: center;
    align-items: center;
}