/* _content/VoksenBamse.UI/Pages/ConversationPage.razor.rz.scp.css */
.conversation-device[b-jostlp2fyo] {
    position: relative;
}
.conversation-title[b-jostlp2fyo] {
    position: absolute;
    top: 3%;
    left: 20%;
    z-index: 20;
    width: 60%;
    height: 6%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: rgb(240,240,240);
    border-radius: 5px;
    border: 0.5px solid rgb(240,240,240);
    box-shadow: 2px 2px 2px 2px rgb(50,50,50);
}
.conversation-title-text[b-jostlp2fyo] {
    font-family: 'Ink';
    font-size: 20pt;
    font-weight: 800;
    color: rgb(37, 68, 153);
    text-shadow: 1px 1px 0.5px rgba(125,206,225, 0.8);
}
.conversation-background[b-jostlp2fyo] {
    content: '';
    position: absolute;
    top: 0px;
    left: 1vw;
    width: calc(100% - 1vw);
    height: 100%;
    z-index: 9;
    background-color: rgba(15,15,15,0.9);
    border-radius: 10vh;
}
.conversation-frame[b-jostlp2fyo] {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10;
    background-image: url('images/phone-screen.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

    .conversation-frame[b-jostlp2fyo]::before {
        content: '';
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        z-index: 9;
        background-image: url('images/screen-glass.webp');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

.conversation-blocker[b-jostlp2fyo] {
    content: '';
    position: absolute;
    z-index: 10;
    backdrop-filter:blur(1000px) opacity(0.5); 
}

.blocker-top[b-jostlp2fyo] {
    top: 0px;
    left: 0px;
    right: 0px;
}

.blocker-bottom[b-jostlp2fyo] {
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.conversation-container[b-jostlp2fyo] {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 11;
    display: flex;
    flex-direction: column;
    padding: 2vw 8vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: unset;
    scrollbar-width: thin;
    scrollbar-arrow-color: rgb(189,160,202);
    scrollbar-color: rgba(225,247, 253, 0.7) rgba(0,0,0, 0.5);
}


.conversation-row[b-jostlp2fyo] {
    position: relative;
    z-index: 7;
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}

.row-left[b-jostlp2fyo] {
    justify-content: start;
}

.row-right[b-jostlp2fyo] {
    justify-content: end;
}


.conversation-block[b-jostlp2fyo] {
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(100,100,100);
    border-radius: 10px;
    padding: 10px;
}


.block-left[b-jostlp2fyo] {
    align-items: start;
    background-color: rgb(128, 128, 128);
    color: rgb(255,255,255);
    font-weight: 600;
}

.block-right[b-jostlp2fyo] {
    align-items: start;
    background-color: rgb(54, 121, 215);
    color: rgb(240,240,240);
    font-weight: 600;
}

@media (max-width: 700px) {
    .conversation-device[b-jostlp2fyo] {
        width: 100vw;
        height: calc(100vw / 439 * 862);
    }
    .conversation-block[b-jostlp2fyo] {
        width: 200px;
    }
    .conversation-container[b-jostlp2fyo] {
        top: 8.4%;
        bottom: 6%;
    }
    
    .blocker-top[b-jostlp2fyo] {
        height: 10%;
    }
    .blocker-bottom[b-jostlp2fyo] {
        height: 10%;
    }
    .conversation-title-text[b-jostlp2fyo] {
        font-size: 14pt;
    }
}

@media (min-width: 700px) {
    .conversation-device[b-jostlp2fyo] {
        width: 800px;
        height: calc(800px / 439 * 862);
    }
    .conversation-container[b-jostlp2fyo] {
        top: 8.4%;
        bottom: 6%;
    }

    .conversation-block[b-jostlp2fyo] {
        max-width: 300px;
    }
    .blocker-top[b-jostlp2fyo] {
        height: 2.4%;
    }
    .blocker-bottom[b-jostlp2fyo] {
        height: 2%;
    }
    .conversation-title-text[b-jostlp2fyo] {
        font-size: 20pt;
    }
}

/* _content/VoksenBamse.UI/Pages/Home.razor.rz.scp.css */
.quote-container[b-t7xx14syey] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;

}

.quote[b-t7xx14syey] {
    position: relative;
    font-family: 'SG';
    font-size: 12pt;
    font-weight: 700;
    animation-name: tremble-b-t7xx14syey;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}



@keyframes tremble-b-t7xx14syey {
    0% {
                
    }
    5% {
        transform: translate(1px, 1px);
    }
    10% {
        transform: translate(0px, -1px);
    }
    15% {
        transform: translate(2px, 2px);
    }
    20% {
        transform: translate(-2px, -2px);
    }

    25% {
        transform: translate(-3px, 1px);
    }

    30% {
        transform: translate(0px, -3px);
    }

    35% {
        transform: translate(4px, 2px);
    }
    40% {
        transform: translate(-1px, -4px);
    }

    45% {
        transform: translate(1px, 1px);
    }

    50% {
        transform: translate(0px, -1px);
    }

    55% {
        transform: translate(2px, 2px);
    }

    60% {
        transform: translate(-1px, -1px);
    }

    65% {
        transform: translate(1px, 1px);
    }

    70% {
        transform: translate(0px, -1px);
    }

    75% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(0px, -1px);
    }

    85% {
        transform: translate(2px, 2px);
    }

    90% {
        transform: translate(-1px, -1px);
    }

    95% {
        transform: translate(1px, 1px);
    }

    100% {
        transform: translate(0px, -1px);
    }

}



#quote-0[b-t7xx14syey] {
    left: -2vw;
    margin-top: 100px;
    transform: rotate(12deg);
    animation-delay: 0.1s;
}

#quote-1[b-t7xx14syey] {
    left: 3vw;
    margin-top: 80px;
    transform: rotate(-12deg);
    animation-delay: 2.1s;
}
#quote-2[b-t7xx14syey] {
    left: -3vw;
    margin-top: 120px;
    transform: rotate(12deg);
    animation-delay: 1.1s;
}
#quote-3[b-t7xx14syey] {
    left: 3vw;
    margin-top: 100px;
    transform: rotate(-12deg);
    animation-delay: 0.5s;
}
#quote-4[b-t7xx14syey] {
    left: -3vw;
    margin-top: 90px;
    transform: rotate(12deg);
    animation-delay: 0.7s;
}
#quote-5[b-t7xx14syey] {
    left: 3vw;
    margin-top: 100px;
    transform: rotate(-12deg);
}
#quote-6[b-t7xx14syey] {
    left: -3vw;
    margin-top: 120px;
    transform: rotate(12deg);
    animation-delay: 2.1s;
}
#quote-7[b-t7xx14syey] {
    left: 3vw;
    margin-top: 103px;
    transform: rotate(-12deg);
    animation-delay: 0.2s;
}
#quote-8[b-t7xx14syey] {
    left: -3vw;
    margin-top: 120px;
    transform: rotate(12deg);
    animation-delay: 0.4s;
}
/* _content/VoksenBamse.UI/Pages/Layout/MainLayout.razor.rz.scp.css */
.page[b-i6qo86zxxk] {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    font-family: 'SG';
    background-color: rgb(0,0,0);
    background-size: cover;
    overflow-y: hidden;
}

