/* Top scrolling image colage */
#marja_title {
    position: absolute;
    top: 40%;
    left: 10%;
    font-size: 14vh;
    cursor: default;
    z-index: 2;
    color: var(--primary);
}
@media (width <= 600px) {
    #marja_title {
        font-size: 8vh;
    }
}
#scroll_images_container {
    background-color: black;
    width: 100%;
    height: 97vh;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;

}
.scrolling_image_element {
    width: 100%;
    height: 100%;
    border: none;
    grid-column: 1;
    grid-row: 1;
    transition: opacity 1.0s ease;

    opacity: 0%; /*Changed with js*/
}
.scrolling_image_element:first-child {
    opacity: 100%; /*So that it starts with one alredy visable*/
}
#scroll_images_container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scrolling_image_element p {
    position: absolute;
    top: 80%;
    left: 75%;
    font-size: 2vh;
    margin: 0 5vh;
    color: whitesmoke;
    text-align: end;
}
@media (width <= 700px) {
    .scrolling_image_element p {
        font-size: 1.5vh;
        left: 0;
        width: calc(100% - 10vh);
    }
}
#transition_gradient {
    width: 100%;
    height: 5vh;
    position: absolute;
    top: 92vh;
    left: 0;
    background-image: linear-gradient(to bottom, transparent, var(--bg-1));
    z-index: 3;
}

/* Main */
main img#portrait {
    float: right;
    margin-left: 1rem;
}
@media (width <= 35rem) {
    main img#portrait {
        width: 100%;
    }
}