.blog_style { display: flex; width: 100%; height: 100%; background: var(--bg-color); padding: 50px 0px; justify-content: center; container-name: site; container-type: inline-size; .page_content { display: flex; width: 67%; container-name: page; container-type: inline-size; } } .blog_nav_style { width: 15%; padding: 0px 20px; order: 5; h3 { margin-bottom: 10px; } ul { list-style: none; li { } } @container site (max-width: 1230px) { display: none; } .social { /* Hide .social until the font is loaded */ display: flex; align-items: center; gap: 15px; margin: 25px 0; font-family: cm_social; a { color: var(--text-color); font-size: 22px; text-decoration: none; background: transparent; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: flex-end; justify-content: center; transition: 0.4s ease; border: 4px solid var(--text-color); &:hover { color: var(--accent-color); border: 4px solid var(--accent-color); transform: translateY(-7px); } } } .tag_style { display: block; .tag_list { display: inline-flex; flex-direction: column; list-style: none; .tag_item { display: inline-block; margin: 5px 5px 0px 0px; a { display: inline-flex; padding: 0px 4px; text-decoration: none; border: 2px solid var(--text-color); border-radius: 5px; color: var(--text-color); transition: 0.1s ease-in; &:hover { color: var(--accent-color); border: 2px solid var(--accent-color); transform: translateY(-2px); } } } } } }