@import"https://fonts.googleapis.com/css?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;perspective:100rem;overflow:hidden}@media (max-width: 500px){html{font-size:55%}}.calender-app{width:60%;min-width:90vmin;aspect-ratio:3 / 2;background:#1e242d;padding:3rem;border-radius:3rem;border:1rem solid #0f1319;display:flex;column-gap:5rem;position:relative;transform-style:preserve-3d}.calender-app:after{content:"";position:absolute;bottom:-12rem;left:50%;transform:translate(-50%) rotateX(50deg);width:90%;height:16rem;background:#00000080;border-radius:20rem;filter:blur(4rem)}.calender{width:40%}.heading{font-family:Bebas Neue,sans-serif;font-size:clamp(2rem,4vw,4.5rem);color:#fff;letter-spacing:.3rem;margin-bottom:1.5rem;padding:1.3rem}.nevigate-date{display:flex;align-items:center;column-gap:1rem;margin:3.5rem 0}.nevigate-date h2{color:#bbb;font-size:clamp(1.5rem,1.5cqi,2.5rem);padding: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:#e5650f;cursor:pointer}.weekdays{width:100%;display:flex;margin:3rem 0}.weekdays span{width:calc(100% / 7);font-size:clamp(1rem,.8cqi,1.3rem);font-weight:700;text-transform:uppercase;color:#78879e;letter-spacing:.1rem;display:flex;justify-content:center}.days{display:flex;flex-wrap:wrap}.days span{width:calc(100% / 7);height:4rem;aspect-ratio:1;display:flex;justify-content:center;align-items:center;margin-bottom:1rem;font-size:clamp(1rem,1cqi,1.6rem);color:#ddd;cursor:pointer;transition:all .3s ease;text-shadow: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}.event-popup{position:absolute;top:38%;left:3rem;background-color:#161b22;width:clamp(25rem,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(4rem,4cqi,7rem);background-color:#00a3ff;font-family:Bebas Neue,sans-serif;font-size:clamp(1.5rem,1.5cqi,2.2rem);display:flex;justify-content:center;box-shadow:0 0 1.5rem 1rem #00a3ff33;color:#fff;letter-spacing:.1rem;align-items:center}.time-input input[type=number]::-webkit-inner-spin-button,.time-input input[type=number]::-webkit-outer-spin-button{appearance:none}.time-input input{background-color:transparent;border:none;border-top:.2rem solid #00a3ff;border-bottom:.2rem solid #00a3ff;color:#fff;width:clamp(4rem,4cqi,7rem);height:4rem;text-align:center;font-size:clamp(1.5rem,1.5cqi,1.6rem)}.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);border-radius:5px;padding-right:1rem}.event-popup textarea{width:clamp(15rem,15cqi,25rem);aspect-ratio:5 / 2;resize:none;background-color:#0f1319;border:none;padding:1rem;border-radius:.5rem;color:#78879e;transition:border .3s ease}.event-popup textarea:focus{outline:none;border:.1rem solid #00a3ff}.event-popup textarea::placeholder{font-size:clamp(1rem,.8cqi,1.3rem);color:#78879e}.event-popup textarea:focus::placeholder{color:transparent}.event-popup-btn{width:clamp(15rem,15cqi,25rem);height:4rem;background-color:#ef9011;font-family:Bebas Neue,sans-serif;font-size:clamp(1.5rem,1.5cqi,2.2rem);letter-spacing:.1rem;color:#fff;border:none;box-shadow:0 0 1.5rem 1rem #ef901133;cursor:pointer}.event-popup-btn:active{transform:scale(.98);transform:translateY(.1rem)}.close-event-popup{position:absolute;top:1rem;right:1rem;border:none;background-color:transparent;cursor:pointer}.close-event-popup i{font-size:2.7rem;color:#fff}.event-date{font-size:clamp(1.3rem,1cqi,1rem);color:#fff;padding-left:2.5rem;padding-top:1.5rem;font-family:Bebas Neue,sans-serif}.event-text{font-size:clamp(1.2rem,1cqi,1.4rem);line-height:2rem;color:#fff;width:75%;padding:0 3rem 0 1rem;overflow: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}.event-date-wrapper{display:flex;flex-direction:column;align-items:center;width:25%;border-right:.1rem solid rgba(255,255,255,.4);padding-right:1rem}.event-date{font-size:clamp(1rem,1cqi,1.3rem)}.event-time{font-size:clamp(1.3rem,1cqi,1.6rem);line-height:4rem;font-weight:700;color:#fff}@media (max-width: 850px){.calender-app{aspect-ratio:3 / 2;flex-direction:column;row-gap:2rem}.calender{width:70%;margin:auto}.nevigate-date,.weekdays{margin:1rem 0}.events{width:80%;margin:auto}.event-popup{top:18%;left:50%;transform:translate(-50%);width:60%;aspect-ratio:4 / 3;row-gap:1rem}.event-popup-time,.time-input input{width:clamp(5rem,10cqi,8rem);font-size:clamp(1.5rem,3cqi,2.2rem)}.event-popup textarea{width:clamp(18rem,35cqi,28rem)}.event-popup textarea::placeholder{font-size:clamp(1rem,1.5cqi,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.4cqi,1.4rem)}}@media (max-width: 500px){.calender-app{aspect-ratio:10/9}.calender{width:100%}.event-popup{top:23%;width:80%}.events{width:100%}}@media (max-width: 350px){.calender-app{aspect-ratio:3/2}}