body {
    display: block;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-color: #000000;
}

.layer {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    overflow: visible;
}

.first {}

.second {}

.third {}

.third2 {}

.background {
    margin: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background: url(../img/5.webp) left bottom;
    left: 10%;
    top: 10%;
    background-size: auto 100%;
    transform: scale(1.3);
}

.screen-blend {
    mix-blend-mode:lighten;
}

.layerImage {
    margin: 0;
    height: 100%;
    position: absolute;
    width: 100%;
    background-position: left bottom;
    background-repeat: repeat-y;
    background-size: auto 100%;
    left: 0%;
    transform: scale(1.3);

}

/* 01 */
@media (max-aspect-ratio: 1/1) {

    /* this is the same as not using a media query... */
    .background {
        background-position: 70% 50%;
        transform: scale(1.5);
    }

    .layerImage {
        background-position: 40% 50%;
        transform: scale(1.5);
        background-size: cover;
    }

}


.wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.scene {
    position: relative;
    padding: 0;
    margin: 0;
    display: block;
    height: 100%;
    width: 100%;
}

ul {
    list-style: none;
    display: block;
    padding: 0;
    margin: 0;



    /*margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
*/
}