/* FG 2026 */




/* =========================================================================================== */
/* Basics & Settings & Token */
/* =========================================================================================== */


:root {

    --color-on-main: #f00;
    --color-bg: #000;
    --color-inv: #fff;
    --svg-color: red;

    --figbox-default-width: calc(100vw - 128px);
    --figbox-half-width: 50vw;
    --figbox-100px-width: 10px;
    --figbox-full-width: 100vw;

    --fade-heavy: 0.3;
    --fade-medium :0.5;
    --fade-little: 0.8;
    --fade-none: 1;
    --fade-full:0;

    --type-normal-fontsize: 20px;
    --type-normal-lineheight: 140%;
    --type-sub-fontsize: 15px;
    --type-sub-lineheight: 140%;

    --spacing-a:16px;
    --spacing-b:20px;
    --spacing-c:32px;
    --spacing-d:64px;
    
}


.clearfix {
    clear:both;
}


.visual-alt {
    display:none;
}


div#bodytop {
    position:relative;
    top:0px;
    background:transparent;
    height:1px;
}



/* =========================================================================================== */
/* Content */
/* =========================================================================================== */


html{
    width:100%;
    height:100%;
    font-size: var(--type-normal-fontsize);
    background-color: var(--color-bg);
    background-image: url(../images/low/snakebgsolidized.jpg);
    background-attachment: fixed;
    background-position: center center;
}


.center-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}


body{
    font-family: 'Open Sauce One';
    font-weight: 400;
    font-style: normal;
    width:100%;
    height:100%;
    margin:auto;
    display:block;
    font-size: var(--type-normal-fontsize);
    line-height: var(--type-normal-lineheight);
    color: var(--color-on-main);
    
} 


#page-end {
    display:block;
}


div.content-section {
    margin-bottom: var(--spacing-d);
    margin-top: var(--spacing-d);
}


div.content-section p{
    margin-bottom:16px;
}


div.content-section h3{
    font-weight: bold;
    font-style: bold;
}

div.content-section h4{
    font-weight: bold;
    font-style: bold;
}


a {
    color: var(--color-on-main);
    text-decoration: underline;
}


a:hover {
    color: var(--color-inv);
    background-color: var(--color-on-main);
    text-decoration: none;
}


div.contentwrap {
    margin:auto;   
    width:288px;
    width:100%;
    padding-left: 32px;
    padding-right: 32px;
    margin-top:0;
    margin-top:-25vh;
    box-sizing: border-box;
}


small {
    font-size:15px;
    line-height:28px;
}


address {
    font-style: normal;
    margin-bottom:20px;
}




.target {
    user-select: none;
    touch-action: none;
}


.target-button {
    display:block;
    width:40px;
    height:40px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


a.subtle-link {
    text-decoration: none;
}


ul {
    list-style-type: square;
    list-style-position: inside;
    margin-bottom:16px;
}


/* =========================================================================================== */
/* Content Image/Media */
/* =========================================================================================== */


.content-image {
    display:block;
    width:60%;
    margin-left:auto;
    margin-right: auto;
}


.content-image-fullline {
    display:block;
    /*width:calc(100vw - 128px);*/
    width:100%;
    margin-left:auto;
    margin-right: auto;
}


div.content-embed {
    padding-top:var(--spacing-a);
    padding-bottom:var(--spacing-c);
}


div.content-embed-sub {
    display:inline;
}


.caption {
    text-align: center;
    font-size:var(--type-sub-fontsize);
    line-height:var(--type-sub-lineheight);
    margin-left: auto;
    margin-right: auto;
    display:block;
    margin-top:10px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    cursor: pointer;
}

    
    



/* =========================================================================================== */
/* Top */
/* =========================================================================================== */


div.topaction {
    writing-mode: tb-rl;
    position:absolute;
    font-size: var(--type-normal-fontsize);
    line-height: var(--type-normal-lineheight);
    padding-top:24px;
    padding-left:12px;
    padding-right:12px;
    z-index:400;
    display: flex;
    align-items: center;    
}

div#topmail {
    right:0;
}


div#toplinked {
    left:0;
}


div.topaction a {
    text-decoration: none;
}


div.topaction a:hover{
    text-decoration: none;
    color:var(--color-inv);
    background-color: var(--color-on-main);
}