.background[b-i6qo86zxxk] {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    width: 1600px;
    height: 1600px;
    background-image: url('images/neon-background.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.neon-lights-container[b-i6qo86zxxk] {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1600px;
    height: 1600px;
}

#bamse-background[b-i6qo86zxxk] {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1600px;
    height: 1600px;
    z-index: 7;
    background-image: url('images/bamse-background.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation-name: bamse-b-i6qo86zxxk;
    animation-delay: 0s;
    animation-duration: 20s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

#neon-lights-bamse-container[b-i6qo86zxxk] {
    z-index: 4;
}
#neon-lights-blue-container[b-i6qo86zxxk] {
    z-index: 5;
}

#neon-lights-pink-container[b-i6qo86zxxk] {
    z-index: 6;
}


@keyframes bamse-b-i6qo86zxxk {
    0% {
        opacity: 0;
        filter: brightness(1);
    }
    100% {
        opacity: 1;
        filter: brightness(1.8);
    }
}
/* _content/VoksenBamse.UI/Pages/Layout/NeonLightsBamseComponent.razor.rz.scp.css */
#neon-lights-bamse[b-al6h7fkvk9] {
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1700;
    stroke-dashoffset: 1700;
    animation-name: drawing-b-al6h7fkvk9;
    animation-duration: 10s;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-delay: 0s;
}


@keyframes drawing-b-al6h7fkvk9 {
    0% {
        stroke: rgb(189,160,202);
        filter: brightness(1.8);
        stroke-dashoffset: 1700;
    }
    100% {
        stroke: rgb(225,247,253);
        filter: brightness(1.8);
        stroke-dashoffset: 0;
    }
}
/* _content/VoksenBamse.UI/Pages/Layout/NeonLightsBlueComponent.razor.rz.scp.css */
#neon-path-blue[b-c5e3w0hbgb] {
    animation-name: blinking-b-c5e3w0hbgb;
    animation-duration: 6s;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-delay: 0s;
}


@keyframes blinking-b-c5e3w0hbgb {
    0% {
        stroke: rgb(145,226,235);
        filter: brightness(0.8);
        fill: rgb(145,226,235);
        box-shadow: 0px 0px 100px 20px rgb(145,226,235);
        opacity: 0.5;
    }
    100% {
        stroke: rgb(225,247,253);
        filter: brightness(1.8);
        fill: rgb(225,247,253);
        box-shadow: 0px 0px 100px 10px rgb(225,247, 253);
        opacity: 1;
    }
}
/* _content/VoksenBamse.UI/Pages/Layout/NeonLightsPinkComponent.razor.rz.scp.css */
#neon-path-pink[b-22r2bx1ijf] {
    animation-name: blinking-b-22r2bx1ijf;
    animation-duration: 10s;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-delay: 0s;
}


@keyframes blinking-b-22r2bx1ijf {
    0% {
        stroke: rgb(169,1,153);
        filter: brightness(0.8);
        fill: rgb(169,1,153);
        box-shadow: 0px 0px 100px 10px rgb(169,1,153);
        opacity: 0.2;
    }

    100% {
        stroke: rgb(189,160,202);
        filter: brightness(1.8);
        fill: rgb(189,160,202);
        box-shadow: 6px 6px 100px 10px rgb(189,160,202);
        opacity: 1;
    }
}