* {
    margin: 0;          /*Внешний отступ по умолчанию у всех элементов*/
    font-family: Courier, monospace;
}

main {
    margin-left: 100px;             /* Внешний отступ от края экрана */
    margin-right: 100px;            /* Внешний отступ от края экрана */
    /*margin-bottom: 50px;            /* Внешний отступ снизу экрана */
    /*margin-top: 20px;               /* Внешний отступ сверху от тега h1 */
    background-color: rosybrown;    /* Фоновый цвет */
 }

.book {
    display: flex;              /* Расположение элементов в режиме флекс по умолчанию горизонтально */
    gap: 50px;                  /* Расстояние между элементами */
    flex-wrap: wrap;            /* Перенос элементов */
    align-items: center;        /* Выравнивание по вертикали */
    justify-content: center;    /* Выравнивание по горизонтали */
    padding-top: 50px;          /* Внутренний отступ */
    padding-bottom: 50px;       /* Внутренний отступ */
 }

 /* Обращаемся ко всем элементам div внутри класса bool */
 .book div {
     /*width: 650px;                /* Ширина элемента div */
     width: 27%;                    /* Ширина элемента div */
     height: 900px;                 /* Высота элемента */
     /*background-color: bisque;    /* Фоновый цвет div */
     text-align: center;            /* Выравнивание всех элементов внутри div по центру (и <img> и <p>)*/
     padding: 20px;                 /* Внутренний отступ со всех сторон*/
     border-radius: 20px;           /* Скругление углов рамки */
     border: 5px double coral;      /* Толщина рамки двойная линия рыжим цветом */
 }

 img {
     width: 70%;                /* Ширина картинки от автоматического размера блока (экран делится на 4 элемента) */
     /*width: auto;             /* Автоматическая ширина картинки от автоматического размера блока (экран делится на 4 элемента) */
     /*width: max-content;                                                                                    */
     height: 70%;               /* Высота картинки от автоматического размера блока (экран делится на 4 элемента) */
     align-items: center;       /* Выравнивание по вертикали */
     justify-content: center;   /* Выравнивание по горизонтали */
 }

 p {
     text-align: justify;       /* Выравнивание только текста по ширине */
     margin-top: 20px;          /* Внешний отступ от картинки */
 }

 h2 {
     margin-bottom: 20px;       /* Внешний отступ снизу от тега h2 */
 }

 /*Заголовок*/
header {
    /*text-align: center;*/
    margin-left: 100px;             /* Внешний отступ от края экрана */
    margin-right: 100px;            /* Внешний отступ от края экрана */
    background-color: lightsteelblue;
    height: 100px;
    font-size: 18pt;

    /*выравнивание*/
    display: flex;
    align-items: center;
    justify-content: center;
}

/*Подвал*/
.one {
    display: flex;
    gap: 800px;
    justify-content: center;
    margin-bottom: 15px;
}

.copy {
    text-align: center;
    margin-top: 15px;
}

footer {
    background-color: #483D8B;
    color: white;
    font-size: 18px;
    padding: 20px;
    margin-left: 100px;
    margin-right: 100px;
}

.code {
    display: flex;
    width: 100%;
    border: 2px dotted rosybrown;
}

.code img {
    width: 100%;
}

.png-pycharm {
    display: flex;
    flex-direction: column;
}

.png-css {
    display: flex;
    flex-direction: column;
}