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

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

/*******************************************************************************************/

body{
    background-image: url(./2d-3d_falling_images_images/background.JPG),
    url(./2d-3d_falling_images_images/background_2.JPG);
    background-position: left top, right top;
    background-size: 100% auto;
    background-repeat: no-repeat, repeat;
}

.name_header h1{
    font-size: 80px;
    font-style: italic;
    color: lightgray;
    -webkit-text-stroke: 2px black;                                                         /* окантовка букв */
    text-shadow: 20px 10px rgba(0,0,0,0.9);
    text-align: center;
}

.name_header{                                                                                 /* позиционирование контейнера с названием */
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 1000px;
}

/*******************************************************************************************/

html{ overflow: hidden; }

.first_image{
    position: absolute;
    z-index: 9;
    left: 50%;
    top: 10%;
    transform: skew(20deg, -30deg) scale(0.8);
    box-shadow: -40px 40px 40px rgba(0,0,0,0.8);
    animation-name: first_image_go;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes first_image_go{
    0% { top: -500px; }
    100% { top: 1500px; left: 2150px; }
}

.second_image{
    position: absolute;
    z-index: 8;
    left: -5%;
    top: 10%;
    visibility: hidden;
    transform: skew(20deg, -30deg) scale(1.0);
    box-shadow: -40px 40px 40px rgba(0,0,0,0.8);
    animation-name: second_image_go;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 4s;
    will-change: top, left;
}

@keyframes second_image_go{
    0% { top: -500px; visibility: visible; }
    100% { top: 1500px; left: 1000px; }
}