.RecentText { display: flex; align-items: center; } .RecentText p { font-size: 28px; margin: 0; color: var(--soft-purple); font-family: "Lexend Deca", serif; } .RecentText span { margin-top: 6px; } .Recent { display: flex; overflow-x: auto; } .RecentContainer:hover .RecentEntries { opacity: 0.4; } .RecentContainer:hover:hover .RecentEntries:hover { opacity: 1; transform: scale(1.02); } .Recent::-webkit-scrollbar { height: 5px; width: 0px; } .Recent::-webkit-scrollbar-thumb { background-color: #444444; border-radius: 5px; } .RecentEntries { margin: 4px; background-color: #1f1f1fbb; padding: 0.5rem; border-radius: 0.5rem; transition: opacity 400ms ease, transform 400ms ease; } .RecentEntries p { text-align: center; margin: 5px auto; width: auto; max-width: 180px; font-family: "Lexend Deca", serif; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: font-size 400ms ease; } .RecentEntries p::-webkit-scrollbar { width: 2px; } .Recent p::-webkit-scrollbar-thumb { background-color: #444444; border-radius: 5px; } .RecentImage { border-radius: 0.5rem; }