* {
    margin: 0;
}

h1 {
    text-align: center;         /*Выравнивание текста header по центру*/
}

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

header {
    margin-top: 25px;           /*Внешний отступ сверху*/
    margin-bottom: 25px;        /*Внешний отступ снизу*/
}

body {
    margin-left: 20px;          /*Внешний отступ слева*/
}

.content {
    display: flex;              /*Все элементы располагаются по горизонтали 2 дива class="name_frame" и "cats_class"*/
    flex-direction: column;     /*Расположение элементов по вертикали */
    align-items: center;        /*Выравнивание по вертикали*/
    justify-content: center;    /*Выравнивание по горизонтали*/
    text-align: center;         /*Расположение элементов по центру кроме тех которые содержатся в блоке flex*/
}

.name_frame {
    border: 1px solid rosybrown;    /*Толщина рамки сплошная линия розовым цветом. dotted: Граница состоит из серии точек.*/
    width: 800px;                   /*Ширина рамки*/
    height: 600px;                  /*Высота рамки*/
    padding-top: 30px;              /*Внутренний отступ (отступ внутри блока) с верху*/
    background-color: lightsteelblue;   /*Цвет фона*/
}

.cats_class {
    display: flex;                      /*Все элементы располагаются по горизонтали*/
    align-items: center;                /*Выравнивание по вертикали*/
    justify-content: center;            /*Выравнивание по горизонтали*/
}

.cats_class div {
    border-radius: 0px;                 /*Радиус скругления углов*/
    border: 1px solid rosybrown;        /*Толщина рамки сплошная линия розовым цветом. dotted: Граница состоит из серии точек.*/
    padding: 16px;                      /*Внутренний отступ свсех краев*/
}

.ramka {
    border: 2px solid red;              /*Толщина рамки сплошная линия розовым цветом. dotted: Граница состоит из серии точек.*/
    width: 50%;                         /*Ширина рамки. Высота в процентах не определяется*/
}
.name {
    display: flex;                      /*Все элементы располагаются по горизонтали*/
    flex-direction: column;             /*Расположение элементов по вертикали */
    align-items: center;                /*Выравнивание по вертикали*/
    justify-content: center;            /*Выравнивание по горизонтали*/
    border: 5px solid green;            /*Толщина рамки сплошная линия розовым цветом. dotted: Граница состоит из серии точек.*/
}

.name iframe {
    width: 90%;                         /*Ширина iframe в котором располагается большая картинка*/
    height: 530px;                      /*Высота в процентах не определяется*/
}

.cats_home2 {
    display: flex;                      /*Все элементы располагаются по горизонтали (маленькие картинки)*/
}

.cats_home2 img {
    border: 2px solid red;               /*Рамка вокруг картинок*/
    width: 100%;                         /*Ширина*/
    height: 100%;                        /*Высота*/
}

/*.cats_home2>a>img {*/                  /*Обращение к под элементу верхнего уровня (не включает все под элементы класса в отличии от .name div)*/
/*    width: 100%;*/                     /*Ширина*/
/*    height: 100%;*/                    /*Высота*/
/*}*/

.code {
    display: flex;
}

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

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