@font-face {font-family: 'logo'; 
    font-style: normal; 
    font-weight: 400;
    /*src: url('/static/logo.woff2');*/
    src: url('/static/RS1.woff2');
}
@font-face {font-family: 'b612'; 
    font-style: normal; 
    font-weight: 400;
    src: url('/static/b612.woff2');
}
@font-face {font-family: 'b612'; 
    font-style:normal;
    font-weight: bold; 
    src: url('/static/b612_bold.woff2');
}
:root {
    --slant:4.88ex;/* TODO change to REM so angle on slant doesnt change, since slant and this will be in same units*/
    --headersize:4rem;
    /*--logocolor:#07B;*/ 
    --logocolor:#15A;  
    --accentcolor:#07052b;
    --primaryfont:"b612";
    --iconsize:7rem;
  }  
html,body{
    margin:0;
    padding:0;
    font-size:1.1rem;
    color: #222;
    background-color:#000;
    /*font-family:Arial, Helvetica, sans-serif;*/
    font-family:var(--primaryfont);
}
.homescreen_app{
    /*background-color:#ddd9;*/
    display:flex;
    align-items: center;
    margin-bottom:1rem;
    /*
    border:1px solid #2222;
    */
    width:auto;
}
.app_link{text-decoration:none; color:#000;
}
.app_icon{
    display:flex;
    align-items:center;
    align-content: center;
    text-align: center;
    width: var(--iconsize);
    height:var(--iconsize);
    margin:0ex;
    font-size:2rem;
    /*border:1px solid #ccc;*/
    /*background-color:#15A5;*/
}
.app_icon img{width:var(--iconsize); height:var(--iconsize);}
.app_details{
    font-size:1.25rem;
    background-color:#ddda;
    border:1px solid #ccc;
    padding:1ex;
    margin-left:1rem;
    width:40ex;
    min-height:4rem;    
}
.app_heading{
    font-variant: small-caps;
    display:block;
    font-weight:bold;
}
.app_description{
    font-size:1rem;
}
#header{ width:100%;
    height:var(--headersize);
    position:fixed;
    top:0;
    background-color:white;
    z-index:10;
    display:flex;
}
#logoblue{
    font-family: 'logo';
    background-color:var(--logocolor);/*#15A;c20*/
    
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
    min-width:calc(var(--headersize)*4);
    display:flex;
    align-items: center;
    /*border:1px solid #0d0;*/
}
#logobluetext{
    color:#fff;/*#ddf;*/
    margin-left:1rem;
    font-size:3rem;
}
#logobluepro{color:#ccf}
#logoblue img{
    max-height:2.5rem;
    margin-left:1rem;
    height:2rem;
}

#linkbar{    
        /*
            border:1px solid green;
        */
        display:block;
        flex-grow:3;
        /*margin-top:2rem;*/
        align-self:flex-end;
        text-align:right;
        padding-right:1rem;
    }

#linkbar a{ 
    display:inline-block;
    padding:0.5ex 1ex 0.5ex 1ex;
    margin-bottom:2px;    
    color:#222; text-decoration:none;
    }
#linkbar a.selected{
    border-bottom:3px solid var(--logocolor);/*#035;*/
    margin-bottom:0px;
    }
.lang-menu{
    }
.lang-menu a{color:black; 
    text-decoration: none;
    padding:0; margin:0;
}
#page1{
}
/*
html{border-bottom:1px solid red;}
body{border-bottom:1px solid yellow;}
*/
.gdmf{position:absolute; top:0; left:0;
    z-index:25000}
#GDMF1{
    background-color:#00aaff;
    width:100%;
    height:4rem;
}
#GDMF2{
    width:100%;
    height:100vh;
    background-color: #15A;
}
#page1body{ 
    background-color:#223;
    margin:0 auto;
    display:flex;
    padding:0;
    margin-top:var(--headersize);
    height:calc(100vh - var(--headersize));


    /*/* lights-50.webp"); */
    background-image: url("/static/lights.crop.12.png");/*lights-50.webp");*/
    background-image: url("/static/lights-50.webp");/*mapdots2.min.svg");/*lights-50.webp");*/
    /*url("/static/u4.jpg"); 
    */
    background-position: center; 
    background-position: 0% 100%; 
    background-repeat: no-repeat; 
    background-size:cover;   
}

