styles.css

:root{--font:"Lato",sans-serif;--font-color:#003f7f;--bg:linear-gradient(#acc8e5, #719dcc);--inner-bg:linear-gradient(#fff5, transparent)}body{font-family:var(--font);color:var(--font-color);margin:0;text-align:center;box-sizing:border-box;user-select:none}table{margin:auto}#bg{position:fixed;z-index:-1;left:0;top:0;height:100%;width:100%;background:var(--bg)}#inner_bg{position:absolute;height:100%;width:95%;left:2.5%;background:var(--inner-bg)}#loading{position:fixed;top:calc(50% - 50px);left:0;width:100%;height:50px;background:#fff7}#loading *{margin:0}#app{margin-left:2.5%;margin-right:2.5%}h1,h2,h3{color:#007fff}.tab_navigator{width:100%;height:20%;padding-top:5px;overflow:hidden;box-shadow:inset 0 -20px 8px -20px #07f7}.tab_navigator button{border-bottom-left-radius:0;border-bottom-right-radius:0;margin:0 2px}.tab_navigator[role=layers] button{font-size:16px;padding:6px 8px}.tab{position:relative;width:100%}.tab:empty+br{display:none}.newsTicker{padding:5px 0;margin:10px 10% 0 10%;border:1px solid;border-radius:5px;overflow:hidden;transition:.2s}.newsTicker:active{transform:scale(.95)}.newsMessage{width:max-content}button{background:linear-gradient(white,#7fcfff);color:#000b;box-shadow:0 3px 6px #07f7;border:0;border-radius:5px;padding:5px 7px;font-family:var(--font);transition:all .3s ease;transform:scale(1)}button:hover{transform:scale(1.05)}button:active{transform:scale(1)}.resource{font-size:18px}.resource b{font-size:24px;text-shadow:0 1px 6px #07f7}.resourceTable td:not(:first-child) button{width:180px}.flex{display:flex;flex-direction:row;flex-wrap:wrap;vertical-align:top}.flex-base{flex-grow:1;flex-shrink:0}.inline{display:inline-block}.buyables{display:grid;align-items:center;grid-template-columns:repeat(auto-fill,minmax(450px,1fr))}.buyable{text-align:left;display:flex;flex-direction:row;text-align:left;padding:0}.buyable>div:first-child{padding:5px 8px;flex-grow:1}.buyable>div:first-child>b{font-size:18px}.buyable>div:first-child>span{display:inline-block;min-height:50px;padding-top:2px;font-size:13.3333px}.buyable button{width:180px;height:calc(100% - 12px);margin:6px}.canbuy{background:linear-gradient(#bfb,#7f7);color:#570;transition:all .8s ease}.cannotbuy{background:linear-gradient(grey,#533);color:#200;transition:all .8s ease}.tooltip{position:relative}.detailed{text-decoration:underline dotted}.tooltip .tooltiptext{--offsetX:0px;visibility:hidden;opacity:0;width:max-content;max-width:400px;bottom:calc(100% - 8px);left:calc(50% + var(--offsetX));transform:translateX(-50%) scale(.9);filter:drop-shadow(0 1px 3px #bfdfff) blur(2px);background:linear-gradient(white,#bfdfff);color:#000;text-shadow:none;text-align:center;padding:5px 8px;border-radius:6px;font-size:13.3333px;pointer-events:none;position:absolute;z-index:1;transition:.2s}.tooltip:hover .tooltiptext{bottom:calc(100% + 8px);transform:translateX(-50%);filter:drop-shadow(0 1px 3px #07f7);opacity:1;visibility:visible}.tooltip .tooltiptext::after{content:"";position:absolute;top:calc(100% - 1px);left:calc(50% - var(--offsetX));transform:translateX(-50%);border:9px solid transparent;border-top:9px solid #bfdfff}.tooltip .tooltiptext.bottom{top:100%;bottom:auto}.tooltip:hover .tooltiptext.bottom{top:calc(100% + 8px)}.tooltip .tooltiptext.bottom::after{bottom:calc(100% - 1px);top:auto;border:9px solid transparent;border-bottom:9px solid #fff}.tooltiptext h1{font-size:11px;text-transform:uppercase;margin:0;border-bottom:1px solid;color:inherit}.tooltiptext h1:not(:first-child){margin-top:5px}.tooltiptext table{border-spacing:0;margin-top:3px}.tooltiptext table td:first-child{text-align:left}.tooltiptext table td:last-child{padding-left:1em;text-align:right}.tooltiptext table tr:nth-last-child(2) td{padding-bottom:4px}.tooltiptext table tr:last-child td{padding-top:4px}.tooltiptext table tr:last-child td{border-top:1px solid}.ach{border-radius:12px;font-size:12px;width:8vw;height:8.25vw;padding:2px 4px;border:2px solid #0000003f;background-size:100% var(--progress),100% 200%;background-origin:border-box;background-position:bottom,top;background-repeat:no-repeat,repeat}.ach.incomplete{background-image:linear-gradient(#0a0,#060),linear-gradient(red,#000);text-shadow:-1px 0 8px #3f0000,0 0 8px #3f0000,1px 0 8px #3f0000;color:#ffbfbf}.ach.completed{background-image:linear-gradient(#f5f,#929),linear-gradient(lime,green);color:#007f00;text-shadow:-1px 0 8px #bfffbf,0 0 8px #bfffbf,1px 0 8px #bfffbf}.ach.hyper{background-size:100%;background-image:linear-gradient(#b0b,#707);color:#ffbfff;text-shadow:-1px 0 8px #ffbfff,0 0 8px #ffbfff,1px 0 8px #ffbfff;border:2px solid #ffffff7f}.criticalError #bg{background:linear-gradient(red,#000)}.criticalError #inner_bg{background:#000}.criticalError button{background:#800!important;color:#000!important;box-shadow:3px 3px 6px #f007}.criticalError #app,.criticalError #app *{color:red!important}.criticalError pre{display:inline-block;text-align:left}#notifyarea{position:fixed;display:flex;flex-direction:column;align-items:flex-end;top:6px;right:6px;z-index:1}.notification{position:relative;display:inline-block;width:max-content;margin-bottom:4px;padding:4px 6px;background:linear-gradient(white,#bfdfff);box-shadow:0 1px 3px #07f7;font-size:13.3333px;color:#000;text-align:right;border-radius:6px;z-index:1}.notification.closeAll{margin:-6px calc(-20% - 6px) -18px 0;padding:4px calc(120% + 32px) 4px 6px;border-radius:0 0 0 6px;width:max-content}.notification.dismissable:hover{padding-left:26px;margin-left:-20px}.notification.dismissable:hover::before{content:"x";position:absolute;display:inline-block;left:0;width:20px;top:0;bottom:0;padding:4px 0;border-radius:6px 0 0 6px;text-align:center;background:linear-gradient(red,#000);color:#fff}.fade-enter-active{transition:all .3s cubic-bezier(.24, .66, .34, 1.27)}.fade-leave-active{transition:all .2s ease-in}.fade-enter-from,.fade-leave-to{margin-bottom:-24px;transform:translateX(calc(100% + 20px))}#version{position:fixed;top:0;right:0;text-align:right;opacity:.5}.changelog *{list-style-type:none}.changelog .add{background:linear-gradient(90deg,#0f07,transparent);color:#0a0}.changelog .improve{background:linear-gradient(90deg,#fb07,transparent);color:#a70}.changelog .remove{background:linear-gradient(90deg,#f007,transparent);color:#a00}#hardreset{background:linear-gradient(red,#000);color:#fff;box-shadow:3px 3px 6px red}.buyable:is([role="efficient miner"]){background-image:url("images/StrongMiner_BG_LQ.png");background-position:auto 25%;background-size:cover 20%;color:#fff}.buyable:is([role="ranged miner"]){background-image:url("images/RangedMiner_BG_LQ.png");background-position:auto 10%;background-size:cover 20%;color:#fff}.upgrade:is([role="miner power"]){background-image:url("images/SSH_Hashing.png")}button[role=equipment]{background:linear-gradient(white,#c093ed)}button[role=greenpapers]{background:linear-gradient(white,#bfb)}button[role=achievements]{background:linear-gradient(white,#ffb)}button[role=guild],button[role=statshistory1],button[role=statslayer1]{background:linear-gradient(white,#7fb)}.inventory{display:inline-block;text-align:left;width:300px;min-height:120px;padding:8px;border-radius:8px;background:#0037;box-shadow:inset 0 2px 32px #0037}frac{display:inline-block;vertical-align:middle;width:max-content;font-size:.9em}frac>div:last-child{width:100%;border-top:1px solid}