.port-container{height:100%;position:absolute;top:0;right:0;width:100%;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-end;column-gap:.25rem;overflow-y:scroll;padding-right:5rem;z-index:10;transition:opacity .2s ease-in-out;column-gap:3.75rem;-ms-overflow-style:none;scrollbar-width:none}.port-container::-webkit-scrollbar{display:none}.filter-trans{opacity:0}.details{position:fixed;height:-moz-fit-content;height:fit-content;min-height:100svh;width:max-content;display:flex;flex-direction:column;row-gap:4rem;padding:2rem 0;transition:opacity .2s ease-in-out}.piece-details{position:fixed;row-gap:0;padding:5rem 0 0}.details:not(.details-active){display:none;opacity:0}.display{width:40%;height:-moz-fit-content;height:fit-content;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;row-gap:2rem;padding:2rem 0;transition:.2s ease-in-out;margin-right:25rem}.display:not(.display-active){display:none;opacity:0}.project{width:100%;height:max-content;display:flex;flex-direction:column;row-gap:0;visibility:visible;transition:height 1s ease-out}.piece-title,.project-company{font:var(--p);font-size:3rem;color:var(--gray0);margin-bottom:-.25rem;cursor:pointer;min-width:20rem;max-width:20rem;transition:.3s}.piece-title{margin-bottom:.75rem}.expanded{font:var(--p2);color:var(--gray0);width:100%;height:max-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;transition:font-size .5s ease-in-out,min-height .45s ease-in-out,opacity .3s ease-in-out .2s}.project-expanded:not(.project-expanded-visible){transition:font-size .5s ease-in-out,min-height .45s ease-in-out,opacity .4s ease-in-out;min-height:0;opacity:0;font-size:0}.piece-subtitle,.project-subtitle{opacity:1;column-gap:.75rem;text-align:center}.piece-date,.piece-subtitle,.project-date,.project-subtitle{display:flex;flex-direction:row;justify-content:flex-start;text-wrap:nowrap}.piece-date,.project-date{column-gap:.5rem}.piece-desc,.project-desc{height:max-content;margin-top:.4rem;width:100%;max-width:20rem;text-wrap:wrap}.piece-desc{width:max-content}.piece-img,.project-img{width:100%}.project-img:not(.project-img-visible){display:none}.project-img-visible{transition:.3s}.project-img-visible:hover{scale:1.05;margin:1rem 0}.piece-img{transition:.4s;cursor:pointer}.piece-focus{scale:1.05;margin:2rem}.piece-fade{opacity:.6}@media screen and (max-width:1250px){html{font-size:14px}.display{width:38%;margin-right:25rem}}@media screen and (max-width:1055px){.display{width:30vw;margin-right:34vw}}@media screen and (max-width:768px){.port-container.mobile{justify-content:flex-start;flex-direction:column;width:75%;padding:2.25rem 2.25rem 2.25rem 0;overflow-y:hidden}.section-selection{display:flex;width:100%;flex-direction:row;align-items:flex-start;font:var(--p2);color:var(--gray30);font-weight:400;column-gap:.5rem}.section{height:-moz-fit-content;height:fit-content;min-height:100svh;width:100%;display:flex;flex-direction:column;row-gap:2rem;overflow-x:hidden;overflow-y:scroll;margin-top:.5rem;padding-bottom:15rem;transition:height .2s ease-out,opacity .2s ease-in-out}.section:not(.section-active){opacity:0;height:0;min-height:0;font-size:0;padding:0;margin:0}.project{margin-bottom:.7rem}.project-company{font-size:2rem;margin-top:-.5rem;width:100%;min-width:0}.project-desc{width:100%;max-width:none}.project-img{margin-bottom:.25rem}.piece-img{pointer-events:none}.piece-details{position:relative;padding:.5rem 0 0}.details{width:100%;min-height:0}.piece-title{font-size:1.3rem;width:100%;min-width:0;margin-bottom:.125rem}}@media screen and (max-width:330px){.port-container.mobile{width:70%}}