@font-face {
  font-family: 'DejaVu Sans Mono';
  src: url('./res/ttf/DejaVuSansMono.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@media (prefers-color-scheme: dark) {
    body {
        background-color: #222222; 
        color: white;
	color-scheme:dark;
    }
.divider-bold 
{
background:white;
}

a
{
color:white;
}

.box img {content: url('./res/junqw.png');}
.us,.we_are,.prj_logo{background: #272727;}
.bottom_menu{background:#e7e7e7 ;color: #272727;}

.bottom_menu a { color: #272727 !important;}
.bbottom_menu a { color: #272727 !important;}
.bbottom_menu{background: #272727;color: #cecece;}
.jui{content: url('./res/prjs/juiw.svg');}
.jnet{content: url('./res/prjs/jnetw6.svg');}
.jmes{content: url('./res/prjs/jmswf.svg');}
}
/* Light mode */
@media (prefers-color-scheme: light) {
    body {
	color-scheme:light;
        background-color: white;
        color: #323232;
    }
    a {
    color:#323232;
    }


    .divider-bold 
    {
    background:#323232;
    }

    .box img {content: url('./res/junqb.png'); }

    .us,.we_are,.prj_logo{background: #F5F5F5;}
    .bottom_menu{background: #363636;color: white;}
    .bbottom_menu{background: #515151;color: white;}
    
    .bottom_menu a { color: white;}
    .bbottom_menu a { color: white;}

    .jui{content: url('./res/prjs/juib.svg');}
    .jnet{content: url('./res/prjs/jnetb6.svg');}
    .jmes{content: url('./res/prjs/jmsbfol.svg');}
}

.prj_logo img { 
    max-height: 50%; margin: auto;        position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);}
.box {

  height: 100vh;
  position: relative;
}
.box img {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: auto;
    width:max(20vw,20vh);
}

html
{
    font-size: 0.66rem;
}


a{text-decoration: none !important;}
body
{
    
    text-decoration: none !important;
    font-family: 'DejaVu Sans Mono';

}

.us_art
    {
    margin-top:1em;
    margin-left:1em;
    font-size: 3em;
    
    }


.us
{
   
    border-radius: 2em;
    padding: 2em; 
    font-size: 1.6em;
    margin-top:2em;
    margin-left:2em;
    margin-right:2em;
 
}

.us_info
{
    margin-left:4em;
}

.bbottom_us
{   
   
    margin-left: 0.4em;
    border-radius: 30px;
    padding: 1.5em;
    font-size: 1.5em;
}

.we_are
{
    border-radius: 30px;
    padding-left: 3em;
    padding-right: 3em;
    margin-left:2em;
    margin-right:2em;
    margin-top:2em;
    display: inline-block !important;
    min-width: max(30vw,38em);
    min-height: fit-content !important;
    height: max(15rem,min(20vw,20vh)) !important;
    padding-top: 4em;
    padding-bottom: 4em;
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    position:relative;
    text-overflow: ellipsis;
    transition: box-shadow 0.2s;
   
}

.overflow-ellipsis
{
    max-width:min(75vw,75vh);
    overflow: hidden;
    text-overflow: ellipsis;
}

.we_are_name
{
    font-size: 2em;
}

.we_are_info
{
    font-size: 1.6em;
}


.we_are_join
{
    font-size: 4em;
}
.we_are_text
{
    text-align: center; 
}


.slider {
    margin-bottom:1em;
    overflow: hidden;
    display: flex;
    flex: 0 0 100%;
}

.prjs_cent {
    overflow: hidden;
      display: grid;
    flex: 0 0 100%;
}

.slides {
    overflow: hidden;
  display: flex;
  padding-bottom: 2em;
  overflow-x: scroll;
  
  
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch !important;
  
}

.slides::-webkit-scrollbar {
    height: 6px;
}
.slides::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.gitty
{
font-size: 1.6em;
margin-left:1.4em;
}
.bottom_menu
{
    display: flex;
    width: fit-content;
    min-width:12vw;
    align-items: center;
    justify-content: center;  
    border-radius: 1.6em 0px 1.6em 0px;
    height:3.2em;
    padding-left:1em;
    padding-right:1em;
    white-space: nowrap; 
    user-select: none;
    
}

.bbottom_menu
{   

    position: absolute;
    border-radius: 1.6em 0px 0px 0px;
    height:3.2em;
    width:100vw;
    margin-top:3em;
    max-width:100%; 
    left:0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.5em;

}

.bbottom_menu_support_mail
{
    margin-right:1em;
}
.prj_logo
{
    height:min(20vw,20vh);
    width:min(20vw,20vh);
    min-width:20em;
    min-height:20em;
    max-width:50em;
    border-radius: max(1.2vw,1.2vh);
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
   
    transition: box-shadow 0.2s;
}

.prj_item
{   display: inline-block;
    margin-right: 2em;
    border-radius: max(1.2vw,1.2vh);
    align-content:center;

        /* transition: background-color 0.6s;  */
}

 /*.prj_item:hover{box-shadow: 0px 0em 0em 0.1em #1a1a1a; background-color: #323232;} */
.prj_title
{   
    
    margin-top:1em;
    font-size: 2em;
    display: flex;
    align-content:center;
    justify-content: center;
    text-align: center;
    margin-bottom: 1em;
}
.prjs
{
    flex-wrap: wrap;
    display: flex;
    margin-left: 3.2em;
    margin-right: 1.2em;
    margin-top: 1em;
}


.divider-bold {
    border: none;
    height: 3px;
    margin-left: 0;
    width:15rem;
}


.prj_item:hover {
   .prj_logo {
       box-shadow: hwb(0 0% 100% / 0.10) 0px 4px 12px;
   }
}

.we_are:hover 
{
    box-shadow: hwb(0 0% 100% / 0.10) 0px 4px 12px;
}



.menu
{
    background-color:hsl(0, 0%, 91%);
    height: 3.5em;
    width: 3.5em;
    border-radius: 0.3em;
    background-image: url("./res/das.svg");
    background-size: 3.5em 3.5em;
    background-repeat: no-repeat;
    position: absolute;
    top: 2em;
    left: 2em;
    z-index: 9999; 
    box-shadow: hwb(0 0% 100% / 0.16) 0px 4px 12px;
    background-position: 0% 0%;
    transition: height 0.5s, width 0.5s, background-position 0.5s;
    box-sizing: border-box;
    p{color:black;}
}

.menu:hover
{
    height:10.5em;
    width:15em;
    background-position: 100% 0%;
    .menu_item_main, .menu_item, .menu_item{visibility: visible; opacity: 1; width: 15em;}
    .menu_item_main{background-position: 100% 0%;}
    .menu_item_main, .menu_item, .menu_item{p{opacity: 1;};};
}

.menu_item_main, .menu_item
{
    visibility: hidden;
    opacity: 0;
        overflow: hidden;
        box-sizing: border-box; 
    p{ padding-left: 0.5em; opacity: 0; transition:opacity 0.8s}
    box-sizing: border-box;    
    border-radius: 0.3em;
    height: 3.5em;
    width: 3.5em;
    background-color: #ececec;
    transition:opacity 0.5s,width 0.5s,visibility 0.5s, background-position 0.5s,background-color 0.5s;
}

.menu_item_main
{        
    background-image: url("./res/fav_wo_bg_b.svg");
    background-size: 3.5em 3.5em;
    background-repeat: no-repeat;
    background-position: 0% 0%;
}

.menu_item_main:hover,.menu_item:hover, .menu_item:hover{background-color: #f8f8f8}

@media screen and (orientation: portrait) and (pointer: coarse) {
.we_are {min-width: min(75vw,75vh) !important;}
html {font-size:1rem !important;}
.prjs_cent{justify-content: center;  place-items: center;} 
.prjs{ margin-top:4em !important; justify-content: left;}

.us {font-size: 0.66rem !important; padding: 5em !important;}

    .bbottom_us {
        padding: 1.2em;
        font-size: 1.1em;
    }

    .bbottom_us p {
        font-size: 0.6em !important;
        line-height: 1.5em;
    }


.menu
{
    height: 6.0em !important;
    width: 6em !important;
    background-size: 6em 6em !important;

}
.menu:hover
{
    height:18em !important;
    width:20em !important;
}

.menu_item_main
{        
    background-size: 6em 6em !important;
}

.menu_item_main, .menu_item
{

    height: 6em!important;
    width: 20em!important;
    p{
    font-size: 1.5em !important; 
    }
}
}


@media screen and (orientation: portrait) 
{
    .prjs{
        align-items: center;

    }
}