body,ul,ul li,ul li .date{display:grid}ul li .date::after,ul li .date::before{aspect-ratio:1;content:"";position:absolute}.navigation li,h1,ul li .date{text-align:center}*,::after,::before{margin:0;padding:0;box-sizing:border-box}body{--color:whitesmoke;--bgColor:#121212;min-height:100vh;align-content:center;gap:2rem;padding:0 2rem 2rem;font-family:Poppins,sans-serif;color:var(--color);background:var(--bgColor)}a{margin:auto;color:#f5f5f5;text-decoration:none}ul{--col-gap:2rem;--row-gap:2rem;--line-w:0.25rem;grid-template-columns:var(--line-w) 1fr;grid-auto-columns:max-content;column-gap:var(--col-gap);list-style:none;width:min(60rem,90%);margin-inline:auto}ul::before{content:"";grid-column:1;grid-row:1/span 50;background:#e1e1e1;border-radius:calc(var(--line-w)/ 2)}ul li:not(:last-child){margin-bottom:var(--row-gap)}ul li{grid-column:2;--inlineP:1.5rem;margin-inline:var(--inlineP);grid-row:span 2;grid-template-rows:min-content min-content min-content}ul li .date{--dateH:3rem;height:var(--dateH);margin-inline:calc(var(--inlineP) * -1);background-color:var(--accent-color);color:#fff;font-size:1.25rem;font-weight:700;place-content:center;position:relative;border-radius:calc(var(--dateH)/ 2) 0 0 calc(var(--dateH)/ 2)}ul li .date::before{width:var(--inlineP);background:var(--accent-color);background-image:linear-gradient(rgba(0,0,0,.2) 100%,transparent);top:100%;clip-path:polygon(0 0,100% 0,0 100%);right:0}ul li .date::after{width:2rem;background:var(--bgColor);border:.3rem solid var(--accent-color);border-radius:50%;top:50%;transform:translate(50%,-50%);right:calc(100% + var(--col-gap) + var(--line-w)/ 2)}ul li .descr,ul li .title{background-color:#3c3c50;position:relative;padding-inline:1.5rem}ul li .title{overflow:hidden;padding-block-start:1.5rem;padding-block-end:1rem;font-weight:500;font-size:20px}ul li .descr{padding-block-end:1.5rem;font-weight:300}ul li .descr::before,ul li .title::before{content:"";position:absolute;width:90%;height:.5rem;background:rgba(0,0,0,.5);left:50%;border-radius:50%;filter:blur(4px);transform:translate(-50%,50%)}ul li .title::before{bottom:calc(100% + .125rem)}ul li .descr::before{z-index:-1;bottom:.25rem}@media (min-width:40rem){ul{grid-template-columns:1fr var(--line-w) 1fr}ul::before{grid-column:2}ul li:nth-child(odd){grid-column:1}ul li:nth-child(2n){grid-column:3}ul li:nth-child(2){grid-row:2/4}ul li:nth-child(odd) .date::before{clip-path:polygon(0 0,100% 0,100% 100%);left:0}ul li:nth-child(odd) .date::after{transform:translate(-50%,-50%);left:calc(100% + var(--col-gap) + var(--line-w)/ 2)}ul li:nth-child(odd) .date{border-radius:0 calc(var(--dateH)/ 2) calc(var(--dateH)/ 2) 0}}

body {
    background-color: #121212;
    color: whitesmoke;
    font-family: sans-serif;
}

header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 15px;
    padding-top: 10px;
    background-color: #18329a;
    color: rgb(255, 255, 255);
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    z-index: 999999999999;
}

header h1 {
    font-size: 35px;
    font-weight: bolder;
}

.navigation ul {
    display: flex;
    list-style-type: none;
    justify-content: center;
    align-items: normal;
    gap: 2px;
    --row-gap: 0;
    font-size: 25px;
    margin-top: 0.5em;
}

.navigation li {
    width: auto;
    text-align: center;
    padding-bottom: 10px;
}

.navigation a:link, 
.navigation a:visited {
    color: whitesmoke;
    text-decoration: none;
    font-weight: bold;
}

.navigation a:hover {
    color: rgb(190, 190, 190);
}

.navigation a {
    display: block;
    padding: 1px 0;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --color: whitesmoke;
    --bgColor: #121212;
    min-height: 100vh;
    font-family: Poppins, sans-serif;
    color: var(--color);
    background: var(--bgColor);
}

header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0 15px;
    background-color: #18329a;
    color: #fff;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    width: 100%;
    margin: 0; /* Ensure no extra margin */
}