#particledemo{width:100%; 
    height:calc(100vh - var(--headersize));
    position:absolute;
    border:none;
    overflow:hidden;
}
.container-a{
    /*border:1px solid red;*/
    margin:0 auto;
    display:grid;
    height:calc(100vh - var(--headersize));
    max-width:80%;
    align-items:center;
    justify-content: right;
}
.gradientfg{
    /*border:1px solid red;*/
    z-index:1;
    margin:0 auto;
}
.gradientbg{
    z-index:0;
    position:absolute;
    background-image: radial-gradient(ellipse at left bottom,#07052b, #00aaff);
    
    /*391, 15a   778903*/
    opacity:0.66;
    width:100%;
    height:100%;
}
.system{display:inline-block;
    margin-right:10ex;
    text-align:center;
    position:relative;
}
.login{ padding:1rem; border:1px solid #ddd4;}
.login input{
    border:1px solid #fff4;
}
button{border:none;}
.login{
    margin-right:0;
}
input, textarea, #chatinput{
     font-size:1.25rem;
    background-color:#15AA;
    border:none;
    padding:0.5rem;
    color:white;
    margin-top:0.5rem;
    border-radius:0.25ex;}

.bigbutton, .slimbutton{
    font-size:0.9rem;
    border-radius:0.5ex;
    text-decoration:none;
    font-weight:bold;
    font-variant:small-caps;
    background-color:var(--logocolor);
    color:white;
    margin:1ex;
    display:inline-block;
    min-width:14ex;
    padding:1rem;
    margin:0 auto;
    margin:1ex;
}
.slimbutton{
    min-width:8ex;
    padding:0.7rem;
    margin-top:-1rem;
 display:inline-block;
 margin-top:-1rem;   
}

.loud{    background-color:#15A !important;}
.quiet{background-color:#333 !important;}
.gradientbox9{
    justify-content: center;
    position:relative;
    display:flex;
    /*391, 15a   778903*/
    /*
        radial-gradient(ellipse at left bottom, 
     var(--accentcolor), var(--logocolor));
*/
    color:white;
    text-align:center;
    font-family:var(--primaryfont);
    align-items: center;
    height:90%;

}
.formfield{


}
.gradientbox{
    justify-content: center;
    position:relative;
    /*391, 15a   778903*/
    /*
        radial-gradient(ellipse at left bottom, 
     var(--accentcolor), var(--logocolor));
*/
    padding:3rem;
    color:white;
    width:36ex;
    text-align:center;
    display:flex;
    font-family:var(--primaryfont);
    align-items: center;
    height:50%;

}
#page1{ }

#takealook{}

#textchange{display:inline-block; min-height:2rem;}    
#textchange::before{animation: textchanger 8s infinite; content:'';}
/*#textchange::after{animation: textchanger2 8s infinite; content:'';}*/

@keyframes textchanger {
    0%, 100% {content: "planetaria";}
    10% {content: "the home office";}
    20% {content: "process automation";}
    30% {content: "bioinformatics";}
    40% {content: "media compression";}
    50% {content: "sales forecasting";}
    60% {content: "generative AI";}
    70% {content: "digital twinning";}
    80% {content: "cloud logistics";}
    90% {content: "human beings";}
}
@keyframes textchanger2 {
    0%, 100% {content: "the home office";}
    10% {content: "process automation";}
    20% {content: "bioinformatics";}
    30% {content: "media compression";}
    40% {content: "sales forecasting";}
    50% {content: "generative AI";}
    60% {content: "digital twinning";}
    70% {content: "cloud logistics";}
    80% {content: "human beings";}
    90% {content: "planetaria";}

}
/* ######  */

#page2{margin:0 auto;

    background-color: #fff;
    /* --------------------------------- */
    background-image:url("/static/chess.jpg");/* url("/static/dot-grid.png");*/
    /*background-image:url("pexels-tima-miroshnichenko-6615086.jpg");
    */
    backdrop-filter: blur(5px);
    background-position: center;
    background-size: cover;
    display:grid; 
    grid-template-columns:70% 30%;/* 30 45 25 repeat(3, 33.33%);*/
    grid-template-rows: repeat(1, 100%);
    align-items: center;
    min-height:100vh;
    min-height:calc(100vh - var(--headersize));
}
#p2left{
    /*background-color:#15A3;
    backdrop-filter: blur(2px);
*/
    margin:0 auto;
    width:80%;
}
.product{
    display:inline-block;
    /*border:1px solid #777;*/
    display:grid;
    grid-template-columns: 22% 78%;
    margin-bottom:1rem;
    font-size:0.9rem;
    padding:1.5rem;
    position:relative;
}
#productgrid{
    display:grid;
     grid-template-columns: 50% 50%; 
    display:flex;
    flex-wrap:wrap;
    }
