@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";.tabs{background-color:var(--timeBg);border-radius:20px;inline-size:220px;line-height:40px;z-index:2;transform:translateY(-35%);padding:30px;transition:.2s;line-height:50px}@media (width<850px){.tabs{inline-size:320px}}.BG{background:var(--backgroundColor);max-inline-size:100%;block-size:50px;border-top-left-radius:20px;border-top-right-radius:20px;height:40%;z-index:-1}.BG img{max-inline-size:80px;transform:translate(120px)}.tabs .title{display:flex;justify-content:space-between;align-items:center}@media (width<850px){.tabs div{display:flex;justify-content:space-between;align-items:center}}.tabs h2{font-size:1.6rem;letter-spacing:3px}.tabs:hover{background-color:#5e639c;cursor:pointer}.prev{color:var(--avatarBg)}*{margin:0;padding:0;box-sizing:border-box}:root{--fontFamily:"Rubik";--fontSize:1.4rem;--fontColor:hsl(0, 0%, 100%);--mainBg:hsl(226, 43%, 10%);--avatarBg:hsl(236, 100%, 87%);--avatarBg2:hsl(246, 80%, 60%);--timeBg:hsl(235, 46%, 20%);--workBg:hsl(15, 100%, 70%);--exerciseBg:hsl(145, 58%, 55%);--playBg:hsl(195, 74%, 62%);--studyBg:hsl(348, 100%, 68%);--selfCareBg:hsl(43, 84%, 65%);--socialworkBg:hsl(264, 64%, 52%)}body{background-color:var(--mainBg);font-family:var(--fontFamily);color:var(--fontColor);padding-top:15%}img{display:block;max-inline-size:100%}.page{display:flex;align-items:start;gap:40px;justify-content:center}@media (width<850px){.page{flex-wrap:wrap;gap:20px}}.wrapper{max-inline-size:100%;display:grid;gap:10px}@media (width>850px){.wrapper{grid-template-columns:repeat(3,1fr)}}.nav{max-inline-size:100%;border-radius:20px;background-color:var(--timeBg)}.avatar{max-inline-size:100%;background-color:var(--avatarBg2);padding:40px;border-radius:20px}@media (width<850px){.avatar{display:flex;gap:20px}}.time{max-inline-size:100%;padding:30px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;line-height:40px}@media (width<850px){.time{display:flex;padding:20px;justify-content:space-between}}button{position:relative;margin-block:35px;border:none;display:block;background-color:var(--timeBg);font-family:var(--fontFamily);color:var(--fontColor);font-size:1.2rem}button:hover,button:focus{color:var(--avatarBg);cursor:pointer}.avatar img{max-inline-size:80px;border:4px solid var(--fontColor);border-radius:100%;margin-bottom:30px}.avatar h3{color:var(--avatarBg)}.name{font-size:2.5rem;line-height:40px;color:var(--fontColor)}