:root{--dot-size: 1.9rem}@media screen and (max-width: 425px){:root{--dot-size: .66rem}}html,body{padding:0;margin:0;background-color:#090909}.calenderApp{padding-top:.5em;background-color:#090909}.container{padding:calc(var(--dot-size) / 2) 2rem;display:grid;grid-template-columns:repeat(auto-fit,var(--dot-size));align-items:center;gap:calc(var(--dot-size) / 2)}.dot{width:var(--dot-size);height:var(--dot-size);background-color:#252525;box-sizing:border-box;border-radius:50%;cursor:pointer;position:relative}.dot:hover:after{content:attr(data-date);color:#fff;display:block;position:absolute;background-color:#252525;font-family:monospace;width:max-content;z-index:2;padding:.5rem;border-radius:.5rem;top:0;left:0}.dot:hover,.dot.past{background-color:#525252}.dot.active{background-color:salmon}@keyframes pulse{to{border-radius:0}}.info{color:#969ca1;font-family:monospace;display:flex;justify-content:space-between;padding:var(--dot-size);font-size:calc(var(--dot-size))}.label{color:#969ca1;font-family:monospace;font-size:clamp(.8rem,calc(var(--dot-size) / 2),1rem);padding:0 1rem}.event-wrapper{font-family:Arial,sans-serif;margin:0;padding:0;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;width:100vw;background-color:#f7f7f7}.app{display:flex;gap:20px}.calendar-container{width:350px;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 5px #0000001a;overflow:hidden;padding:1em}.calendar-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background:#007bff;color:#fff;font-size:18px;border-radius:8px 8px 0 0}.calendar-days,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-days div,.calendar-grid div{padding:10px;text-align:center}.calendar-days{background:#f0f0f0;font-weight:700}.calendar-grid{border:1px solid #ddd}.day{border:1px solid #ddd;height:50px;cursor:pointer}.day:hover{background:#e6f7ff}.selected{background:#007bff;color:#fff}.day.faded{color:#aaa;background-color:#f9f9f9;cursor:not-allowed}.event-container{width:350px}.event-list{margin:10px 0;padding:10px;background:#f9f9f9;border:1px solid #ddd;height:150px;overflow-y:auto}.add-event{display:flex;gap:10px}.add-event input{flex:1;padding:5px;border:1px solid #ddd;border-radius:4px}.add-event button{background:#007bff;color:#fff;border:none;padding:5px 10px;cursor:pointer;border-radius:4px}.calendar-header select{margin:0 5px;padding:5px;font-size:16px}