:root{
 --padding:2%}
@font-face {
 font-family:mainfont;
 src:url(/content/oswald.ttf)}
body { overflow:hidden; margin:0; padding:0; font-family:mainfont}
canvas { position:absolute; left:0px; top:0px; right:0px; bottom:0px; width:100%; height:100%}
.bg { position:absolute; left:0px; top:0px; right:0px; bottom:0px;background-image:var(--backgroundimage); background-size:var(--background-size); background-position:center center; background-repeat:var(--background-repeat); opacity:calc(var(--background-opacity) / 100)}
.bgc { position:absolute; left:0px; top:0px; right:0px; bottom:0px; background:var(--background-color1); background:linear-gradient(180deg, var(--background-color1) 0%, var(--background-color2) 100%)}
.hidden { display:none !important}
.scratchpad { right:auto; bottom:auto; width:auto; height:auto; border:1px solid}
.window { display:block; margin:auto; max-width:1280px; height:100vh; position:relative}
footer { position:absolute; left:0; right:0; bottom:0; background:#0A0;z-index:10; padding:0px 20px 10px 20px}
footer .topgrass { position:absolute;left:0; right:0; top:-46px; height:50px; background:url('/content/grass.svg'); background-repeat:repeat-x; background-position:bottom center; background-size:contain}
footer .content { display:flex; align-items:center; gap:20px}
footer .content > * { flex:1; display:flex; align-items:center; gap:30px}
footer .content > *:last-child { text-align:right}
footer .content .item {cursor:pointer; position:relative; padding:5px; user-select:none}
footer .content .item span { border-radius:10px; background:#8B8; left:0px; right:0px; height:16px;
 display:block;
 bottom:0px; z-index:-1;
 position:absolute}
footer .content .item img { width:50px; height:50px}
footer .content .item[data-type="shop"] img { transform:translate(-5px,0)}
footer .content .item.selected span { box-shadow:0 0 10px rgba(250,250, 0, 0.8); background:#77d3f7}
footer .content .item.selected img { transform:translate(0, -10px) scale(1.2)}
footer .content .money { flex:1}
footer .coin img { vertical-align:text-top; width:24px; height:24px}
footer .coinamount { margin-left:5px; font-weight:bold; font-size:20px; color:#FFF; text-shadow:0px 0px 2px rgba(0,0,0,0.3); min-width:60px; display:inline-block;
 text-align:left}
.dialog { position:absolute; border-radius:5px; box-shadow:2px 2px 5px rgba(0,0,0,0.2); z-index:100}
.dialog .top { background:#04204e; color:#FFF; padding:6px 10px; border-radius:5px 5px 0 0; font-size:16px; user-select:none; cursor:pointer; font-weight:bold; position:relative}
.dialog .top .closebtn { width:16px; height:16px; position:absolute; right:10px; top:50%; transform:translate(0,-50%)}
.dialog .bottom { background:#7AF; border-radius:0 0 5px 5px; display:flex; flex-direction:column;
 height:100%;
 overflow:hidden; gap:20px}
.dialog .tabs { width:15%; flex:unset; border-right:2px solid #006; box-shadow:inset 0 3px 3px rgba(0,0,0,0.2)}
.dialog .tabs > * { display:block; padding:20px 10px; cursor:pointer; border-right:2px solid transparent}
.dialog .tabs > *:hover { border-right:2px solid #FFF}
.dialog .tabs > .selected { background:linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(105, 178, 214, 0.51) 100%); background:linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
border-right:2px solid #FFF;
font-weight:bold}
.dialog .tabs img { height:40px; margin:auto; display:block}
.dialog .tabs > * > span { display:block; text-align:center; margin-top:8px}
.calculator { position:absolute; left:5%; bottom:120px; width:200px; border-radius:5px; box-shadow:2px 2px 5px rgba(0,0,0,0.2)}
.calculator .bottom { padding:10px; gap:10px}
.calculator button { width:100%; padding:10px; box-sizing:border-box; border-radius:4px; cursor:pointer; border:1px solid #888}
.calculator .imgbtn { padding:7px}
.calculator .imgbtn img { width:20px; height:20px}
.calculator input { width:100%; padding:6px; box-sizing:border-box; border-radius:4px; font-size:18px; border:1px solid #888}
.calculator .bottom > .screen { display:flex; align-items:center; width:100%}
.calculator .bottom > .keys > span { display:flex; align-items:center; width:100%; gap:10px; margin-top:10px}
.calculator .bottom > .keys > span > span { flex:1}
header { position:absolute; left:0; right:0; top:0; padding:10px; z-index:10; display:flex; align-items:center}
header > span { flex:1}
header > span:last-child { text-align:right}
.customize { left:5%; right:5%; top:5%; bottom:150px; display:flex; flex-direction:column}
.customize .bottom { flex-direction:row; user-select:none; gap:0}
.customize .customizetabs { padding:15px; flex:1; gap:30px; background:linear-gradient(180deg,rgba(122, 115, 255, 1) 0%, rgba(107, 176, 255, 1) 100%); box-shadow:inset 0 3px 3px rgba(0,0,0,0.2);display:flex; flex-direction:column}
.customize .animaldisplay { display:block; width:100%; min-height:200px; position:relative; cursor:pointer}
.inventory { display:block; overflow-y:scroll; overflow-x:hidden; padding:1px; flex:1}
.inventorygrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); grid-gap:20px; user-select:none}
.inventorygrid > * { position:relative; width:100%; height:0; cursor:pointer; box-sizing:border-box; border:1px solid #444; border-radius:5px; display:inline-block; background-color:#EEE;background-repeat:no-repeat;
 background-size:contain, cover; background-position:center -40%, center center; padding-bottom:120%;
 background-image:var(--img), url('/content/itembg.jpg')}
.inventorygrid > .check { border:1px solid #04204e; background-color:#a1d5ff}
.inventorygrid .price { position:absolute; left:10px; right:10px; bottom:0; transform:translate(0, 50%); z-index:50; padding:2px 6px 4px 6px; font-size:14px; text-align:center; border:2px solid #444; border-radius:10px; background:#FFF}
.inventorygrid .price > * {display:inline-block; vertical-align:middle}
.inventorygrid .price img { width:16px; height:16px; margin-right:5px}
.inventorygrid .name { position:absolute; left:0; right:0; bottom:15%; text-align:center; z-index:10; font-size:13px}
.inventorygrid > *:before { position:absolute; z-index:10; left:0; right:0; bottom:0; content:''; height:30%; background:linear-gradient(180deg,rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 100%); border-radius:0 0 5px 5px}
.inventorygrid .amount { position:absolute; right:10px; top:10px; background:#FFF; border-radius:50%; padding:2px 6px 3px 6px; font-size:12px}
.inventorygrid .amount:empty { display:none}
.store { left:5%; right:5%; top:5%; bottom:150px; display:flex; flex-direction:column}
.store .bottom { flex-direction:row; user-select:none; gap:0}
.store .inventory {padding:15px; background:linear-gradient(180deg,rgba(122, 115, 255, 1) 0%, rgba(107, 176, 255, 1) 100%); box-shadow:inset 0 3px 3px rgba(0,0,0,0.2)}
@media screen and (min-width:800px) {
}