:root {
    --digits-1-fs: 2.5rem;
}

.landing-text {
    color: var(--text-color);
    text-align: justify;
    font-size: 1.15em;
}

#paralax-1,
#paralax-2,
#paralax-3 {
    position: relative;
    width: 100%;
    height: 256px;
}

#paralax-1 {
    margin-top: 6rem;
    margin-bottom: 6rem; 
}

#paralax-2 {
    margin-top: 7rem;
    margin-bottom: 4rem;
}

#paralax-3 {
    margin-top: 8rem;
    margin-bottom: 8rem; 
}

.digits-1, .digits-2, .digits-3 {
    position: absolute;
}

.digits-1 {
    font-size: var(--digits-1-fs);
    font-weight: 600;
    color: rgba(194, 212, 226, 1);
    text-shadow: 0.05em 0.04em rgba(194, 212, 226, 0.4);
    z-index: -1;
    opacity: 1;
}

.digits-2 {
    font-size: calc(0.8 * var(--digits-1-fs));
    font-weight: 600;
    color: rgba(168, 170, 213, 1);
    text-shadow: 0.05em 0.04em rgba(168, 170, 213, 0.4);
    z-index: -10;
    opacity: 0.8;
}

.digits-3 {
    font-size: calc(0.4 * var(--digits-1-fs));
    font-weight: 600;
    color: rgba(125, 129, 210, 1);
    text-shadow: 0.05em 0.04em rgba(125, 129, 210, 0.4);
    z-index: -100;
    opacity: 0.8;
}

/* paralx-1 */
#paralax-1 .digits-1-1-1 {
    top: 50%;
    left: 8%;
}
#paralax-1 .digits-1-2-1 {
    top: -15%;
    right: 13%;
}

#paralax-1 .digits-2-1-1{
    top: -8%;
    left: 9%;
}
#paralax-1 .digits-2-1-2 {
    top: 20%;
    left: 35%;
}
#paralax-1 .digits-2-1-3 {
    top: 30%;
    right: 8%;
}

#paralax-1 .digits-3-1-1 {
    top: -20%;
    left: 0;
}
#paralax-1 .digits-3-1-2 {
    top: 5%;
    left: 40%;
}
#paralax-1 .digits-3-1-3 {
    top: 15%;
    right: 12%;
}
#paralax-1 .digits-3-2-1 {
    top: 20%;
    left: 7%;
}
#paralax-1 .digits-3-2-2 {
    top: 50%;
    left: 52%;
}
/* end of paralx-1 */


/* paralax-2 */
#paralax-2 .digits-1-1-1 {
    top: -80%;
    left: 10%;
}

#paralax-2 .digits-2-1-1{
    top: -40%;
    left: 0%;
}
#paralax-2 .digits-2-1-2 {
    top: -50%;
    right: 0%;
}
#paralax-2 .digits-2-2-1 {
    top: -20%;
    right: 20%;
}
#paralax-2 .digits-2-3-1{
    top: 10%;
    left: 9%;
}
#paralax-2 .digits-2-3-2 {
    top: 5%;
    right: 10%;
}

#paralax-2 .digits-3-1-1 {
    top: 0;
    left: 12%;
}
#paralax-2 .digits-3-1-2 {
    top: 0;
    right: 25%;
}
#paralax-2 .digits-3-2-1 {
    top: 20%;
    left: 40%;
}
#paralax-2 .digits-3-2-2 {
    top: 30%;
    right: 20%;
}
#paralax-2 .digits-3-3-1 {
    top: 60%;
    left: 0;
}
#paralax-2 .digits-3-3-2 {
    top: 65%;
    left: 45%;
}
/* end of paralx-2 */


/* paralax-3 */
#paralax-3 .digits-1-1-1 {
    top: -180%;
    left: 12%;
}
#paralax-3 .digits-1-1-2 {
    top: -150%;
    left: 40%;
}

#paralax-3 .digits-2-1-1{
    top: -100%;
    right: 6%;
}
#paralax-3 .digits-2-2-1 {
    top: -8%;
    left: 0;
}
#paralax-3 .digits-2-2-2 {
    top: -25%;
    right: 6%;
}

#paralax-3 .digits-3-1-1 {
    top: 0;
    left: 0;
}
#paralax-3 .digits-3-1-2 {
    top: -10%;
    left: 46%;
}
#paralax-3 .digits-3-1-3 {
    top: 40%;
    left: 60%;
}
#paralax-3 .digits-3-2-1 {
    top: 60%;
    left: 6%;
}
#paralax-3 .digits-3-2-2 {
    top: 80%;
    left: 20%;
}
#paralax-3 .digits-3-2-3 {
    top: 100%;
    left: 40%;
}
#paralax-3 .digits-3-2-4 {
    top: 110%;
    right: 0;
}

/* end of paralax-3 */

@media(max-width:1200px){
    .landing-text {
        font-size: calc((1.375rem + 1.5vw) * 0.5);
    }
}

@media(max-width:767px){
    #paralax-1,
    #paralax-2,
    #paralax-3 {
        display: none;
    }
}