germankraut

Чтобы явно указать анимируемое свойство и не нагружать браузер

вот так правильно

html{
    box-sizing: border-box;
}
*, *:after, *:before{
    box-sizing: inherit;
}

вот это вот:

tesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimselftesakdidntkimhimself

одно слово, оно не переносится.
если это принципиально, добавьте свойство word-wrap: break-word;

h1:first-letter, h2:first-letter, h3:first-letter {
}

h1:first-letter, h2:first-letter, h3:first-letter {стили}

Если вы используете препроцессор, то

h1, h2, h3 {
&::first-letter {стили}
}

p.s. извините за сторонний сайт, не умею загружать картинки на ваш.

А вы попробуйте код вставлять кодом, а не картинками. Всем будет удобнее.

Вот почему:

.shape {
    width: 469px;
    height: 214px;
    background-color: #ffffff;
    margin: 50px 50px 50px auto;
}