@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Comfortaa:wght@300..700&display=swap";*{margin:0;padding:0;box-sizing:border-box;outline:none;font-family:Comfortaa,sans-serif}html{font-size:62.5%}.container{width:100%;height:100vh;background-color:#2c3542;display:grid;place-items:center;overflow:hidden;perspective:100rem}@media (max-width: 500px){html{font-size:55%}}.calendar-app{width:60%;min-width:100vmin;aspect-ratio:3/2;background-color:#1e242d;padding:3rem;border-radius:3rem;border:1rem solid #0f1319;display:flex;column-gap:5rem;position:relative;transform-style:preserve-3d}.calendar-app:after{content:"";position:absolute;bottom:-12rem;left:50%;transform:translate(-50%) rotateX(50deg);width:90%;height:16rem;background-color:#00000080;border-radius:20rem;filter:blur(4rem)}.calendar{width:40%}.heading{font-family:Bebas Neue,sans-serif;font-size:clamp(4rem,3.8cqi,7rem);color:#fff;letter-spacing:.3rem}.navigate-date{display:flex;align-items:center;column-gap:1rem;margin:3.5rem 0}.navigate-date h2{font-size:clamp(1.5rem,1.5cqi,2.5rem);color:#bbb;padding-left:1.3rem}.buttons{display:flex;column-gap:1rem;margin-left:auto}.buttons i{width:3.5rem;height:3.5rem;background-color:#2c3542;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:2rem;color:#c97f1a;cursor:pointer}.weekdays{width:100%;display:flex;margin:3rem 0}.weekdays span{width:calc(100% / 7);font-size:clamp(1rem,.1cqi,1.3rem);font-weight:700;text-transform:uppercase;color:#78879e;letter-spacing:.1rem;display:flex;justify-content:center;align-items:center}.days{display:flex;flex-wrap:wrap}.days span{font-size:clamp(1.2rem,1cqi,1.6rem);width:calc(100% / 7);aspect-ratio:1;display:flex;justify-content:center;align-items:center;color:#ddd;cursor:pointer;text-shadow:0 0 .5rem 1rem rgba(0,0,0,.2)}.current-day{background-color:#ef9011;border-radius:50%;box-shadow:0 0 1.5rem 1rem #ef90114d}.events{width:60%;height:100%;padding:3rem 0;overflow-y:auto}.events::-webkit-scrollbar{display:none}.event-popup{position:absolute;top:38%;left:3rem;background-color:#161b22;width:clamp(32rem,21cqi,40rem);aspect-ratio:10/9;border-radius:1rem;box-shadow:0 1rem 3rem #0000004d;display:flex;flex-direction:column;justify-content:center;align-items:center;row-gap:2rem}.time-input{display:flex;column-gap:1rem}.event-popup-time{width:clamp(6rem,4cqi,7rem);background-color:#00a3ff;color:#fff;font-family:Bebas none,sans-serif;font-size:clamp(1.5rem,1.5cqi,2.2rem);display:flex;justify-content:center;align-items:center;box-shadow:0 0 1.5rem 1rem #00a3ff33;letter-spacing:.1rem}.time-input input{background-color:transparent;border:none;border-top:.2rem solid #00a3ff;border-bottom:.2rem solid #00a3ff;color:#fff;width:clamp(6rem,4cqi,7rem);height:4rem;text-align:center;font-size:clamp(1.2rem,1.2cqi,1.6rem)}.time-input input[type=number]::-webkit-outer-spin-button,.time-input input[type=number]::-webkit-inner-spin-button{appearance:none}.event-popup textarea{width:clamp(20rem,15cqi,25rem);aspect-ratio:5 / 2;resize:none;background-color:#0f1319;border:none;padding:1rem;border-radius:.5rem;color:#78879e;font-family:Bebas none,sans-serif}.event-popup textarea:focus{border:.1rem solid #00a3ff}.event-popup textarea::placeholder{font-size:clamp(1rem,.8cqi,1.2rem);color:#78879e}.event-popup textarea:focus::placeholder{color:transparent}.event-popup-btn{width:clamp(15rem,15cqi,25rem);height:4rem;background-color:#ef9011;color:#fff;font-family:Bebas none,sans-serif;font-size:clamp(1.5rem,1.5cqi,2.2rem);letter-spacing:.1rem;border:none;box-shadow:0 0 1.5rem 1rem #ef901133;cursor:pointer}.event-popup-btn:active{transform:translateY(.1rem)}.close-event-popup{position:absolute;top:1rem;right:1rem;background-color:transparent;border:none;cursor:pointer}.close-event-popup i{font-size:2.5rem;color:#fff}.event{width:100%;height:7rem;background-color:#00a3ff;padding:1.5rem 0;border-radius:1rem;display:flex;align-items:center;margin-bottom:2rem;position:relative}.event-date-wrapper{display:flex;flex-direction:column;align-items:center;width:25%;border-right:.1rem solid rgba(255,255,255,.5)}.event-date{font-size:clamp(1rem,1cqi,1.2rem);color:#ddd}.event-time{font-size:clamp(1.3rem,1cqi,1.6rem);line-height:4rem;font-weight:700;color:#fff}.event-text{font-size:clamp(1.2rem,1cqi,1.4rem);line-height:2rem;color:#fff;width:75%;padding:0 3rem 0 1rem;overflow-wrap:break-word}.event-buttons{position:absolute;top:50%;transform:translateY(-50%);right:1rem;display:flex;flex-direction:column;row-gap:1rem}.event-buttons i{font-size:1.6rem;color:#fff;cursor:pointer}@media (max-width: 850px){.calendar-app{width:80%;flex-direction:column;row-gap:2rem;aspect-ratio:3/2;min-width:initial}.calendar{width:80%;margin:auto}.navigate-date,.weekdays{margin:1rem 0}.events{width:80%;margin:auto}.event-popup{top:22%;left:50%;transform:translate(-50%);width:60%;aspect-ratio:4/3;row-gap:1rem}.event-popup-time{width:clamp(5rem,10cqi,8rem);font-size:clamp(1.5rem,3cqi,2.2rem)}.time-input input{width:clamp(5rem,10cqi,8rem);font-size:clamp(1.2rem,2cqi,1.6rem)}.event-popup textarea{width:clamp(18rem,35cqi,28rem)}.event-popup textarea::placeholder{font-size:clamp(1rem,1.5cqi,1.2rem)}.event-popup-btn{width:clamp(18rem,35cqi,28rem);font-size:clamp(1.5rem,3cqi,2.2rem)}.event-date{font-size:clamp(1rem,1.4cqi,1.2rem)}.event-time{font-size:clamp(1rem,2cqi,1.6rem)}.event-text{font-size:clamp(1rem,2.5cqi,1.4rem)}}@media (max-width: 600px){.calendar-app{aspect-ratio:10/9}.calendar{width:100%}.event-popup{top:23%;width:80%}.event{width:100%}}@media (max-width: 375px){.calendar-app{aspect-ratio:3/2}}