.prodimage{
    background-color:#AAA7;
    font-variant:small-caps;
    text-transform:lowercase;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
.proddesc{
    /*border:1px solid green;*/
    background-color:#0003;
    padding:1ex;
    text-align:justify;
    margin-left:1ex;
    max-width:20ex;
}
.prodtitle{ display:inline-block; font-weight:bold; padding:0.25rem; background-color:#0000;
}
#p2right{
    margin:0 auto;
}
.gbox1{min-width:30ex; right:0;
    position:absolute;
right:5rem;
align-self: center;
}
.gbox2{}
.gradientbg2{
    opacity:0.8;
    background-image: radial-gradient(ellipse at left bottom,#07052b, #00aaff);/*391, 15a   778903*/

}

/* -------------------------------------------------------- */
/*TODO portrait OR narrower than char width*/

@media (orientation: landscape) {#hamburger{display:none;}}
@media (orientation: portrait) {
    body {
        flex-direction: column;
    }
    .lang-menu{float:right;}
    #linkbar a.selected{
        border-bottom:3px solid var(--logocolor);/*#035;*/
        margin-bottom:0px;
    }
    
    #header{
        /*flex-direction: column;
        */
        /*
        color:#444; background-color:#777; display:flex; height:3rem;
        */
    }
    /************************/
    #hamburger{
        float:right;
        right:0;
        display:block;
        flex-grow:3;
        /*margin-top:2rem;*/
        align-self:center;
        text-align:right;
        padding-right:1.25rem;
        font-size:1.5rem;

    }
    #linkbar{
        background-color:#fff;
        width:100%;
        display:none;

    }
    #linkbar a{width:22%; padding:0; margin:0;}
    .gradientbox{
        width:100%;
        margin:0 auto;
        margin-top:0rem;
        padding:0rem;
        min-height:24rem;
    }
    .gbox1{
        position:initial;
}
    .gbox2{width: auto;}
    #page1body{
        display:flex;
        padding-top:0rem;
        align-items: center;
    }
}

/****************/
.sentinel_domain_status{
    display:block;
    width:100%;
    text-align:center;
    margin:0 auto;
}   
/****************/
@media only screen and (min-width: 2000px) {
    #page1body {
        border-left:5px solid red;
        border-right:5px solid red;
    }
    .gbox1{min-width:30%;}
    body{font-size:2rem;}
    :root {
        --slant:4.88ex;/* TODO change to REM so angle on slant doesnt change, since slant and this will be in same units*/
        --headersize:8rem;
    }
    #logobluetext{
        color:#fff;/*#ddf;*/
        margin-left:2rem;
        font-size:6rem;
    }
    #logobluepro{color:#ccf}
    #logoblue img{
        max-height:5rem;
        margin-left:2rem;
    }
}
@media screen and (orientation:portrait){
    .app_link{
        width:100%;
        max-width:32rem;
    }
    .app_details{
        width:100%;
        /*
        min-width:20rem;
        max-width:20rem;
        */
    }
    
}