#projects{ul{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:minmax(200px,auto)}li{display:flex;width:100%;align-items:stretch;justify-content:stretch;transition:all .25s}.project-item-wrapper{.project-item{display:flex;flex:1 1;align-items:center;justify-content:center;overflow:hidden;padding-left:40px}.preview-thumb{transition:transform .5s}&:hover .preview-thumb{transform:translateY(-16px)}.details{border-top:var(--border-width-extra-thick) solid rgb(var(--foreground-rgb));padding:16px}.title{font-size:var(--font-lg);padding-bottom:8px}.description{font-size:var(--font-xs)}}.project-item-wrapper:first-child{grid-column:1/3;grid-row:1/3}.project-item-wrapper:nth-child(2){grid-column:3/5;grid-row:1/3}.project-item-wrapper:nth-child(3){grid-column:3/5;grid-row:2/3}}#words{li,ul{display:flex}li{width:100%;align-items:stretch;justify-content:stretch;transition:all .25s}li:has(~li:hover),li:hover~li{background-color:rebeccapurple;opacity:.5}.post{flex-direction:column;padding:16px;text-align:left;justify-content:flex-start}.post-thumb{width:100%;aspect-ratio:1/1;background-color:rgb(var(--foreground-rgb));border-radius:var(--border-radius-sm)}.post-title{width:240px;margin:16px 0;font-size:1.2em;font-weight:700;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.post-description{width:100%;margin-bottom:16px;font-size:.85em}}#home{--left-content-width:480px;display:flex;flex-direction:column;justify-content:center;gap:16px;min-height:calc(100vh - var(--nav-height) - var(--marquee-height));margin-left:var(--horizontal-gap);position:relative;h1{font-weight:700}h1:first-letter{background:rgb(var(--foreground-rgb));border-radius:var(--border-radius);color:rgb(var(--background-rgb));margin-right:4px;padding:0 12px}p{max-width:var(--left-content-width)}.pseudo-name{border:2px dashed;border-right:none;border-left:none;font-size:.85em;font-style:italic;padding:4px 0;margin:20px 0 12px}.social-links{display:flex;gap:8px;align-items:flex-start;width:100%;li a{display:inline-flex;align-items:center;justify-content:center;border:var(--border-width-thin) solid rgb(var(--foreground-rgb));border-radius:var(--border-radius);height:28px;width:28px;&:hover{background-color:rgb(var(--foreground-rgb));color:rgb(var(--background-rgb))}}}.right-panel{position:absolute;left:calc(var(--left-content-width) + 4em);top:0;bottom:0;width:300px;display:flex;justify-content:center;flex-direction:column}.rotating-hero-image{background-color:rgb(var(--background-rgb));border-radius:var(--border-radius);border:2px dashed rgb(var(--foreground-rgb));filter:grayscale(1);transform:translateY(0) translateX(10px) rotate(7deg) scale(1);transition:filter .5s,transform .25s;padding:12px 12px 8px;text-align:center;img{object-fit:cover;border-bottom:2px solid rgb(var(--background-rgb));border-radius:var(--border-radius);flex:1 1;width:100%;aspect-ratio:1/1.5}&:hover{filter:grayscale(0);transform:translateY(0) translateX(10px) rotate(-4deg) scale(1.2);z-index:var(--z-index-base)}}footer{bottom:0;display:flex;font-size:var(--font-xs);justify-content:space-between;left:0;padding:8px 16px 8px 0;position:absolute;right:var(--horizontal-gap)}}#marquee-text-wrapper{--gap:32px;height:var(--marquee-height);width:100%;white-space:nowrap;.marquee-text{display:flex;gap:var(--gap);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;transform-origin:right;position:relative;background-color:rgb(var(--background-rgb));border-bottom:var(--border-width) dashed rgb(var(--foreground-rgb));border-top:var(--border-width) dashed rgb(var(--foreground-rgb));color:rgb(var(--foreground-rgb))}&.inverted .marquee-text{background-color:rgb(var(--foreground-rgb));border-bottom:var(--border-width) dashed rgb(var(--background-rgb));border-top:var(--border-width) dashed rgb(var(--background-rgb));color:rgb(var(--background-rgb))}.marquee-text ul{animation:marquee 25s linear infinite;display:flex;flex-shrink:0;gap:var(--gap);min-width:100%;padding:8px 0}.marquee-text-primary{transform:rotate(-1.5deg);z-index:var(--z-index-normal);opacity:.8}.marquee-text-secondary{transform:rotate(1.5deg);opacity:.2}.marquee-text-secondary ul{animation-direction:reverse}.word{position:relative}.word:after{content:"";width:6px;aspect-ratio:1;background-color:rgb(var(--foreground-rgb));position:absolute;transform:rotate(45deg) translate(-50%,-50%);right:-18px;top:10px}}@keyframes marquee{0%{transform:translateX(0)}to{transform:translateX(calc(-100%))}}