* { margin: 0px; }
* { padding: 0px; }

header h1{                                                                                      /* Шапка */
    font-size: 4em;
    text-align: center;
    margin-top: 1%;
    background-color: lightcyan;
    border-radius: 20px;
    border: 2px solid cyan;
    line-height: 200%;
}

section h2{                                                                                     /* Моя презентация */
    font-size: 2em;
    text-align: center;
    font-style: italic;
    margin-top: 1%;
    background: linear-gradient(to bottom right, lightcyan, white);
    border-radius: 20px;
    
    line-height: 400%;
    animation-name: my_presentation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes my_presentation{                                                                     /* анимация для моей презентации */
    50% { opacity: 0; transform: scale(2); }
    100% { opacity: 1; }
}

#first_background{
    margin-top: 2.5%;
    height: 2000px;
    background-image: url(./images_for_2d-3d/back_1.JPG);
    background-repeat: no-repeat;
    background-size: cover;
}

html{ 
    overflow-x: hidden;                                                                         /* очень важная настройка, которая не позволяет появляться полосе прокрутки снизу из-за анимации и прячет из области видимости очень широкую полосу с изображениями*/
}               

#gallery{
    height: 750px;
    width: 7903px;
    position: relative;
    animation-name: my_presentation_2;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#gallery img{                                                                                   /* собирает все блочные элеиенты img в одну полосу */
    display: block;
    float: left;
}

@keyframes my_presentation_2{                                                                   /* анимация для моей полосы с изображениями */
    0% { left: -4500px; }
    50% { left: 0; }
    100% { left: -4500px; }
}

#second_background{
    height: 2000px;
    background-image: url(./images_for_2d-3d/back_2.JPG);
    background-repeat: no-repeat;
    background-size: cover;
}

.download{                                                                                      /* контейнер для ссылок для сканичивания html/css-кода */
    position: fixed;   
    bottom: 0;
    right: 0;
    margin-right: 10em;
    margin-bottom: 10em;
}

.download a{                                                                                   /* форматирование ссылок для сканичивания html/css-кода */
    color: blue;
    text-decoration: underline;
}