@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");body{padding:0;margin:0;background-color:#2a6449;color:#fff;font-family:"Montserrat",monospace}a{text-decoration:none}.card-list{display:flex;padding:3rem;overflow-x:scroll;&::-webkit-scrollbar {width:10px;height:10px;}&::-webkit-scrollbar-thumb {background:#201c29;border-radius:10px;box-shadow:inset 2px 2px 2px hsla(0,0%,100%,.25),inset -2px -2px 2px rgba(0,0,0,.25);}}.card-list::-webkit-scrollbar-track{background:linear-gradient(90deg,#201c29,#201c29 1px,#17141d 0,#17141d)}.card{height:350px;width:400px;min-width:250px;padding:1.5rem;border-radius:16px;background:#17141d;box-shadow:-1rem 0 3rem #000;display:flex;flex-direction:column;transition:.2s;margin:0;scroll-snap-align:start;clear:both;position:relative;&:hover {transform:translateY(-1rem);h2{background:linear-gradient(90deg,#ff8a00,#e52e71);text-shadow:none;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;}.author-avatar img{filter:none;}}}.card:focus-within~.card,.card:hover~.card{transform:translateX(130px)}.card:not(:first-child){margin-left:-130px}.card-header{margin-bottom:auto;p{font-size:14px;margin:0 0 1rem;color:#7a7a8c;}h2 {font-size:20px;margin:.25rem 0 auto;text-decoration:none;color:inherit;border:0;display:inline-block;cursor:pointer;}}.card-author{margin:3rem 0 0;display:grid;grid-template-columns:75px 1fr;align-items:center;position:relative}.author-avatar{grid-area:auto;align-self:start;position:relative;box-sizing:border-box;img{width:40px;height:40px;border-radius:50%;filter:grayscale(100%);display:block;overflow:hidden;margin:16px 10px;}}.author-name{grid-area:auto;box-sizing:border-box}.author-name-prefix{font-style:normal;font-weight:700;color:#7a7a8c}.half-circle{position:absolute;bottom:0;left:0;width:60px;height:48px;fill:none;stroke:#ff8a00;stroke-width:8;stroke-linecap:round;pointer-events:none}.tags{margin:1rem 0 2rem;padding:.5rem 0 1rem;line-height:2;margin-bottom:0}.tags a{font-style:normal;font-weight:700;font-size:.5rem;color:#7a7a8c;text-transform:uppercase;font-size:.66rem;border:3px solid #28242f;border-radius:2rem;padding:.2rem .85rem .25rem;position:relative}.tags a:hover{background:linear-gradient(90deg,#ff8a00,#e52e71);text-shadow:none;-webkit-text-fill-color:transparent;-webkit-background-clip:text;-webkit-box-decoration-break:clone;background-clip:text;border-color:#fff}