@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}*::before,*::after{margin:0;padding:0;box-sizing:border-box}body{--color: rgba(30, 30, 30);--bgColor: rgba(245, 245, 245);display:grid;align-content:center;gap:4rem;padding:4rem;font-family:"Poppins",sans-serif;color:var(--color);background:var(--bgColor)}body .container{display:flex;flex-direction:column;gap:50px;align-items:center}body .container h1{text-align:center}body .container ul{--col-gap: 2rem;--row-gap: 2rem;--line-w: 0.25rem;display:grid;grid-template-columns:var(--line-w) 1fr;grid-auto-columns:max-content;-moz-column-gap:var(--col-gap);column-gap:var(--col-gap);list-style:none;width:min(60rem,90%);margin-inline:auto}body .container ul::before{content:"";grid-column:1;grid-row:1/span 20;background:#000;border-radius:calc(var(--line-w)/2)}body .container ul li{grid-column:2;--inlineP: 1.5rem;margin-inline:var(--inlineP);grid-row:span 2;display:grid;grid-template-rows:min-content min-content min-content;gap:20px}body .container ul li:not(:last-child){margin-bottom:var(--row-gap)}body .container ul li:nth-child(odd) .header{--accent-color: #2f5596}body .container ul li:nth-child(even) .header{--accent-color: #f29733}body .container ul li.editable{cursor:text}body .container ul li.editable .header b{border:1px dashed #add8e6}body .container ul li.editable .header .icons .edit{background-color:green;color:#fff}body .container ul li.editable .body p{border:1px dashed green}body .container ul li.editable .save{background-color:green;border:1px dashed #006400;border-radius:10px;color:#fff;cursor:pointer;padding:10px;font-size:18px;font-weight:bold;width:-moz-fit-content;width:fit-content}body .container ul li .header{--dateH: 3rem;height:var(--dateH);margin-inline:calc(var(--inlineP)*-1);text-align:center;background-color:var(--accent-color);color:#fff;font-size:1.25rem;font-weight:700;display:flex;align-items:center;flex-direction:row;justify-content:space-between;position:relative;padding:0 20px;border-radius:calc(var(--dateH)/2) 0 0 calc(var(--dateH)/2)}body .container ul li .header .icons{display:flex;height:100%;gap:5px;justify-content:space-between;align-items:center;cursor:pointer}body .container ul li .header .icons svg{width:15px;height:15px}body .container ul li .header .icons .edit,body .container ul li .header .icons .remove{width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:50%;padding:5px;background-color:#fff;color:var(--accent-color)}body .container ul li .header .icons .edit:hover{background:green;color:#fff}body .container ul li .header .icons .remove:hover{background:red;color:#fff}body .container ul li .header::before{content:"";width:var(--inlineP);aspect-ratio:1;background:var(--accent-color);background-image:linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);position:absolute;top:100%;-webkit-clip-path:polygon(0 0, 100% 0, 0 100%);clip-path:polygon(0 0, 100% 0, 0 100%);right:0}body .container ul li .header::after{content:attr(data-id);color:#000;position:absolute;display:flex;justify-content:center;align-items:center;font-weight:400;width:2rem;height:2rem;aspect-ratio:1;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)}body .container ul li .title,body .container ul li .body{background:var(--bgColor);position:relative;padding-inline:1.5rem}body .container ul li .title::before,body .container ul li .body::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%)}body .container ul li .title{overflow:hidden;padding-block-start:1.5rem;padding-block-end:1rem;font-weight:500}body .container ul li .title::before{bottom:calc(100% + .125rem)}body .container ul li .body{padding-block-end:1.5rem;font-weight:300}body .container ul li .body::before{z-index:-1;bottom:.25rem}@media(min-width: 40rem){body .container ul{grid-template-columns:1fr var(--line-w) 1fr}body .container ul::before{grid-column:2}body .container ul li:nth-child(odd){grid-column:1}body .container ul li:nth-child(odd) .header{flex-direction:row-reverse}body .container ul li:nth-child(even){grid-column:3}body .container ul li:nth-child(2){grid-row:2/4}body .container ul li:nth-child(odd) .header{border-radius:0 calc(var(--dateH)/2) calc(var(--dateH)/2) 0}body .container ul li:nth-child(odd) .header::before{-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%);clip-path:polygon(0 0, 100% 0, 100% 100%);left:0}body .container ul li:nth-child(odd) .header::after{transform:translate(-50%, -50%);left:calc(100% + var(--col-gap) + var(--line-w)/2)}}/*# sourceMappingURL=index.min.css.map */