/* ------------------------- LANDSCAPE DESKTOP ------------------------- */
:root{
    --particle-bg     : 10px;
    --scroll-display  : flex;
    --reel-display    : flex;
    --nt_draw-display : block;
    --reel_sect-width : 300px;
    --reel_sect-height: 200px;
    --random-display  : flex;
    --title-ratio     : 10;
    --p1_image_width: 100%;
    --page-center   : center;
    --p1d3-width    : 30%;
    --menu-image-right : 0px;
    --menu-image-bottom: none;
    --particles_display : block;
    --arrow_menu_display: block;
    --menu_image_width : 50%;
}
/* ------------------------- PORTRAIT DESKTOP ------------------------- */
@media screen and (min-width: 1280px) and (min-height: 100.001vw){
    :root{
        --particle-bg     : 15px;
        --scroll-display  : flex;
        --reel-display    : flex;
        --nt_draw-display : block;
        --random-display  : flex;
        --reel_sect-width : 300px;
        --reel_sect-height: 200px;
        --title-ratio     : 10;
        --p1_image_width : 100%;
        --page-center : flex-start;
        --p1d3-width    : 100%;
        --menu-image-right : none;
        --menu-image-bottom: 0px;
        --particles_display : block;
        --arrow_menu_display: block;
        --menu_image_width : 100%;
    }
}
/* ------------------------- PORTRAIT MOBILE ------------------------- */
@media screen and (max-width: 1280px) and (min-height: 100.001vw){
    :root{
        --particle-bg     : 0px;
        --scroll-display  : none;
        --reel-display    : flex;
        --nt_draw-display : none;
        --random-display  : flex;
        --reel_sect-width : 100px;
        --reel_sect-height: 100px;
        --title-ratio     : 10;
        --p1_image_width : 100%;
        --page-center : center;
        --p1d3-width    : 100%;
        --menu-image-right : none;
        --menu-image-bottom: 0px;
        --particles_display : none;
        --arrow_menu_display: none;
        --menu_image_width : 100%;
    }
}
/* ------------------------- LANDSCAPE MOBILE ------------------------- */
@media screen and (max-width: 1280px) and (min-width: 100vh){
    :root{
        --particle-bg     : 0px;
        --scroll-display  : none;
        --reel-display    : none;
        --nt_draw-display : none;
        --random-display  : none;
        --reel_sect-width : 100px;
        --reel_sect-height: 100px;
        --title-ratio     : 25;
        --p1_image_width : 100%;
        --page-center : flex-start;
        --p1d3-width    : 50.3%;
        --menu-image-right : 0px;
        --menu-image-bottom: none;
        --particles_display : none;
        --arrow_menu_display: none;
        --menu_image_width : 50%;
    }
}


#page0include{
    padding:var(--content-padding);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* INTRO TITLE AND SVGS */
#intro_title{
    position       : relative;
    display        : flex;
    flex-direction : column;
    align-items    : flex-start;
    justify-content: flex-end;
    height         : 100%;
    width          : 100%;
}
#name_title{
    position: relative;
    z-index : 1;

    height     : calc(var(--title_big) - .7vw + 7vw);
    line-height: calc(var(--title_big) - .7vw + 7vw);;
    font-size  : calc(var(--title_big) + 7vw);
}
#name_title1{
    position: relative;
    z-index : 1;

    height     : calc(var(--title_big) - .7vw + 7vw);
    line-height: calc(var(--title_big) - .7vw + 7vw);;
    font-size  : calc(var(--title_big) + 7vw);
}
#name_title_subtext{
    color:grey;
}


/* TEXT PARTICLES */
.particles_intro{
    display : var(--particles_display);
    position: absolute;
    z-index : 999;
    width   : 100%;
    height  : 100%;
    pointer-events: none;
}
#particle_intro0{
    position   : relative;
    height     : calc( var(--text_small));
    line-height: calc( var(--text_small));
    font-size  : var(--text_small);
}
#particle_intro1{
    position   : relative;
    height     : calc( var(--text_small));
    line-height: calc( var(--text_small));
    font-size  : var(--text_small);
}
#particle_intro2{
    position   : relative;
    height     : calc( var(--text_small));
    line-height: calc( var(--text_small));
    font-size  : var(--text_small);
}



/* RANDOM NR */
#random_nr{
    display:var(--random-display);
    position : absolute;

    bottom   : 15%;
    right    : 10px;

    transform: rotate(-3deg);

    height     : calc( var(--title_small));
    line-height: calc( var(--title_small));
    font-size  : calc( var(--title_small));
    color      : rgb(0, 0, 0);
}
#random_nr1{
    display:var(--random-display);
    position : absolute;
    z-index: 4;
    top   : 10px;

    transform: rotate(3deg);

    height     : calc( var(--title_small));
    line-height: calc( var(--title_small));
    font-size  : calc( var(--title_small));
    color      : rgb(0, 0, 0);
}


#bg_anim{
    max-width      : 80%;
    cursor         : pointer;
    top            : 0px;
    width          : 640px;
    height         : 320px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    position       : absolute;
    z-index        : 3;
}

#bg_canvas{
    width: 640px;
    height: auto;
}