:root{--hover-bgr:hsla(210,100%,56%,1);--card-front-col:rgba(0,0,0,.6);--card-front-bgr:#fff;--card-back-col:#fff;--card-back-bgr:#ee741d;--card-ibox-hgt:14rem;--card-body-bdr:1px solid rgba(0,0,0,.05);--grid-area-gap:1rem;--grid-area-pad:1rem;--grid-area-bgr:none;--grid-area-bdr:0 solid rgba(0,0,0,.25);--grid-area-rad:0rem;--count-color:#fff01;--count-size:2.2rem;--count-pos-top:1.4rem;--count-pos-left:1rem;--count-width:1px;--time-flip:.8s}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;width:min(100%,80rem);margin-inline:auto;padding:2rem;display:flex;flex-direction:column;gap:1rem;font-family:sans-serif;background:#232327;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.5)}.settings{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}.settings .yearselect input{width:10ch;text-align:center}.yeartitle{display:flex;text-align:center;justify-content:center;align-items:center;gap:.5rem;font-size:2rem;font-weight:700}.yeartitle .button{cursor:pointer;font-size:1rem;transition:color .125s}.yeartitle .button:hover{color:#ed3408}.calendar{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:2rem;text-align:center}.calendar .month{display:flex;flex-direction:column;padding:.5rem;gap:.5rem;border-radius:.25rem;box-shadow:inset .1rem .1em .1rem rgba(255,255,255,0.25),inset -0.1rem -0.1em .1rem rgba(0,0,0,0.25),0.25rem .25rem .5rem #000;position:relative;overflow:hidden;background:var(--monthColor);background-image:linear-gradient(to bottom right,transparent 25%,rgba(0,0,0,0.5))}.calendar .month::after{content:var(--monthIcon);font-family:"Font Awesome 6 Pro";font-weight:900;position:absolute;bottom:-5%;right:-5%;font-size:10rem;line-height:1;color:rgba(255,255,255,0.15);text-shadow:none}.calendar .month>*{z-index:1}.calendar .month .title{text-transform:uppercase;font-size:1.5rem;font-weight:700;z-index:1}.calendar .month .days{display:grid;grid-template-columns:repeat(7,1fr);place-items:center;gap:.5rem;font-size:.8rem;padding-bottom:.25rem;border-bottom:4px double rgba(0,0,0,0.25)}.calendar .month .dates{display:grid;grid-template-columns:repeat(7,1fr);place-items:center;gap:0rem .25rem}.calendar .dates .date{width:100%;aspect-ratio:1/1;display:grid;place-content:center}.calendar .dates .date:first-child{grid-column:var(--dayColumn)}.calendar .dates .date.today{background:#ccc;color:#000;border-radius:50%}.box-counter::before{position:absolute;display:flex;top:var(--count-pos-top,1.2rem);left:var(--count-pos-left);justify-content:center;align-items:center;counter-increment:Element 1;content:counter(Element) '';font-size:var(--count-size);font:800 Arial;-webkit-text-fill-color:transparent;-webkit-text-stroke:var(--count-width,1px);-webkit-font-smoothing:antialiased;color:var(--count-color);opacity:1}
