*{box-sizing:border-box}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:400;margin:0}body{display:grid;place-items:center;margin:0;min-height:100dvh;padding-block:5px;background-color:#83abca;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.calendar{max-width:400px;background-color:#fff;box-shadow:0 6px 10px #0003}.calendar__header{color:#969aa3}.calendar__header,.calendar__footer{display:flex;justify-content:space-between;align-items:center;column-gap:10px;padding:20px}.calendar__body{border-top:1px solid #dedede;border-bottom:1px solid #dedede;padding-block:20px}.calendar__grid{padding-inline:20px;display:grid;grid-template-columns:repeat(7,1fr);grid-gap:20px}.calendar__week-day{font-weight:700;text-transform:uppercase;color:#7f8993}.calendar__btn{display:grid;place-content:center;width:34px;aspect-ratio:1;border-radius:50%;border:2px solid transparent;background-color:transparent;color:#000;transition-property:border-color,background-color,color;transition-duration:.25s;transition-timing-function:ease}@media (hover: hover){.calendar__btn{cursor:pointer}.calendar__btn:hover{border-color:#d07450}}.calendar__date--current{background-color:#d07450;border-color:#d07450;color:#fff;pointer-events:none}.calendar__date--past{pointer-events:none;color:#e2dfde}.calendar__date--active{position:relative;border-color:#d07450}.calendar__date--active:before{content:attr(data-before);position:absolute;top:-50%;right:-50%;display:grid;place-content:center;width:16px;aspect-ratio:1;border-radius:50%;color:#fff;background-color:calc(var(--background-color));font-size:10px;translate:-50% 50%}.calendar__date--active.even{border-color:#d07450}.calendar__date--active.even:before{background-color:#d07450}.calendar__date--active.odd{border-color:#a35d87}.calendar__date--active.odd:before{background-color:#a35d87}.calendar__footer-btn{border-color:#d07450}@media (hover: hover){.calendar__footer-btn:hover{color:#fff;background-color:#d07450}}