/* 1068 BETA */

header nav img {width: 24px; height: 24px; position: relative; top: 5px;}
header nav label {position: absolute; right: 10px; height: 24px;}
header nav label img {width: 20px; height: 20px;}

body {display: flex;flex-direction: column;}

header nav {width: 100%; z-index: 200; position: absolute; top:0px; left: 0px;}
nav a {display: flex;}
nav img {width: 24px; height: 24px; position: relative; top: 5px; left: 0px;}
nav label {position: absolute; top: 0px;right: 10px; height: 24px;}
nav label img {width: 20px; height: 20px;}
footer {width:100%;}
main {margin: 0px auto; flex-grow: 1; flex: 1 0 auto;}
main header {display: flex; flex-direction: column; position: absolute;}

/* 2768 generated */
/* TODO: implement conflict free */
#betalayout {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  flex-wrap: wrap; /* wrap when window shrinks */
}

#betalayout > section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 3462 REWORKED */
main {flex-direction: column;align-items: center;}
body main section article{width: 100%;}
body main section {width: 100%;}

@media (max-width: 540px) {
    body header h1 {text-align: center;}
    body main {width: 360px;}
    body main header {width: 360px;text-align: center;}
}
@media (max-width: 720px) {
    body header h1 {text-align: center;}
    body main {max-width: 480px;}
    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;}
}

/* 6481 shared */
* { color-scheme: dark; font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif; user-select: none; }

a:link, a:visited, a:hover, a:active, a:focus { color: rgb(0, 128, 255); text-decoration: none; }
html, body { height: 100%; margin: 0px; display: flex; flex-direction: column;}
h3, h4 { margin-top: 0px;}
header h1 { width: 100%; max-width: 1080px; min-width: 433px; margin: auto; font-size: 28px;}
header {display: flex;}
.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; }
footer { display: flex; flex-shrink:0; flex-wrap: wrap;background-color: rgb(27, 27, 27); border-top: 1px solid black; color: grey; height: 42px;margin-top: 20px;}
footer small { text-align: center; font-size: 12px; margin: 4px auto; padding-top: 10px; z-index: 0;}
footer label { display: flex; flex-wrap: wrap;margin-top: 8px;padding-right: 5px; text-align: center; position: absolute; right: 10px; z-index: 100;}
footer label p {width: 6px; height: 6px; border-radius: 50%; background-color: rgb(0, 128, 255);margin: 8px 5px 0px 5px} 
footer img {width : 32px; height: 32px; float: right; padding: 0px; z-index: 1; position: relative; bottom: 5px;}
/* githubpage */
#githubpage { min-width:210px; padding-top: 10%; z-index: 100; /*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;}
/* wegpu-export */
#webgpu-export {width:1080px;}
#preview img {border: 1px solid grey; border-radius: 8px;}
.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: 25px; }
.legend div:nth-child(2) { top: 64px; }
.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;}