@import"https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap";*{margin:0;padding:0;box-sizing:border-box;overflow-x:hidden}body{background-color:#0f1424;color:#bdc1ff}.card.work{background-color:#ff8c66}.card.play{background-color:#56c2e6}.card.study{background-color:#ff5c7c}.card.exercise{background-color:#4acf81}.card.social{background-color:#7536d3}.card.self-care{background-color:#f1c65b}.main-container{display:flex;justify-content:space-between;align-items:center;padding:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62%;height:100vh;gap:10px}.card{display:flex;flex-direction:column;width:220px;height:200px;border-radius:15px;color:#fff}.card .card-icon{height:40px;position:relative;overflow:hidden!important}.card .card-icon img{position:absolute;top:-12px;right:15px;height:75px;width:75px}.card .card-content{background-color:#1c1f4a;border-radius:15px;height:100%;padding:20px;display:flex;flex-direction:column;justify-content:space-around;gap:20px}.card .card-content .card-header{display:flex;justify-content:space-between;align-items:center;font-weight:500}.card .card-content .card-title{letter-spacing:1.5px;font-weight:500}.card .card-content .card-hours{font-size:48px;font-weight:300}.card .card-content .card-summary{margin-top:20px;font-size:13.85px;color:#bdc1ff}.schedule{width:750px;display:flex;height:475px;justify-content:space-around;align-items:center;overflow:hidden;flex-wrap:wrap}.nav-container{background-color:#1c1f4a;min-height:450px;width:250px;margin:0;border-radius:20px}.nav-container .profile-info{background-color:#5847eb;display:flex;justify-content:space-between;flex-direction:column;gap:30px;padding:25px;min-height:300px;border-radius:20px}.nav-container .profile-info .profile-img{width:80px;border-radius:50%;border-radius:3px solid white}.nav-container .profile-info .profile-img img{width:100%;height:100%;border-radius:50%;border:3px solid white}.nav-container .profile-info .nav-content .profile-report{color:#bdc1ff}.nav-container .profile-info .nav-content .profile-name{font-size:56px;font-weight:300;color:#bdc1ff}.nav-container .timeperiod-btns{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;min-height:140px;margin-top:10px;border-radius:20px;padding:10px 5px}.nav-container .timeperiod-btns button{width:100%;font-weight:300;font-size:16px;padding:8px 20px;background-color:#1c1f4a;text-align:left;border:none;color:#6f76c8;letter-spacing:1px;transition:all .3s ease-in-out}.nav-container .timeperiod-btns button.active{color:#fff;background-color:pink}.nav-container .timeperiod-btns button:hover{color:#fff}@media screen and (max-width: 758px){.main-container{position:relative;align-items:stretch;display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;transform:none;padding:20px;margin-left:-200px}.nav-container{width:100%;min-height:100px;overflow:hidden;border-radius:10px;padding:0;justify-content:space-around}.nav-container .profile-info{background-color:#5847eb;display:flex;justify-content:space-around;align-items:center;flex-direction:row;gap:10px;padding:40px 20px;min-height:70px!important;border-radius:10px}.nav-container .profile-info .profile-img{width:80px;border-radius:50%;border-radius:3px solid white;height:80px}.nav-container .profile-info .profile-img img{width:100%;height:100%;border-radius:50%;border:3px solid white}.nav-container .profile-info .nav-content .profile-report{color:#bdc1ff}.nav-container .profile-info .nav-content .profile-name{font-size:28px;font-weight:300;color:#bdc1ff}.nav-container .timeperiod-btns{display:flex;flex-direction:row;justify-content:space-around;align-items:center;min-height:30px;margin-top:0;border-radius:10px;padding:10px 5px;width:100%}.nav-container .timeperiod-btns button{padding:12px 20px;font-size:18px;font-weight:500}.schedule{width:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;height:100%;margin-top:30px;gap:25px}.card{width:100%}}