@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&display=swap";
:root{--primary-color:#222834;--secondary-color:#373f51;--secondary-rgb:55,63,81;--tertiary-color:#e5e7eb;--quaternary-color:#f9fafb;--text-color-footer:#b6b6b6;--foreground:#171717;--background:#f5f5f5;--second-background:#f8fafb;--font-family:"Open Sans",sans-serif}*{box-sizing:border-box;scrollbar-color:var(--tertiary-color)transparent;margin:0;padding:0}.body{flex-direction:column;justify-content:flex-start;align-items:center;gap:30px;min-height:100vh;padding:100px 50px;display:flex;overflow:hidden}*{font-family:var(--font-family)}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none}
.header-container{z-index:1000;background-color:#fff;border-radius:0 0 20px 20px;justify-content:start;align-items:center;gap:50px;width:100vw;height:60px;padding:10px 50px;transition:all .3s;display:flex;position:fixed;top:0;right:0}.header-container.scrolled{box-shadow:0 2px 4px #0000001a}.header-logo-container{align-items:center;gap:10px;display:flex}.header-logo-image{width:fit-content;height:40px}.header-nav-links{color:var(--foreground);font-size:14px;font-weight:600;transition:all .2s}.header-nav-links:hover{color:var(--primary-color);translate:3px}.header-buttons{align-items:center;gap:35px;margin-left:auto;display:flex}.header-points{background-color:var(--quaternary-color);border-radius:10px;justify-content:space-around;align-items:center;gap:10px;min-width:100px;padding:5px 10px;font-size:18px;display:flex}.header-points-text{color:var(--secondary-color);font-weight:700}.header-points-icon{width:20px;height:20px;color:var(--secondary-color);position:relative}.header-user-icon{width:25px;height:25px}.login-text{color:var(--foreground);cursor:pointer;font-size:16px}.signup-text{background-color:var(--primary-color);color:#fff;cursor:pointer;border-radius:30px;padding:5px 12px;font-size:16px;font-weight:500;transition:all .3s}.signup-text:hover{background-color:var(--secondary-color)}.user-menu-items{opacity:1;background-color:#fff;border-radius:10px;flex-direction:column;gap:10px;width:200px;height:150px;padding:10px;transition:all .3s ease-in-out,padding .3s ease-in-out;display:flex;position:absolute;top:65px;right:10px;box-shadow:0 4px 8px #0000001a}.user-menu-items:after{content:"";background-color:#0000;width:100%;height:20px;position:absolute;top:-10px}.user-menu-items.hidden{opacity:0;height:0;padding:0;overflow:hidden}.user-menu-item{cursor:pointer;border-radius:8px;align-items:center;gap:10px;padding:8px;transition:all .2s;display:flex}.user-menu-item:hover{translate:5px}.user-menu-item-icon{width:20px;height:20px;color:var(--primary-color)}.user-menu-item-text{font-size:14px}.header-buttons{animation:.35s formFade}@keyframes formFade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.header-notification-wrapper{width:25px;height:25px;position:relative}.header-notification-wrapper.number:after{content:attr(data-count);color:#fff;background-color:red;border-radius:50%;justify-content:center;align-items:center;width:15px;height:15px;font-size:8px;font-weight:700;display:flex;position:absolute;top:-5px;right:-5px}.header-notification-icon{width:25px;height:25px}.notifications-list{opacity:1;background-color:#fff;border-radius:5px;flex-direction:column;gap:30px;width:400px;max-width:60%;height:300px;padding:10px;transition:all .3s ease-in-out,padding .3s ease-in-out;display:flex;position:absolute;top:65px;right:10px;box-shadow:0 4px 8px #0000001a}.notifications-list:after{content:"";background-color:#0000;width:100%;height:20px;position:absolute;top:-10px}.notifications-list.hidden{opacity:0;height:0;padding:0;overflow:hidden}.notifications-list-title{margin-bottom:10px;font-size:12px;font-weight:700}.notifications-list-empty{color:gray;text-align:center;margin-top:20px;font-size:12px}.notification-item{border-bottom:1px solid #f0f0f0;align-items:center;gap:20px;padding:8px;transition:all .2s;display:flex}.notification-item.unread{border-left:4px solid var(--primary-color);cursor:pointer;background-color:#f9f9f9}.notification-item.unread:hover{border-left:5px solid var(--primary-color);background-color:#e6e6e6;padding-left:10px}.notification-item-content{flex-direction:column;align-items:center;gap:10px;width:85%;display:flex}.notification-item-icon{width:30px;height:30px;color:var(--primary-color)}.notification-item-text{font-size:13px}.notification-item-timestamp{color:gray;align-self:flex-end;font-size:10px}@media (max-width:680px){.header-container{gap:20px;padding:10px 20px}.header-nav-links{font-size:12px}.header-points{min-width:80px;font-size:15px}.header-points-icon{width:15px;height:15px}.header-user-icon{width:20px;height:20px}.header-buttons{gap:15px}}@media (max-width:455px){.header-nav-links{display:none}}