div.toplinked a {
    text-decoration: none;
}


div.toplinked a:hover {
    text-decoration: none;
    color: var(--color-inv);
    background-color: var(--color-on-main);
}



/* =========================================================================================== */
/* Splash */
/* =========================================================================================== */


.splash {
    text-align: center;
    margin-top:var(--spacing-a);
    margin-bottom:var(--spacing-a);
}


div.splash h1 {
    position:relative;
    z-index:100;
    margin-left:auto;
    margin-right:auto;
    margin:0;
    padding:0;
    width:100%;
}


img.splashimg {
    opacity: 1;
    color:var(--color-on-main);
    width:76px;
    height:auto;
    margin:0;
    padding:0;
} 


div.splashtext {
    margin-top:8px;
    font-size: 32px;
    line-height: 140%;
    text-align: center;
}


.splash a {
    background: transparent;
}


#logobot {
    position:relative;
    left:50%;
    margin-top:-60px;
    margin-left:-60px;
    opacity: 0.9;
    width:120px;
    height:120px;
    top: 50vh; 
    margin-bottom:50vh;
}


#logobot img{
    width:100%;
    height:100%;
}



/* =========================================================================================== */
/* Line */
/* =========================================================================================== */


.v-hairline {
    background-color: var(--color-on-main);
    width:1px;
    height:50vh;
    margin-left:auto;
    margin-right:auto;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}


.lifeline-figure { 
    margin-bottom:20px;
    margin-top:20px;
}


.lifeline-fullheight {
    height:50vh;
}


.lifeline-fullheight-cut {
    height:calc(50vh - 140px);
}


.lifeline-short {
    height:64px;
}


.lifeline-plus {
    height:128px;
}



/* =========================================================================================== */
/* Box */
/* =========================================================================================== */


.ratiobox {
    aspect-ratio: 1 / 1;
    width: var(--figbox-default-width);
    display:block;
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%) scale(var(--zoom-scale, 1));
    margin:0;
    margin-left:auto;
    margin-right:auto;
    overflow: hidden;
    background-position: center center;
    z-index:-1;
    user-select: none;
    transition: width 0.3s ease-out,
                aspect-ratio 0.3s ease-out,
                opacity 0.3s ease-out,
                transform 0.3s ease-out;
}


.viz {
    position: absolute;
    margin:0;
    top: 0; bottom: 0; right: 0; left: 0; /*fill parent*/
    color: var(--color-inv);
    background-repeat:none;
    background-size:cover;
    overflow:hidden;
    background-position: center center;
}


.elevate-portrait {
    z-index: 999;
}


.elevate-landscape {
    z-index: 999;
}




/* Box - Ratio */

.xratio16x9 {
    aspect-ratio: 16 / 9;
}

.xratio1x1 {
    aspect-ratio: 1 / 1;
}

.xratio4x3 {
    aspect-ratio: 4 / 3;
}

.xratio3x4 {
    aspect-ratio: 3 / 4;
}

.xratioInit {
    aspect-ratio: 1 / 1;
}



/* Box - Images */

#img_init {
    background-image:url(../images/low/invadermarble.jpg);
    display: none;
}

#img_init-splash {
    background-image:url(../images/low/invadermarble.jpg);
    display: none;
}

#img_a {
    background-image:url(../images/low/invadermarble.jpg);
    display: none;
}

#img_b {
    /* background-image:url(../images/low/avatar_darkersidestare_s.jpg); */
    background-image:url(../images/low/avatar_habit_portrait_square.jpg);
    display:none;
}

#img_c {
    background-image:url(../images/low/marble-mirror.jpg);
    display:none;
}

#img_d {
    background-image:url(../images/low/marble-dimsplit.jpg);
    display:none;
}

#img_e {
    background-image:url(../images/low/avatar_sideoff.jpg);
    display: none;
}

#img_f {
    background-image:url(../images/low/marble-metafold.jpg);
    display:none;
}

#img_g {
    background-image:url(../images/low/touchgesturecut.jpg);
    display:none;
}

#img_i {
    background-image:url(../images/low/marble-metafold.jpg);
    display:none;
}


/* Box - Width */

.boxwidth_default {
    width: var(--figbox-default-width);
}

