/*** DEFAULTS ***/
* { color-scheme: dark; font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif; user-select: none; }
html, body { height: 100%; margin: 0px; display: flex; flex-direction: column;}
a:link, a:visited, a:hover, a:active, a:focus { color: rgb(0, 128, 255); text-decoration: none; }
h3, h4 { margin-top: 0px;}
/*** MEDIA RESPONSIVE ***/
@media (max-width: 540px) {
    body header h1 {text-align: center;}
    body main {width: 360px;}
    body main header {width: 360px;text-align: center;}
    #githubpage {width: 360px;}
}
@media (max-width: 720px) {
    body header h1 {text-align: center;}
    body main {max-width: 420px;}
    body main header {width: 100%;text-align: center;left:auto;margin: 0 auto;}
}
@media (max-width: 1443px) {
    body header h1 {text-align: center;}
    body main {width: 720px;}
    body main header {width: 100%;text-align: center;left:auto;margin: 0 auto;}
}
@media (min-width: 1444px) {
    body header h1 {text-align: center;}
    body main {min-width: 1080px;}
    body main header {left: 0px;top: 32px; position:absolute;}
}
@media (max-height: 640px) {
    body main header {position:relative;}
}
/*** LAYOUT ***/
header {min-height: 50px; width: 100%; position: fixed; top:0px; display: flex;  background: linear-gradient(to bottom, #1C1B22 0%, rgba(28,27,34,1) 50%, rgba(28,27,34,0) 100%); z-index: 101;}
header h1 { width: 100%; max-width: 1080px; min-width: 433px; margin: auto; font-size: 28px;}
header div {position: fixed; left: 20px; top: 20px}
/*** HEADER NAVIGATION ***/
header nav {width: 100%; height: 100%;z-index: 200; position: absolute; top:0px; left: 0px;}
header nav label a {color: grey !important /*override psoudoclasses*/;} 
header nav label img {width: 20px; height: 20px;}
header nav label.left {position: fixed; top: 0px; left: 0px;}
header nav label.right {position: fixed; right: 0px;}
/*** MAIN ***/
main {margin: 0px auto; padding-bottom: 24px; padding-top: 24px; flex-direction: column; flex-grow: 1; flex: 1 0 auto; align-items: center;}
main header {display: flex; flex-direction: column; position: absolute;}
main section {width: 100%;}
main section article{width: 100%;}
/*** MAIN NAVIGATION ***/
nav a {display: flex;}
nav img {width: 24px; height: 24px; position: relative; top: 5px; left: 0px;}
nav label img {width: 20px; height: 20px;}
/*** FOOTER ***/
footer { display: flex; flex-shrink:0; flex-wrap: wrap;background-color: rgb(27, 27, 27); border-top: 1px solid black; color: grey; height: 39px; width: 100%}
footer img {width : 32px; height: 32px; float: right; padding: 0px; position: relative; bottom: 3px;}
footer label { display: flex; flex-wrap: wrap;margin-top: 5px;padding-right: 5px; text-align: center; position: absolute; right: 10px;}
footer label p {width: 6px; height: 6px; border-radius: 50%; background-color: rgb(0, 128, 255);margin: 10px 5px 0px 5px} 
footer small { text-align: center; font-size: 12px; margin: 4px auto; padding-top: 7px;}
/*** FLEXGRID **/
.grid-wrap { display: flex; flex-wrap: wrap; }
.col10 { flex: 0 0 10%; padding: 5px 5px 5px 0px; }
.col25 { flex: 1 1 25%; padding: 5px 0px; }
.col33 { flex: 1 1 33%; padding: 5px 0px; }
.col50 { flex: 1 1 50%; padding: 5px 0px; min-width: 320px; }
.col100 {flex: 1 1 100%;}
/*** CONTAINER ***/
.container {border-radius: 8px; border: 1px solid grey;}
.scrollcontainer {border-left: 1px solid grey; padding-left: 5px;}
/*** ICONS ***/
.icon {height: 24px; width: 24px;}
.T_UI_Arrow_down {
    width: 100%;
    height: 40px;
    background-image: url("./../media/icon/arrow.svg");
    background-repeat: no-repeat;
    background-position: 96px 0px;
    background-size: 24px 24px;
    transform: rotate(180deg);
}
.T_UI_Arrow_up 
.T_UI_Arrow_left {transform: rotate(270deg);}
.T_UI_Arrow_right {transform: rotate(90deg);}
/*** IMAGE ***/
.media {border-radius: 8px; border: 1px solid grey;}
/*** VIEWS ***/

/* githubpage */
#githubpage {/*min-width:240px;*/ padding-left: 24px; padding-right: 24px;z-index: 100; /* background-color: rgba(0, 0, 0, .5); /*background-image: url("./../media/image/background.png"); background-position: center;background-size: 120%;background-repeat: no-repeat;*/}
main h1 {font-size: 54px;padding: 10px 0px;margin: 0px;}
main a {display: block;color: white;text-decoration: none;}
label {font-style: italic;color: grey;}
label a { display: inline;}
.network ul {list-style-type: none;overflow: hidden;padding: 0px;margin: 0px;}
.network ul li {float: left;padding-right: 20px;}
.network ul li a img {height: 32px;width: 32px;}
/* CV */
/* Intent */
/* Motivation */
/* PROJECTS */

    /* DisplaySubsystem */
    #DisplaySubsystem {width:1080px;}
    /* orbitcontrollsystem */
    #orbitalcontrollsystem {width:800px;}
    /* wegpu-export */
    #webgpu-export {width:1080px;}
    #preview img {border: 1px solid grey; border-radius: 8px;}
    #download a {color: grey;}
    .roadmap { padding: 5px; border: 1px solid black; display: flex; position: relative; }
    .legend { background-color: transparent; display: flex; flex-direction: column; position: absolute; top: 0px; left: 0px; z-index: 1; }
    .legend div { background-color: transparent; font-size: 12px; font-weight: bold; padding-left: 5px; position: relative; }
    .legend div:nth-child(1) { top: 30px; }
    .legend div:nth-child(2) { top: 65px; }
    .legend div:nth-child(3) { top: 102px; }
    .timeline { display: flex; overflow-x: scroll; max-width: 100%; padding-bottom: 6px; flex-grow: 1; }
    .timeline div { background-color: black; flex: 0 0 auto; justify-content: flex-end; border-right: 1px solid black; }
    .timeline div:nth-child(1) label { font-weight: bold; color: white;}
    .timeline > div:last-child { flex-grow: 1; }
    .timeline div label { background-color: rgb(0, 128, 255); color: rgb(31, 58, 97); font-style: italic; display: flex; flex: 0 0 auto; justify-content: flex-end; padding-right: 5px; }
    .timeline div div { background-color: grey; display: flex; justify-content: flex-end; height: 33px; gap: 5px; margin-top: 20px; }
    .timeline div div div { background-color: white; color: black; height: 18px; margin: 5px; padding: 2.5px; border-radius: 2.5px; font-family: Arial, Helvetica, sans-serif; }
    /* webgpu-engine */
    #webgpu-engine {width:1080px;}

/* worksamples */
#worksample_3Dmodels {width:1080px;}
div {background-size: 100%;z-index: 0;}
.header {height: 55px; margin: 25px auto; padding: 0px 354px;}
.header h1 {font-size: 48px; text-align: center; margin: 0px; padding: 0px; float: right;}
.header img {width: 55px; height: 55px; float: left;}
.navigationbar {height: 58px; width: 174px; margin: 25px auto; padding: 0px 477px;}
.navigationbar div {float: left; height: 48px; width: 48px; margin: 5px;}
.link {height: 48px; width: 48px;}
.content {height: 957px; width: 1128px; margin: auto;}
.content h2 {height: 30px; margin: 0px; padding: 10px 10px 0px 10px; vertical-align: middle;}
.content p {height: 207px; margin: 0px; padding: 0px 10px 10px 10px;}
.content img {height: 48px; width: 48px; float: right; padding: 5px;}
.grid {height: 315px; width: 560px; float: left; background-position: center; cursor: pointer; margin: 2px; border-radius: 10px; box-shadow: inset 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 2px rgb(32, 32, 32);}
.grid div {border-radius: 10px;}
.overlay {position: absolute; top: 0px; z-index: 10; background-color: rgba(0,0,0,0.75);}
.overlay.media {border-radius: 6px; border: 2px solid white; position: absolute; z-index: 20;}
.loader {z-index: 30;}
.overlay.func {z-index: 40; cursor: pointer; height: 28px; width: 28px; border-radius: 18px; background-color: white; color: rgba(0, 0, 0, 0.8); font-size: 22px; text-align: center; text-shadow: none; font-weight: bold; font-family: Arial, Helvetica, sans-serif;}
.ambient-shadow-gradiant-top-bottom {height: 315px; width: 560px; margin: 0px; background: linear-gradient(180deg, rgba(0, 0, 0, .86) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0, 0, 0, 0.86) 100%);}
.ambient-shadow-backdrop {background-color: white; border-radius: 24px;}
.ambient-shadow-backdrop:hover {box-shadow: 0 0px 16px white;}
/* worskpace */
#Workspace {max-width: 1080px;}
#Workspace.div {background-image: url("./../../media/image/Template.png") ;}