@keyframes fadein{from{opacity:0;} to{opacity:0.8;}} @keyframes fadeinFull{from{opacity:0;} to{opacity:1;}} @keyframes scalein{from{transform:scale(0);} to{transform:scale(1);}} body{font-family:sans-serif;background-color:#000;color:#ccc;} h1{font-family:'Noto Sans';margin:0;} h1 span{color:#fff;} main{display:flex;flex-flow:row wrap;} section{flex:1;flex-basis:800px;} .svgContainer{width:min(100vw,100vh,100%);height:min(100vw,100vh,100%);} svg{max-width:100%;max-height:100%;} text{font-size:min(0.3vw,0.3vh);font-family:'Noto Sans',sans-serif;fill:#eee;} g.node{cursor:default;pointer-events:bounding-box;transition:ease-in-out 100ms;transform-origin:50% 50%;transform-box:fill-box;} g.node:hover{transform:scale(1.2);} g.node text{fill:#888;} g.node:hover text{fill:#fff;filter:drop-shadow(2px 2px 2px rgb(0,0,0));} g.node circle{transform-origin:50% 50%;transform-box:fill-box;animation:scalein 3.5s ease-in-out forwards;transform:scale(0);} g.node:hover circle{filter:drop-shadow(2px 2px 2px rgba(0,0,0,0.7));} text.header{font-family:'Sedan';text-transform:capitalize;filter:drop-shadow(0 0 1px #000);transform-origin:0 50%;transform-box:fill-box;transform:rotate(-90deg) scale(1.5) translate(-60%,2px);} text.label{opacity:0;animation:fadein 1s ease-in-out 3.5s forwards;transform-origin:0 0;transform-box:fill-box;} g.node:nth-child(3n) text.label{transform:translateY(5px);} g.node:nth-child(3n+1) text.label{transform:translateY(10px);} text.detail{opacity:0;} g.node:hover text.detail{opacity:1;filter:drop-shadow(0 0 1px #000);fill:#fff;} g.node:hover text.label{opacity:1;filter:drop-shadow(0 0 1px #000);} #connections path{transform-origin:50% 50%;transform-box:fill-box;opacity:0;animation:fadein 2s ease-in-out 1s forwards;backface-visibility:hidden;} .paging ul{list-style-type:none;padding:0;display:flex;flex-flow:row wrap;align-items:center;} .paging ul li{flex:1;} .paging button{font-family:'Noto Emoji';font-size:0.5cm;padding:0.25cm 0.5cm;border:2.5px solid #3bf;background-color:#444;color:#3bf;border-radius:0.5cm 1cm;} .paging button:hover{transform:scale(1.2);box-shadow:#3bf 0 0 8px;} table.a8b-table{font-family:'Noto Sans',sans-serif;width:80%;margin:auto;text-align:left;} table.a8b-table tbody tr:nth-child(even){background-color:#222;} table.a8b-table tbody tr:hover{transform-origin:50% 50%;transform-box:fill-box;transform:scale(1.2);background-color:#3bf;color:#444;} table.a8b-table thead tr{color:#3bf;font-size:larger;cursor:pointer;text-align:center;} table.a8b-table td{padding:0.1cm;} .a8b-table td .bar{height:1em;box-shadow:#000 0 0 4px;} .flowSection{text-align:right;} .flowSection>label,.paging label{font-family:'Noto Sans',sans-serif;margin:0.5cm;display:inline-block;} .flowSection>label span,.paging label span{color:#5f7;padding-right:1em;} .flowSection{opacity:0;animation:fadeinFull 1s ease-in-out 2s forwards;} .flowSection>label a{display:none;} .flowSection>label input,.flowSection>label select,.paging label input{border:2.5px solid #5f7;background-color:#444;color:#5f7;padding:0.2cm;border-radius:0.5cm;outline:none;} .flowSection>label input:active,.flowSection>label input:focus,.flowSection>label input:hover,.flowSection>label select:active,.flowSection>label select:focus,.flowSection>label select:hover,.paging label input:active,.paging label input:focus,.paging label input:hover{box-shadow:#5f7 0 0 8px;} .flowSection>label:active,.paging label:active,.flowSection>label:focus,.paging label:focus,.flowSection>label:hover,.paging label:hover{transform:scale(1.2);} .paging{text-align:center;} @keyframes rotateBack{from{transform:rotateX(0);} to{transform:rotateX(60deg);}} @keyframes rain{0%{opacity:0.3;transform:scaleY(0);} 70%{opacity:0.3;transform:scaleY(100%);} 100%{opacity:0.7;transform:scaleY(100%);}} #edgeGraph{opacity:0;animation:fadein 1s ease-in-out 1s forwards;} #edgeGraph svg{animation:rotateBack 3s ease-in-out 5s forwards;} #edgeGraph svg path{fill:none !important;stroke:#f81 !important;stroke-width:2px !important;} #edgeGraph svg line{opacity:0;transform-origin:100% 0;transform-box:fill-box;transform:scaleY(0);stroke-linecap:round;animation:rain 2s linear 8s forwards;} #edgeGraph svg .edge:hover line{scale:2 1;} #edgeGraph svg .edge text{stroke:#555;font-size:.4cm;transition:.3s;opacity:0;transform-origin:50% 100%;transform-box:fill-box;transform:rotateX(0deg) scaleY(1.5);} #edgeGraph svg .edge:hover text{stroke:#ccc;font-size:1cm;opacity:1;filter:drop-shadow(0 0 2px #000);} #tables{display:flex;flex-flow:row wrap;} footer{color:#555;} footer a{color:#3bf;} footer a:visited{color:#94d;} footer .ccpaNotice{background:#000 !important;}