* {
    margin: 0;                      /*Внешний отступ по умолчанию у всех элементов*/
}
main {
    margin: 20px;                   /*Отступ со всех краёв главной страницы*/
}
/*Блочный элемент*/
h1 {
    text-align: center;             /*Выравнивание текста по центру блока*/
    margin-bottom: 20px;            /*Внешний отступ с низу*/
    background-color: brown;        /*Цвет заливки*/
}
/*Блочный элемент*/
h2 {
    background-color: #F4A460;      /*Цвет заливки*/
    border-radius: 15px;            /*Радиус скругления углов*/
}

/*Блочный элемент. Занимает все место в блоке main*/
.storage {
    display: flex;                    /*Расположение элементов в режиме флекс (div class="products")*/
    align-items: center;              /* Выравнивание по вертикали */
    justify-content: center;          /* Выравнивание по горизонтали */
    flex-wrap: wrap;                  /* Перенос элементов при сужении окна*/
    gap: 50px;                        /* Расстояние между элементами */
    border-radius: 80px;              /*Радиус скругления углов*/
    border: 2px solid royalblue;      /* Толщина рамки сплошная линия рыжим цветом */
    padding-top: 40px;                /*Внутренний отступ (отступ внутри блока) с верху*/
    padding-bottom: 40px;             /*Внутренний отступ (отступ внутри блока) с верху*/
}

/*Блочный элемент. В нем располагаются элементы отдельного продукта*/
.product {
    border-radius: 20px;        /*Радиус скругления углов рамки*/
    border: 2px solid red;      /* Толщина рамки сплошная линия красным цветом. solid: Сплошная линия. */
    width: 900px;               /*Ширина рамки*/
    height: 650px;              /*Высота рамки*/
    padding-top: 20px;          /*Внутренний отступ (отступ внутри блока) с верху*/
    padding-left: 20px;         /*Внутренний отступ (отступ внутри блока) с лева*/
    padding-right: 20px;        /*Внутренний отступ (отступ внутри блока) с права*/
    display: flex;              /*Расположение элементов в режиме флекс (<h2> div class="picture" <h3>)*/
    flex-direction: column;     /*Расположение элементов по вертикали (<h2> div class="picture" <h3>)*/
    gap: 20px;                  /*Расстояние между элементами по вертикали*/
    text-align: center;         /*Расположение элементов по центру кроме тех которые содержатся в блоке flex (div class=".small")*/
}

/*Блочный элемент. В нем располагаются элементы div под картинки (div class="big" и div class="small")*/
.picture {
    display: flex;                          /*Расположение элементов в режиме флекс (div class="big" и div class="small")*/
    align-items: center;                    /*Выравнивание по вертикали*/
    justify-content: center;                /*Выравнивание по горизонтали*/
    border-radius: 10px;                    /*Радиус скругления углов рамки*/
    border: 2px dashed rebeccapurple;       /*Толщина рамки сплошная линия фиолетовым цветом. dashed: Граница состоит из серии тире.*/
}

/*Блочный элемент. В нем располагается большая картинка*/
.big {
    border-radius: 20px;                /*Радиус скругления углов рамки*/
    border: 2px dotted rosybrown;       /*Толщина рамки сплошная линия розовым цветом. dotted: Граница состоит из серии точек.*/
    width: 90%;                         /*Ширина рамки*/
    height: 500px;                      /*Высота рамки*/
    margin: 10px;                       /*Внешний отступ со всех краёв*/
}

/*Элемент большой картинки*/
.big_image {
    width: 70%;              /*Ширина большой картинки*/
    height: 100%;            /*Высота большой картинки*/
}

.small {
    border-radius: 20px;                    /*Радиус скругления углов рамки*/
    border: 2px dotted rosybrown;           /*Толщина рамки сплошная линия розовым цветом. dotted: Граница состоит из серии точек.*/
    width: 20%;                             /*Ширина рамки*/
    height: 500px;                          /*Высота рамки*/
    margin: 10px;                           /*Внешний отступ со всех краёв*/
    display: flex;                          /*Расположение элементов в режиме флекс (img class="small_image"*3)*/
    align-items: center;                    /*Выравнивание по вертикали*/
    flex-direction: column;                 /*Расположение элементов по вертикали (картинки)*/
    gap: 40px;                              /*Расстояние между элементами по вертикали*/
}

.small_image {
    width: 70%;             /*Ширина маленькой картинки*/
    height: 20%;            /*Высота большой картинки*/
}

.code {
    display: flex;
}

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

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