.canvas-container {
}

.canvas-wrap {
    max-height: 100vh;
    width: 100%;
    align-items: flex-end;
    align-content: flex-end;
}

#canvas {
    position: relative;
    object-fit: contain;
    object-position: left bottom;
    height: 100vh;
}

.text {
    position: absolute;
    color: white;
}

.spacer {
    height: 0vh;
}

.text.fading {
    opacity: 0;
    visibility: hidden;
}

.bg_text_scroll {
    background-color: #000000;
    padding: 20px;
}

.loading-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* @media (min-width:1920px) {
    .text_scroll {
        top: 50vh;
        left: 85vw;
        max-width: 30vw !important;
        font-size: 2vh;
    }
}

@media (min-width:600px) and (max-width:3919px){
    .text_scroll {
        top: 50vh;
        left: 50vw;
        max-width: 80vw !important;
        font-size: 2vh;
        background-color: rgba(0, 0, 0, 0.79);
        padding: 20px;
        width: 760px;
        border-radius: 20px;
    }
}

@media (max-width:599px) {
    .text_scroll {
        top: 50vh;
        left: 50vw;
        max-width: 350px!important;
        font-size: 2vh;
        background-color: rgba(0, 0, 0, 0.79);
        padding: 20px;
        width: 350px;
        border-radius: 20px;
    }
} */
@media (max-width:1024px) {
    canvas {
        width: 100%;
        height: 100%;
        object-position: 80% 30%;
        object-fit: cover;
    }
}

@media (min-width:50px) and (max-width:599px) {
    .text_scroll {
        top: 30vh;
        left: 50vw;
        max-width: 90vw!important;
        font-size: 2vh;
        background-color: rgba(0, 0, 0, 0);
        padding: 20px;
        width: 90vw;
        border-radius: 10px;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(0, 0, 0, 0.35);
    }
}

@media (min-width:600px) and (max-width:649px){
    .text_scroll {
        top: 30vh;
        left: 70vw;
        max-width: 80vw !important;
        font-size: 2vh;
        background-color: rgba(0, 0, 0, 0);
        padding: 20px;
        width: 50vh;
        border-radius: 20px;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(0, 0, 0, 0.35);
    }
}

@media (min-width:650px) and (max-width:1450px){
    .text_scroll {
        top: 30vh;
        left: 70vw;
        max-width: 90vw !important;
        font-size: 2vh;
        padding: 30px;
        width: 50vw;
        border-radius: 20px;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(0, 0, 0, 0.35);
    }
}

@media (min-width:1451px) and (max-width:1919px){
    .text_scroll {
        top: 50vh;
        left: 70vw;
        max-width: 80vw !important;
        font-size: 2vh;
        background-color: rgba(0, 0, 0, 0);
        padding: 20px;
        width: 80vh;
        border-radius: 20px;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(0, 0, 0, 0.35);
    }
}

@media (min-width:1920px) and (max-width:4920px) {
    .text_scroll {
        top: 50vh;
        left: 75vw;
        max-width: 80vw !important;
        font-size: 2vh;
        background-color: rgba(0, 0, 0, 0);
        padding: 25px;
        width: 70vh;
        border-radius: 20px;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(0, 0, 0, 0.35);
    }
}