html, body { overflow-x: hidden; position: relative; }
body { padding: 0; margin: 0; top: 0; left: 0; cursor: default; font-family: "Georgia", serif; font-size: 1.1em; background-image: url('images/stone.png'); background-repeat: repeat; overflow-x: hidden; }

#logo { z-index: 80; position: fixed; top: 25px; left: 5px; font-family: "VT323", monospace; font-size: 65px; font-weight: bold; color: yellow; text-shadow: 2px 3px 0px #393B0B; animation: title-animation 0.7s linear alternate infinite; }
@keyframes title-animation { from { transform: rotate(-10deg) scale(0.8,0.8); } to { transform: rotate(-10deg) scale(1.0,1.0); } }
@keyframes title-animation-mobile { from { transform: scale(0.6,0.6); } to { transform: scale(0.8,0.8); } }
@keyframes title-animation-tiny { from { transform: scale(0.4,0.4); } to { transform: scale(0.5,0.5); } }
#hotbar { z-index: 90; position: fixed; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; right: 5px; top: 30px; width: 522px; height: 64px; background-image: url('images/hotbar.png'); background-size: contain; }
.hotbar_item { width: 58px; height: 46px; }
.hotbar_item:hover { height: 66px; cursor: pointer; background-image: url('images/hotbar_selection.png'); background-size: 62px 66px; }
.hotbar_item:hover img { padding-top: 12px; }
.hotbar_item:hover > .hotbar_text { display: block !important; }
.hotbar_item img { display: block; margin: auto; width: 40px; height: 40px; padding-top: 2px; }
.hotbar_text { display: none; writing-mode: vertical-lr; text-orientation: upright; letter-spacing: -8px; width: 43px; height: auto; margin: 14px 0 0 6px; padding: 0 0 12px 6px; font-weight: bold; font-size: 1.8em; background: rgba(255, 255, 255, .9); }
.hotbar_item.active { z-index: 91; height: 66px; background-image: url('images/hotbar_selection.png'); background-size: 62px 66px; }
.hotbar_item.active img { padding-top: 12px; }

#bkg-overworld { z-index: 10; position: relative; top: 0; left: 0; width: 100%; height: 256px; background-color: #5baeff; }
#bkg-overworld_top { position: absolute; top: 0; width: 100%; height: 128px;  background: url('images/clouds.png') repeat-x; background-size: auto 100%; animation: scroll-bg 80s linear infinite; }
@keyframes scroll-bg { from { background-position-x: 0; } to { background-position-x: 1920px; } }

#bkg-overworld_overhang { z-index: 30; position: absolute; bottom: 0; width: 100%; height: 128px; background-image: url('images/grass_block_side_overlay.png'); background-repeat: repeat-x; }
#bkg-dirt { z-index: 20; position: absolute; bottom: -384px; width: 100%; height: 512px; background-image: url('images/dirt.png'); background-repeat: repeat; }

#bkg-bedrock { z-index: 40; position: relative; width: 100%; height: 256px; bottom: 0; left: 0; background-image: url('images/bedrock.png'); background-repeat: repeat; }

#page-content { z-index: 50; position: relative; width: calc(round(nearest, 65%, 32px) - 32px); height: 100%; min-height: 500px; padding: 16px 32px 0px 32px; margin: 32px 0 32px round(nearest, 15vw, 32px); background: rgba(255, 255, 255, .75); }
#ores { overflow: hidden !important; }
.ore { z-index: 10; position: absolute; width: 512px; height: 512px; }

#bkg-overlay { z-index: 30; position: fixed; width: 100%; height: 100%; top: 0; left: 0; }

#ad_left { z-index: 45; position: fixed; left: 0; top: 288px; max-width: 13%; max-height: 60%; }
#ad_bottom { z-index: 45; position: relative; top: 32px; max-width: 80%; height: 192px; margin: 0 auto; }

@media (max-width: 820px) {
  #hotbar { top: 5px !important; left: 5px !important; right: auto !important; }
  #logo { top: 60px !important; left: -20px !important; animation: title-animation-mobile 0.7s linear alternate infinite; }
  #page-content { width: calc(round(nearest, 80%, 32px) - 32px) !important; }
}

@media (max-width: 546px) {
  #hotbar { top: 0 !important; left: 0 !important; }
  #logo { top: 32px !important; left: -60px !important; animation: title-animation-tiny 0.7s linear alternate infinite; }
  #page-content { width: 95% !important; margin: 32px auto !important; padding: 5px !important; }
}