body{ background-color: #171717; } .badge{ display: flex; color: #a3a3a3; font: 18px 'Roboto', sans-serif; } /* body{ display: flex; /* justify-content: center; align-items: center; height: 100vh; margin: 0; } */ body{ display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container{ display: flex; max-width: 800px; padding: 20px; flex-direction: column; justify-content: space-between; /* align-items: center; */ } .left-span{ flex: 1; } .right-span{ flex: 1; text-align: right; gap: 50px; } .link{ color: #a3a3a3; text-decoration: none; } h1{ color: #fff; font: ui-sans-serif; font-size: 8rem; margin: 0px 0px 16px; } .leader{ color:#a3a3a3; } .custom-svg{ width: auto; height: 1rem; } .custom-svg path{ fill: #a3a3a3; } .custom-svg:hover path{ fill: #fff; } .blog-list{ /* max-width: 800px; */ margin: 0 auto; padding: 20px; } .blog-item{ display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #aaa; } .blog-item:hover .blog-date{ color: #fff; transition: color 0.3s ease; } .blog-item:last-child{ border-bottom: none; } .blog-title{ flex: 1 1 70%; font-size: 1.2rem; color: #fff; } .blog-date{ flex: 0 0 30%; text-align: right; color: #aaa; font-size: 1rem; } .blog-date:hover{ color: #fff; } .feet{ color: #a3a3a3; text-align: center; padding: 20px; }