@import url(reset.css);

:root {
    --leoroom: url(leoroom.png);
    --promenade: url(bg_promenade.jpg);
    --carl: url(carl.jpg);

    --bg-image: var(--carl);
    font-family: Arcon, Quicksand;
}

.fys {
    color: rgb(220, 84, 125)
}

.int {
    color: rgb(168, 216, 241)
}

.psy {
    color: rgb(182, 131, 230)
}

.mot {
    color: rgb(235, 225, 136)
}

.leo {
    color: rgb(188, 68, 55)
}

.chase {
    color: rgb(83, 126, 157)
}
.samuel{
    font-family: 'Belligerent Madness';
}

#background {
    height: 100dvh;
    width: 100dvw;
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: 100vw 100vh;
    z-index: -20;
    position: relative;

    &::-webkit-scrollbar{
        display: none;
    }
}


#textbox {
    --txt-clr: rgb(246, 237, 221);
    --border-color: black;
    --border-thickness: 7px;
    --padding: 2ch;
    --width: 500px;

    background-color: color-mix(in oklab, rgb(12, 9, 9), transparent 55%);
    

    border-inline: var(--border-thickness) solid var(--border-color);
    width: calc(var(--width) - var(--padding));
    margin-inline-start: 60%;
    margin-inline-end: 25%;

    color: var(--txt-clr);
    padding-inline: var(--padding);
    padding-block-start: var(--padding);
    font-size: 18px;

    position: relative;

    p {
        margin-block-end: var(--padding);
        line-height: 1.2em;

        &:last-child{
            margin-block-end: 0;
        }
    }


    &::after {
        content: 'хуй';
        display: block;
        font-size: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: -1;

        background-image: var(--bg-image);
        background-repeat: repeat;
        background-position: var(--bg-pos-x) var(--bg-pos-y);
        background-attachment: fixed;
        background-size: var(--bg-size-x) var(--bg-size-y);


        filter: url(textbox.svg#textbox);
        
        clip-path: inset(0 0 0 0);
        /*
        mask-image: repeating-linear-gradient(var(--bg-angle), black 0px, black 105px, black var(--bg-pos1-pre), transparent var(--bg-pos1), transparent var(--bg-pos2), black var(--bg-pos2-post), black var(--bg-pos3-pre), black var(--bg-pos3));
        */
        
        mask-image: repeating-linear-gradient(var(--bg-angle), transparent 0px, black 105px, black var(--bg-pos1-pre), transparent var(--bg-pos1), transparent var(--bg-pos2), black var(--bg-pos2-post), transparent var(--bg-pos3-pre), black var(--bg-pos3));
    }

    --bg-angle: 165deg;
    --bg-pos1: 160px;
    --bg-pos1-pre: 155px;
    --bg-pos2: 175px;
    --bg-pos2-post: 180px;
    --bg-pos3: 800px;
    --bg-pos3-pre: 290px;
    background-image:
    repeating-linear-gradient(var(--bg-angle), transparent 0px, transparent 105px, rgba(238, 206, 206, 0.032) var(--bg-pos1-pre), transparent var(--bg-pos1), transparent var(--bg-pos2), rgba(238, 206, 206, 0.03) var(--bg-pos2-post), transparent var(--bg-pos3-pre), transparent var(--bg-pos3)),
    linear-gradient(to right, rgb(12, 9, 9), transparent 18%, rgba(213, 163, 163, 0.06) 25%, rgba(213, 163, 163, 0.045) 30%, transparent 45%, transparent 60%, rgb(12, 9, 9));
    background-attachment: scroll;

    --bg-size-x: 150%;
    --bg-size-y: 110%;
    --bg-pos-x: center;
    --bg-pos-y: center;

    
    box-sizing: border-box;
    min-height: 100%;
    padding-block-end: 50%;
}


.portrait {
    --width: 150px;
    --height: 205px;
    --thickness: 5px;
    --portrait-border-color: magenta;

    /* Нужны более точные значения */
    width: var(--width);
    height: var(--height);

    box-sizing: border-box;
    border: solid var(--thickness) var(--portrait-border-color);
    display: block;

    &#speaker {
        --thickness: var(--border-thickness);
        --portrait-border-color: var(--border-color);

        position: fixed;
        /*
        top: calc(var(--height) / 5);
        left: calc(var(--width) * -1);
        */
        
        margin-block-start: calc(var(--height) / 5);
        margin-inline-start: calc(var(--width) * -1.125);
    }
}



/* ===== SMARTPHONE STYLES ===== */
@media (max-aspect-ratio: 14/16){

    :root{
        --background-height: 300px;
    }

    #background{
        background-size: max(100%, calc(var(--background-height) * 1.5)) var(--background-height) !important;
        background-position: center top;
        background-repeat: repeat-y;

        position: relative;
    }

    #textbox{
        width: 100%;
        margin-inline-start: 0;
        margin-inline-end: 0;

        position: sticky;
        inset-block-start: var(--background-height);
        margin-block-start: var(--background-height);

        
        &::after{
            --bg-size-x: 180%;
            --bg-size-y: 100%;
        }

        border-inline: none;
        border-block-start: solid var(--border-color) var(--border-thickness);

    }

    .portrait{

        &#speaker{
            margin-block-start: 0;
            margin-inline-start: 0;

            inset-inline-end: 0;
            display: none;
        }
    }
}