.main{display:flex}.container{width:fit-content;height:39em;font-size:13px;background-color:#fff;--main-color:#f4a460;background-image:linear-gradient(to bottom,var(--main-color) 50%,white 50%);border-radius:1em;box-shadow:0 2px 1px rgba(0,0,0,.2),0 3px 1px white;position:relative;font-family:'Arial Rounded MT';margin-right:20px}.container::before,.container::after{content:'';position:absolute;width:.6em;height:2.3em;background-color:#fff;top:calc(50% - 2.3em/2);border-radius:.3em;box-shadow:0 3px 1px rgba(0,0,0,.3),0 -1px 1px rgba(0,0,0,.2)}.container::before{left:2em}.container::after{right:2em}.today{height:50%;padding-top:.9em;box-sizing:border-box;color:#fff;display:flex;flex-direction:column}.today .lunar{text-align:center}.today .year{text-align:left}.today .year-text{font-size:2em}.today .month-day{text-align:left}.today .month{font-size:6em;text-align:center}.today .day{font-size:6em;text-align:right}.today .time{font-size:3em;text-align:right}.calendar{padding-top:3.5em;display:flex;flex-direction:column;align-items:center}.calendar .days,.calendar .dates{width:28em}.calendar .days,.calendar .dates{display:grid;grid-template-columns:repeat(7,1fr);line-height:2em;text-align:center}.calendar .days{color:var(--main-color);font-weight:bold;text-transform:uppercase}.calendar .dates{color:#696969}.calendar .dates .previous-month,.calendar .dates .next-month{color:#d3d3d3}.calendar .dates .current-day{color:var(--main-color);font-weight:bold}.calendar .dates span:hover{background-color:#d3d3d3;color:#fff}.calendar .dates span{transition:.3s}