.container1{width:230px;background-color:#323030;padding:10px;box-shadow:0 2px 5px #0000001a}.logo{display:flex;align-items:center;margin-bottom:20px;margin-left:.8vw;padding-top:2vh}.logo img{margin-right:10px}.list,.list1,.list2{margin-top:15px}.list>div,.list1>div,.list2>div{display:flex;align-items:center;padding:10px;border-radius:8px;cursor:pointer;width:100%;transition:background-color .3s ease}.list>div:hover,.list1>div:hover,.list2>div:hover{background-color:#aaa4a4}.list>div.active,.list1>div.active,.list2>div.active{background-color:#d32f2f;color:#fff}.list>div.active img,.list1>div.active img,.list2>div.active img{filter:brightness(0) invert(1)}.list img,.list1 img,.list2 img{width:24px;height:24px;margin-right:10px}.list p,.list1 p,.list2 p{margin:0;font-size:14px;color:#fff}.list>div.active p,.list1>div.active p,.list2>div.active p{color:#fff}.hr{border:none;height:1px;background-color:#ddd;margin:10px 0}.sub{font-size:14px;font-weight:700;margin:15px 0;color:#666}@media (max-width: 768px){.container1{width:180px}.list>div,.list1>div,.list2>div{width:100%}.list img,.list1 img,.list2 img{width:20px;height:20px}.list p,.list1 p,.list2 p{font-size:12px}}@media (max-width: 480px){.container1{width:100%}.list>div,.list1>div,.list2>div{width:100%;flex-direction:column;align-items:center}.list img,.list1 img,.list2 img{width:18px;height:18px}.list p,.list1 p,.list2 p{font-size:10px}}.rightside{background-color:#181818;color:#fff;margin-left:16vw;margin-top:-117.2vh;height:117.6vh;width:1290px;overflow-y:scroll}.rightfirst{display:flex;align-items:center;margin-top:10px}.rightfirst .search{display:flex;align-items:center;border:2px solid rgb(98,101,98);margin-left:200px}.input{width:20vw;padding:5px;border-radius:3px;border:1px solid white;background-color:#1e1a1a;color:#f3eeee}.searchButton{background-color:#fff;margin-left:0;padding:5px;border:1px solid white;border-radius:3px}.mic{margin-left:5px;margin-top:12px}.rightbar{margin-left:350px;padding-right:40px;margin-top:10px}.rightbar .create{margin-left:8px;padding-right:20px;width:30px}.photo{background-color:#2f2f2f;height:4vh;width:2vw;margin-left:11.5vw;margin-top:-4.7vh;border-radius:30px}.hr5{margin-top:-1vh}.li{display:grid;grid-template-columns:3vw 8.3vw 3.5vw 8.5vw 5.7vw 8.2vw 5.7vw 8.3vw 5.7vw 7vw 10vw;margin-top:-1vh;margin-left:1.5vw;column-gap:8px}.libar2{background-color:#2f2f2f;width:vw;height:3.3vh;margin-top:8px;text-align:center;padding-top:3.5px;border-radius:25px}.main{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;padding:20px;max-height:calc(100vh - 170px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ccc #f9f9f9}.card{display:flex;flex-direction:column;background-color:#323030;box-shadow:0 4px 6px #dfdcdc1a;border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .3s,box-shadow .3s}.card:hover{transform:scale(1.05);box-shadow:0 6px 10px #00000026}.firstcard{width:100%;height:140px;object-fit:cover}.cardflex{padding:10px;display:flex;flex-direction:column;gap:5px}.cardtitle{font-size:16px;font-weight:700;color:#ebe2e2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cardtxt{font-size:14px;color:#ebe2e2;margin-top:5px}@media (max-width: 768px){.rightside{width:100%;margin-left:0;margin-top:0;height:100vh}.rightfirst .search{margin-left:10px}.input{width:15vw}.rightbar{margin-left:10px}.photo{margin-left:5vw;margin-top:-5vh}.li{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));margin-left:0}.libar2{width:100%}.main{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.firstcard{height:120px}.cardtitle{font-size:14px}.cardtxt{font-size:12px}}@media (max-width: 480px){.rightfirst .search{margin-left:5px}.input{width:30vw}.rightbar{margin-left:5px}.photo{margin-left:10vw;margin-top:-5vh}.li{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));margin-left:0}.libar2{width:100%}.main{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.firstcard{height:100px}.cardtitle{font-size:12px}.cardtxt{font-size:10px}}