/* custom properties */ :root { --header-height:55px; --background-color-frostedglass:rgba(255,255,255,0.75); --x-bgcol-debug:rgba(255,255,255,0.4); --col-semiblack:rgba(0,0,0,.88); --font-default:"Ryumin Bold KL", serif; --font-alternate:"Sawarabi Gothic", sans-serif; --inline-size-stage:690px; } /* elements */ html,body{margin:0;width:100%;height:100%;} a{text-decoration:none;color:unset;cursor:pointer;} th{vertical-align:top;text-align:unset;} th,td{padding:0 1em;} * {box-sizing:border-box;color:var(--col-semiblack);font-family:var(--font-default);} button {color:var(--col-semiblack);font-family:var(--font-default);} div {background-color:var(--bgcol-debug);} button {background-color:rgba(255,255,255,0);border-style:none;border-width:0;border-color:transparent;} /* primitive containers */ header {z-index:3;display:flex;position:sticky;top:0;height:var(--header-height);background-color:var(--background-color-frostedglass);backdrop-filter:blur(14px);padding:0 16px;} main {z-index:1;display:flex;-webkit-flex-direction:column;align-items:center;width:100%;height:auto;} footer {z-index:1;display:flex;-webkit-flex-direction:column;align-items:center;width:100%;height:323px;background-color:white;} /* DIVs */ /*#stickycontainer{background-image:url("../images/bg.jpg");background-size:cover;background-position:50% 0;background-attachment:fixed;}*/ #stickycontainer::before {content:"";display:block;width:100%;height:100vh;position:fixed;top:0;left:0;z-index:-10;background-image:url("../images/bg.jpg");background-size:cover;background-repeat:no-repeat;background-position:50% 0;} /* INSEDE
*/ /* header>div#logo */ header>div#logo {align-items:center;display:flex;flex-grow:0;flex-shrink:0;flex-basis:auto;} header>div#logo a {display:inline-block;position:relative;top:3px;height:31px;} header>div#logo a img {height:31px;width:auto;} header>div#logo span {margin-bottom:2px;margin-left:12px;font-weight:bold;font-family:var(--font-alternate);} /* header>div#interface */ header>div#interface {align-items:center;display:flex;margin-inline-start:auto;margin-inline-end:0;background-color:rgba(255,255,255,0);} header>div#interface button {width:36px;height:36px;padding:0;border-radius:8px;margin:0 4px;} header>div#interface button:hover, header>div#interface button.active {background-color:rgba(64,64,64,.25);} header>div#interface button img{display:block;position:relative;inset:0;margin:auto;height:28px;width:auto;cursor:pointer;filter:brightness(0);} header>div#interface button.active img, header>div#interface button.active:hover img {filter:brightness(100%);} /* INSEDE
*/ main>div#div1035-1{display:flex;flex-wrap:wrap;align-items:center;width:var(--inline-size-stage);height:auto;} body#top .cards {transition-duration:1s;transition-property:transform background-color;transition-timing-function:ease-out;opacity:0;margin-top:47px;} div.cards {margin:15px;background-color:rgba(255,255,255,.50);border-radius:11px;backdrop-filter:blur(24px);box-shadow:10px 10px 10px rgba(0,0,0,0.05);transition-duration:.1s;transition-property:transform background-color;transition-timing-function:ease-out;overflow:hidden;overflow:hidden;} div.cards * {user-select:none;} div.cards a {display:block;width:100%;height:100%;} div.cards.clickable:hover {transform:scale(1.025);background-color:rgba(255,255,255,.75);cursor:pointer;} div.cards.s033 {inline-size:315px;block-size:315px;} div.cards.s066 {inline-size:660px;block-size:315px;} div.cards.s100 {inline-size:660px;block-size:315px;} div.cards button {width:100%;height:100%;} div.cards#notes{padding:64px;height:auto;line-height:1.75;font-size:1.25rem;} div.cards#notes>article>p{margin:0;position:relative;z-index:2;} div.cards#notes input, div.cards#notes textarea, div.cards#notes button{box-sizing:border-box;border:solid rgba(0,0,0,0.5) 1px;border-radius:6px;outline-style:none;outline-color:transparent;outline-width:0;background-color:rgba(255,255,255,.25);line-height:1.75;font-size:1.25rem;margin-bottom:.25em;} div.cards#notes input{width:100%;padding:10px;} div.cards#notes textarea{width:100%;height:24em;padding:10px;} div.cards#notes button{width:100%;transition-duration:.1s;transition-property:transform background-color;transition-timing-function:ease-out;} div.cards#notes input:hover,div.cards#notes textarea:hover{background-color:rgba(255,255,255,.5);} div.cards#notes input:focus,div.cards#notes textarea:focus{background-color:rgba(255,255,255,.5);} div.cards#notes button:hover{transform:scale(1.025);background-color:rgba(255,255,255,.75);cursor:pointer;} div.cards#notes button:focus{transform:scale(1.025);background-color:rgba(255,255,255,.75);cursor:pointer;} div.cards#notes img {display:inline-block;position:absolute;right:-50px;bottom:-64px;z-index:1;width:500px;opacity:.1;} div.cards#notes span.headings {display:block;font-size:1.5rem;font-weight:bold;margin-top:1rem;} div.cards#notes span.signature{display:block;font-size:1.5rem;font-weight:bold;margin-top:1rem;text-align:end;position:relative;z-index:2;} div.cards#notes img.greeting {display:inline-block;position:absolute;right:-50px;bottom:-1100px;z-index:1;width:460px;opacity:.5;} div.cards.s033#softwaredevelopment img {display:inline-block;position:absolute;left:-50px;top:-60px;z-index:1;width:630px;filter:invert(1);} div.cards.s033#softwaredevelopment span{display:inline-block;position:absolute;left:28px;top:200px;z-index:2;font-size:1.5em;font-weight:bold;} div.cards.s066#softwaredevelopment img {display:inline-block;position:absolute;left:118px;top:-60px;z-index:1;width:630px;filter:invert(1);} div.cards.s066#softwaredevelopment span{display:inline-block;position:absolute;left:28px;top:200px;z-index:2;font-size:1.5em;font-weight:bold;} div.cards.s100#softwaredevelopment img {display:inline-block;position:absolute;left:118px;top:-60px;z-index:1;width:630px;filter:invert(1);} div.cards.s100#softwaredevelopment span{display:inline-block;position:absolute;left:28px;top:200px;z-index:2;font-size:2em;font-weight:bold;} div.cards.s033#verification img {display:inline-block;position:absolute;left:2px;top:36px;z-index:1;width:418px;} div.cards.s033#verification span{display:inline-block;position:absolute;left:28px;top:200px;z-index:2;font-size:1.5em;font-weight:bold;} div.cards.s100#verification img {display:inline-block;position:absolute;right:-176px;top:-165px;z-index:1;width:800px;} div.cards.s100#verification span{display:inline-block;position:absolute;left:28px;top:200px;z-index:2;font-size:2em;font-weight:bold;} div.cards.s033#greeting img {display:inline-block;position:absolute;left:026px;top:5px;z-index:1;width:180px;} div.cards.s033#greeting span{display:inline-block;position:absolute;left:214px;top:250px;z-index:2;font-size:1.5em;font-weight:bold;} div.cards.s100#greeting img {display:inline-block;position:absolute;right:-176px;top:-165px;z-index:1;width:800px;} div.cards.s100#greeting span{display:inline-block;position:absolute;left:28px;top:200px;z-index:2;font-size:2em;font-weight:bold;} div.cards.s033#companyprofile img {display:inline-block;position:absolute;left:93px;top:-31px;z-index:1;width:281px;} div.cards.s033#companyprofile span{display:inline-block;position:absolute;left:28px;top:250px;z-index:2;font-size:1.5em;font-weight:bold;} div.cards.s100#companyprofile img {display:inline-block;position:absolute;right:-120px;top:-84px;z-index:1;width:460px;} div.cards.s100#companyprofile span{display:inline-block;position:absolute;left:28px;top:200px;z-index:2;font-size:2em;font-weight:bold;} div.cards.s033#affiliated img:nth-child(1) {display:inline-block;position:absolute;left:75px;top:143px;z-index:1;width:150px;} div.cards.s033#affiliated img:nth-child(2) {display:inline-block;position:absolute;left:14px;top:85px;z-index:1;width:281px;} div.cards.s033#affiliated span{display:inline-block;position:absolute;left:28px;top:250px;z-index:2;font-size:1.5em;font-weight:bold;} div.cards.s100#affiliated img {display:inline-block;position:absolute;right:-120px;top:-84px;z-index:1;width:460px;} div.cards.s100#affiliated span{display:inline-block;position:absolute;left:28px;top:200px;z-index:2;font-size:2em;font-weight:bold;} div.cards.s033#contact img {display:inline-block;position:absolute;left:93px;top:-31px;z-index:1;width:281px;} div.cards.s033#contact span{display:inline-block;position:absolute;left:28px;top:250px;z-index:2;font-size:1.5em;font-weight:bold;} div.cards.s100#contact img {display:inline-block;position:absolute;right:-120px;top:-84px;z-index:1;width:460px;} div.cards.s100#contact span{display:inline-block;position:absolute;left:28px;top:200px;z-index:2;font-size:2em;font-weight:bold;} div.cards#whatsnew img {display:inline-block;position:absolute;left:93px;top:-31px;z-index:1;width:281px;} div.cards#whatsnew span{display:inline-block;position:absolute;left:28px;top:20px;z-index:2;font-size:1.5em;font-weight:bold;} div.cards#whatsnew ul {position:absolute;left:30px;top:50px;height:232px;width:945px;width:605px;padding:0;overflow-y:auto;padding-right:.5em;} div.cards#whatsnew li {border-bottom-style:dashed;border-bottom-color:var(--col-semiblack);border-bottom-width:1px;list-style-type:none;line-height:2;} div.cards#whatsnew ul::-webkit-scrollbar{background-color:transparent;width:8px;} div.cards#whatsnew ul::-webkit-scrollbar-thumb{background-color:white;border-radius:4px;width:8px;} /* INSEDE