.boxwidth_half {
    width: var(--figbox-half-width);
}

.boxwidth_full {
    width: var(--figbox-full-width);
}

.boxwidth_100px {
    width: var(--figbox-100px-width);
}


/* Box - Fade */

.fade-heavy {
    opacity: var(--fade-heavy);
}

.fade-medium {
    opacity: var(--fade-medium);
}

.fade-little {
    opacity: var(--fade-little);
}

.fade-none {
    opacity: var(--fade-none);
}

.fade-full {
    opacity:var(--fade-full);
}



/* =========================================================================================== */
/* Img Zoom */
/* =========================================================================================== */


  /* ---------- Zoom Wrapper ---------- */

  .img_zoom-wrapper {
    display: inline-block;
    width:100%;
    text-align: center;
  }



  .img_zoom-wrapper img {
    display: inline;
    -webkit-user-drag: none;
    user-select: none;
    transition: filter 0.15s ease;
  }



  .img_zoom-wrapper img.dimmed {
    filter: brightness(25%);
  }

  .zoom-hint {
    user-select: none;
  }

  div.zoomtriggerwrap {
    display:inline;
    margin-left: auto;
    margin-right:auto;
    cursor: pointer;
    margin-top:0;
    margin-bottom:0;
    padding-top:0;
    padding-bottom:0;
    width: fit-content;
    line-height:0;
    text-align: center;
  }


  .img_zoomed {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100vw;
    max-height: 100vh;
    z-index: 1000;
    pointer-events: none;
  }



/* =========================================================================================== */
/* Navigation */
/* =========================================================================================== */


div.navwrap {
    position:fixed;
}


nav#navigation {
    font-weight:normal;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:72px;
    background-color:rgba(0, 0, 0, 0.1);
    z-index:102;  
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    text-align:center;
}


ul#primary-menu {
    margin-right:auto;
    margin-left:auto;
    display:block;
    margin-top:20px;
    left:50vw;
    text-align:center;
    opacity:1;
    /*
    //width:288px;   
    //border: 1px solid lime;
    //align:center;
    */
}


li.menu-item {
    display:inline;    
    text-align:center;
}


li.menu-item a{
    text-decoration: none;
}


li.menu-item a:hover{
    text-decoration: underline;
    color:var(--color-inv);
    background:transparent;
}



/* =========================================================================================== */
/* Footer */
/* =========================================================================================== */


footer.site-footer {   
    text-align:center;
    padding-top:var(--spacing-c);
    padding-bottom:var(--spacing-a);
}


footer.site-footer ul{
    margin:0;
    padding:0;
}


footer.site-footer ul li{
    display:inline;
    padding-right:12px;
    font-size: var(--type-sub-fontsize);
    line-height: var(--type-sub-lineheight);
    margin:0;
}


footer.site-footer ul li a{
    margin:0;
    padding:0;  
}


footer.site-footer ul li a:hover{
    background-color: var(--color-on-main);
    color: var(--color-inv);
    text-decoration: none;
}





/* ============================================================================================================== */
/* SCREENADJUST ================================================================================================= */
/* ============================================================================================================== */




/* =========================================================================================== */
/* RATIO SCALE - SQUARE TO WIDE (LANDSCAPE) */
/* =========================================================================================== */


@media (min-aspect-ratio: 1/1) { }


/* =========================================================================================== */
/* WIDTH SCALE - L TO XL */
/* =========================================================================================== */


@media (min-width: 900px) {

:root {
    --figbox-default-width: 600px;
    --figbox-half-width: 400px;
    --figbox-100px-width: 10px;
    --figbox-full-width: 800px;

    --type-normal-fontsize: 32px;
    --type-normal-lineheight: 150%;
    --type-sub-fontsize: 15px;
    --type-sub-lineheight: 150%;

    --spacing-a:16px;
    --spacing-b:20px;
    --spacing-c:32px;
    --spacing-d:64px;
    
}

.ratiobox {
    transition: width 0.3s ease-out,
                aspect-ratio 0.3s ease-out,
                opacity 0.3s ease-out,
                transform 0.3s ease-out;
}


div.contentwrap {
    max-width:1200px;
}


.content-image {
    width:40%;
}

                                
}