:root{--new_notification_bg_color: hsl(210, 60%, 98%);--new_notification_id_bg_color: hsl(1, 90%, 64%);--user_name_font_color: hsl(224, 21%, 14%);--important_message_font_color: hsl(219, 12%, 42%);--user_name_important_message_font_color_hover: hsl(219, 85%, 26%);--group_font_color: hsl(219, 85%, 26%);--date_font_color: hsl(219, 14%, 63%);--global_span_font_color: hsl(219, 14%, 63%);--private_message_font_color: hsl(219, 12%, 42%);--private_message_border_color: hsl(211, 68%, 94%)}.notification{display:grid;grid-template-columns:10% 90%;padding:1rem;transition:.4s ease all}.new_notification{border-radius:8px;background-color:var(--new_notification_bg_color)}.new_notification_identifier{height:.4rem;width:.4rem;background-color:var(--new_notification_id_bg_color);border-radius:50%}.commented{grid-template-columns:10% 80% 10%}.outdated .content .message{display:inline;word-break:break-word}.user_name{color:var(--user_name_font_color);cursor:pointer}.user_name:hover,.important_message:hover{color:var(--user_name_important_message_font_color_hover)}.content{display:flex;justify-content:center;flex-direction:column}.message{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.4rem}.important_message{cursor:pointer;color:var(--important_message_font_color)}.group{color:var(--group_font_color);cursor:pointer}span{color:var(--global_span_font_color)}.date{font-size:.8rem;color:var(--date_font_color)}.private_message .content{display:flex;flex-direction:column;gap:1rem}.private_message .content .message{padding:1rem;border:1px solid var(--private_message_border_color);color:var(--private_message_font_color);border-radius:10px;line-break:strict;white-space:pre}:root{--body_bg_color: hsl(210, 60%, 98%);--main_bg_color: hsl(0, 0%, 100%);--button_font_color: hsl(219, 12%, 42%);--button_font_color_hover: hsl(219, 85%, 26%);--notifications_quant_font_color: hsl(219, 85%, 26%)}*{margin:0;padding:0;box-sizing:border-box;font-family:Plus Jakarta Sans,sans-serif}body{min-height:100vh;background-color:var(--body_bg_color);display:flex;align-items:center;justify-content:center}main{width:85%;height:52rem;padding:1.5rem;border-radius:15px;background-color:var(--main_bg_color)}header{display:flex;justify-content:space-between}header h2{display:flex;align-items:center;gap:.8rem}header h2 span{background-color:var(--notifications_quant_font_color);color:#fff;font-size:1rem;height:80%;padding:0 .75rem;border-radius:5px;display:flex;align-items:center;justify-content:center}header button{background:transparent;border:none;font-size:1rem;color:var(--button_font_color);cursor:pointer}header button:hover{color:var(--button_font_color_hover)}.notifications_section{height:calc(100% - 3rem);margin-top:1.5rem;display:flex;justify-content:space-between;flex-direction:column}