main{--window-size:min(100vw,33vh);--window-margin:15vw;--window-left-margin:var(--window-margin);--window-extra-left-margin:calc(50vw - var(--window-size)/2 - var(--window-left-margin));--line-window-distance:15vh;--line-height:min(1.6vh,0.7vw);--line-margin:calc(var(--line-height)/2);--line-color:#b7b7b7;--line-border-color:#5c5c5c;--background-color:#eee;background-color:var(--background-color);box-sizing:border-box;display:grid;grid-template-areas:"window" "console" "console";grid-template-columns:1fr;grid-template-rows:var(--window-size) 1fr 1fr;height:100vh;row-gap:3vh;width:100vw}@media (min-width:1250px){main{--line-window-distance:180px;--window-left-margin:calc(var(--window-margin)/3);--window-extra-left-margin:0px;--window-size:min(50vw,67vh);column-gap:var(--window-margin);grid-template-areas:"window     ." "window     console" ".          console";grid-template-columns:var(--window-size) 1fr;grid-template-rows:calc(var(--window-size)/2) calc(var(--window-size)/2) 1fr;row-gap:0}}#scene{background-image:url(../media/img/stars.jpg);grid-area:window;height:var(--window-size);margin-left:calc(var(--window-left-margin) + var(--window-extra-left-margin));overflow:hidden;position:relative;width:var(--window-size);z-index:10}.window{height:100%;left:0;position:fixed;top:0;width:100%}#scene>div>img{position:relative}#scene>div:first-child>img{height:auto;left:35%;top:-120px;width:60%}#scene>div:nth-child(2)>img{height:auto;left:20%;width:30%}#scene>div:nth-child(3)>img{height:auto;left:80%;top:140px;width:50%}#scene>div:nth-child(4)>img{height:auto;left:-5%;top:350px;width:20%}#line{height:100%;width:100%}#line,.line{position:absolute}.line{--line-size:calc(var(--window-size)/1.2);--line-inclination:calc(var(--window-margin)/1.2);border-bottom:0 solid transparent;border-left:var(--line-inclination) solid transparent;border-right:var(--line-inclination) solid transparent;border-top:var(--line-size) solid var(--line-border-color);height:0;transform:translate(calc(var(--window-left-margin) + var(--window-extra-left-margin) - var(--window-margin)),var(--line-window-distance));width:calc(var(--window-size) + var(--line-inclination)/2);z-index:1}.line.fill{--line-size:calc(var(--window-size)/1.2 - var(--line-margin));border-top-color:var(--line-color);transform:translate(calc(var(--window-left-margin) + var(--window-extra-left-margin) - var(--window-margin) + var(--line-margin)),var(--line-window-distance));width:calc(var(--window-size) + var(--line-inclination)/2 - var(--line-margin)*2);z-index:3}.line.border,.line.fill{border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}.line.border{--line-size:calc(var(--window-size)/1.2 - var(--line-margin) - var(--line-height));border-top-color:var(--line-border-color);transform:translate(calc(var(--window-left-margin) + var(--window-extra-left-margin) - var(--window-margin) + var(--line-margin) + var(--line-height)),var(--line-window-distance));width:calc(var(--window-size) + var(--line-inclination)/2 - (var(--line-margin) + var(--line-height))*2);z-index:4}.line.transparent{--line-size:calc(var(--window-size)/1.2 - var(--line-margin)*2 - var(--line-height));border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;border-top-color:var(--background-color);transform:translate(calc(var(--window-left-margin) + var(--window-extra-left-margin) - var(--window-margin) + var(--line-margin)*2 + var(--line-height)),var(--line-window-distance));width:calc(var(--window-size) + var(--line-inclination)/2 - var(--line-margin)*4 - var(--line-height)*2);z-index:6}.flat{background:var(--line-color);border-bottom:var(--line-margin) solid var(--line-border-color);border-top:var(--line-margin) solid transparent;height:var(--line-height);position:absolute;right:0;top:var(--line-window-distance);width:calc(100vw - var(--window-size) - var(--window-left-margin) - var(--window-extra-left-margin));z-index:2}.flat.border{background:transparent;border-bottom:solid transparent;border-top:var(--line-margin) solid var(--line-border-color);z-index:5}.flat.mobile{left:0;right:unset}@media (min-width:1250px){.flat.mobile{display:none}}#console{--console-border-color:#333;--console-border-size:30px;background-color:#000;border-top:var(--console-border-size) solid var(--console-border-color);color:#fff;font-size:max(1vw,20px);grid-area:console;padding:40px 0 0 5vw;z-index:30}@media (min-width:1250px){#console{border-left:var(--console-border-size) solid var(--console-border-color);border-top-left-radius:var(--console-border-size)}}a{color:#0060b6}a,a:hover{text-decoration:none}a:hover{color:#00a0c6;cursor:pointer}body{margin:0}