:root{scroll-behavior:smooth;--background-color:#5c5c5c;--background-color-secondary:#636363;--foreground-color:white}*{font-family:sans-serif;font-size:1rem}html,body{background-color:var(--background-color);flex-flow:column;height:100%;margin:0;display:flex}header,#shop{flex:0 auto}main{flex-direction:column;flex:auto;justify-content:center;align-items:center;display:flex}footer{flex:0 max(1rlh,10%)}.swal2-popup,.swal2-title{text-align:center;color:var(--foreground-color)!important}button{cursor:pointer;user-select:none;border:0;border-radius:5px;padding:5px 10px;&:hover{filter:brightness(85%)}&>i{pointer-events:none}}span{font-weight:700}ul{margin:0;padding:0;list-style:none}header{background-color:var(--background-color-secondary);border-bottom:1px solid #000;justify-content:space-between;gap:.5rem;margin:0 0 .5rem;padding:.25rem .5rem 0 0;display:flex;& *{font-size:small}& button{background-color:var(--background-color);padding:2.5px 5px;font-size:smaller}&>:first-child{margin-left:auto}&>div[id$=container]>[id$=list]{background-color:color-mix(in srgb,var(--background-color)80%,transparent);border-radius:5px;padding:0 .25rem;display:none;position:absolute;top:1.5rem;right:0;& button{background-color:var(--foreground-color)}}&>#options-container>#options-list{&>#saving>ul>li{&:not(:last-child){margin-bottom:.25rem}&>button#deleteSave{background-color:red}}}&>#stats-container>#stats-list>li>#count-span{float:right;text-align:right;padding-left:.25rem}}#the-button{background-color:#4343c4}#count-container{text-align:center;user-select:none;align-content:center;width:100%}#shop{background-color:var(--background-color-secondary);border:1px solid #000;border-radius:5px;justify-content:space-between;gap:1rem;display:flex;&:not(:has(#shop-items>ul>li>button.unlocked)){visibility:hidden}&>*{flex-direction:column;gap:.5rem;padding:.5rem;display:flex;&>h1{margin-top:0}&>ul>li{justify-content:space-between;align-items:center;margin:.5rem 0;display:flex}}}#shop-items{border-right:1px solid #000}#shop-items>ul>li>button{background-color:green;&:not(.unlocked){visibility:hidden}&:not(.affordable){cursor:not-allowed;filter:none;background-color:#004b00}&:hover .hover-info-container{display:block}&>.hover-info-container{z-index:1;background-color:#000000bf;border-radius:5px;padding:2px;display:none;position:absolute;transform:translate(220%,-100%);&>p{color:var(--foreground-color);margin:0;font-size:.75rem;&>span{text-align:right;font-size:inherit;float:right}}}}#level-overview{border-left:1px solid #000;&:not(:has(ul>li>span:not(:empty))){display:none}&>h1{text-align:right}&>ul>li{&:has(span:empty){display:none}&>span{text-align:right;min-width:2rem}}}footer{border-top:1px solid #000;max-height:20%;padding-bottom:.25rem;padding-left:.25rem;overflow-y:hidden;&>#message-box{scrollbar-color:black var(--background-color);scrollbar-width:thin;scrollbar-gutter:stable;scroll-snap-type:y mandatory;height:100%;overflow-y:auto;&:not(:has(p)){visibility:hidden}&>p{margin:0;&>time{font-weight:700}}}}