:root{--archive-color: #ff3311}[data-dark--mode=true]{--archive-color: #ff3311}.project-card{display:grid;grid-template-areas:"image content";grid-template-rows:1fr;grid-template-columns:1fr 2fr;grid-gap:1em;padding:0!important}.project-card[data-fullscreened=true][data-full=true],.project-card[data-fullscreened=true][data-full=true]:hover,.project-card[data-fullscreened=true][data-full=true]:focus{position:fixed;top:0;left:0;height:100%;width:100%;padding:calc(3*var(--radius));border-radius:0;--radius: var(--default-radius);background-color:rgba(var(--backdrop-color),.6);--backdrop-filter: blur(var(--radius));backdrop-filter:var(--backdrop-filter);-webkit-backdrop-filter:var(--backdrop-filter);animation:fullscreen var(--duration-fast) ease-in forwards 1;z-index:999}@keyframes fullscreen{0%{opacity:0}to{opacity:1}}.project-card[data-fullscreened=true][data-full=true] #content{display:none}.project-card[data-archived=true]{--base-brightness: 80%;animation:none}.project-card[data-no-link=true]{cursor:initial}.project-card[data-full=true]{display:flex;justify-content:center;height:max-content;min-height:calc(1.5*var(--_size));--bg-color: #111}.project-card[data-full=true]:hover{--bg-color: #222}.project-card[data-full=true] #preview-image,.project-card[data-fullscreened=true] #preview-image{object-fit:contain;z-index:2;border-radius:var(--default-radius);overflow:hidden}.project-card[data-full=true][data-fullscreened=false] #preview-image{transition-property:transform;transition-duration:var(--duration-medium)}.project-card[data-full=true][data-fullscreened=false]:hover #preview-image,.project-card[data-full=true][data-fullscreened=false]:focus #preview-image{transform:scale(1.1)}.project-card[data-fullscreened=true][data-full=true]{display:flex;align-items:center;justify-content:center}.project-card[data-fullscreened=true][data-full=true] #preview-image{width:unset;height:100%}.project-card #content{position:relative;display:block;height:100%;width:100%;grid-area:content;padding:2em var(--default-radius);line-clamp:3;overflow-y:hidden;text-overflow:ellipsis;word-wrap:break-word;white-space:normal}.project-card[data-full=true] #content{position:absolute;bottom:max(-100%,calc(-1.1*var(--_size)));height:fit-content;padding-bottom:5em;background-color:rgba(var(--backdrop-color),0);--backdrop-filter: blur(var(--radius));backdrop-filter:var(--backdrop-filter);-webkit-backdrop-filter:var(--backdrop-filter);border-radius:var(--radius);transition-property:bottom,backdrop-filter,background-color;transition-duration:var(--duration-medium),var(--duration-medium),var(--duration-medium);z-index:3}.project-card[data-full=true] #description,.project-card[data-full=true] #title{color:var(--text-color-negative)}.project-card[data-full=true]:hover #content,.project-card[data-full=true]:focus #content,.project-card[data-full=true]:has(:focus) #content{bottom:0;background-color:rgba(var(--backdrop-color),.3);--backdrop-filter: blur(var(--radius));backdrop-filter:var(--backdrop-filter);-webkit-backdrop-filter:var(--backdrop-filter)}.project-card .link-container{opacity:0;position:absolute;margin:0;right:1em;bottom:3em;transition-property:opacity;transition-duration:var(--duration-medium)}.project-card:hover .link-container,.project-card:focus .link-container,.project-card:has(:focus) .link-container{opacity:1}.project-card__button{position:absolute;display:flex;justify-content:center;align-items:center;width:2em;height:2em;padding:var(--mild-radius);background-color:rgba(var(--backdrop-color),.3);border-radius:var(--default-radius);opacity:0;transition-property:opacity;transition-duration:var(--duration-medium);z-index:5;cursor:pointer}.project-card__button img{width:100%;pointer-events:none}#full-screen-button{position:absolute;display:flex;justify-content:center;align-items:center;top:1em;left:1em}#gallery-button{top:1em;right:1em}.project-card[data-full=true]:hover .project-card__button,.project-card[data-full=true]:focus .project-card__button,.project-card__button:focus{opacity:1}#date,#category,#status-wrapper{position:absolute;bottom:1em;opacity:.9}#status-wrapper{display:flex;top:1em;right:1em;height:2em;border-radius:var(--default-radius)}#status,#archive{padding:.25em .5em;margin:0;height:100%;border-radius:var(--default-radius);color:var(--text-color--white)}#archive-slider,#archive-slider:after{--bg-color: var(--archive-color)}#archive{background-color:var(--archive-color)}.project-card #date{right:1em;color:var(--text-color-dull)}.project-card[data-full=true] #date{color:var(--text-color-negative-dull)}#status-wrapper,#category{--_color: var(--color, #AAA);opacity:.8;color:var(--text-color--white);background-color:var(--_color)}#category{left:1em;padding:.25em .5em;border-radius:var(--mild-radius)}.project-card #preview-image{position:relative;width:100%;height:100%;filter:brightness(95%);object-fit:cover;overflow:hidden;grid-area:image}.big{--size: 300px}@media(hover:none){.project-card .link-container{opacity:1}.project-card[data-full=true] #preview-image{padding:var(--radius)}.project-card[data-full=true]{flex-direction:column}.project-card[data-full=true] #content{position:relative;bottom:0;background-color:rgba(var(--backdrop-color),.4);--backdrop-filter: blur(var(--radius));backdrop-filter:var(--backdrop-filter);-webkit-backdrop-filter:var(--backdrop-filter)}.project-card[data-full=true] .project-card__button{opacity:1}}@media(max-width:960px){.project-card{display:flex;flex-direction:column;padding:0!important}.project-card #preview-image{max-height:var(--_size);padding:0!important}.project-card #content{padding:3em var(--default-radius);padding-bottom:4em}#category{top:1em;left:1em;margin:0;height:fit-content}}@media(max-width:375px){#category,#date,#status-wrapper{width:calc(100% - 2em);overflow:hidden}#category{top:0;text-align:center;border-radius:var(--default-radius) var(--default-radius) 0 0}#status-wrapper{justify-content:center;top:2em;border-radius:0 0 var(--default-radius) var(--default-radius)}.project-card #content{padding:4em var(--default-radius);padding-bottom:6em}#status,#archive{width:100%;text-align:center}#archive{border-radius:0 0 var(--default-radius) 0}}
