.portfolio-main-container{margin-left:auto;margin-right:auto;min-height:100vh;max-width:1280px;padding:48px 24px;font-family:sans-serif}html{scroll-behavior:smooth}@media (min-width: 768px){.portfolio-main-container{padding:64px 48px}}@media (min-width: 1024px){.portfolio-main-container{padding-top:0;padding-bottom:0}}.flex-container{display:flex;justify-content:space-between;gap:16px}@media (max-width: 1023px){.flex-container{display:block}}.nav-bar{margin-top:50px}.nav-list{display:flex;flex-direction:column;gap:20px;list-style:none;padding:0;margin:0}.nav-item{position:relative}.nav-item a{text-decoration:none;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#78716c;transition:color .3s ease,padding-left .1s ease,padding-top .1s ease,padding-bottom .1s ease;padding-left:60px;padding-top:5px;padding-bottom:5px;line-height:1.8;position:relative}.nav-item a:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:40px;height:3px;background-color:#a8a29e;transition:width .1s ease;z-index:1}.nav-item a:hover:before,.nav-item.active a:before{width:70px;background-color:#92400e}.nav-item a:hover,.nav-item.active a{color:#1c1917;padding-left:90px;padding-top:10px;padding-bottom:10px}.nav-item a:active:before{width:30px}.nav-item a:active{color:#92400e}.social-links{display:flex;gap:16px;margin-top:auto}.social-icon{color:#292524;font-size:1.5rem;transition:color .3s ease}.social-icon:hover{color:#92400e}.title-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;color:#292524;gap:10px}.highlight{color:#92400e}.cv-link{display:inline-flex;align-items:baseline;font-weight:500;line-height:1.25;color:#292524;font-size:1.2rem;text-decoration:none}.cv-link:hover{color:#92400e}.cv-link:focus-visible{color:#92400e}.cv-link .icon{margin-left:8px;font-size:14px}.cv-link:hover .icon,.cv-link:focus-visible .icon{transform:translateY(-5px);transition:transform .3s ease}.icon{rotate:45deg}#projects{margin-bottom:4rem;scroll-margin-top:4rem}@media (min-width: 768px){#projects{margin-bottom:6rem}}@media (min-width: 1024px){#projects{margin-bottom:9rem;scroll-margin-top:6rem}}.list-item{position:relative;list-style:none;margin-bottom:50px;width:100%}.group-list .list-item .overlay{position:absolute;top:-16px;right:-16px;bottom:-16px;left:-16px;z-index:0;display:none;border-radius:.375rem;transition:all .3s ease}.group-list .list-item:hover .overlay{display:block;background-color:#e7e5e480;box-shadow:inset 0 1px #94a3b81a;filter:drop-shadow(0 4px 6px rgba(0,0,0,.1))}.group-list .list-item:hover .img{border-color:#cbd5e14d}.group-list .list-item:hover .group-text a{color:#92400e}@media (min-width: 1024px){.group-list .list-item .overlay{top:-24px;right:-24px;bottom:-24px;left:-24px}}.grid-container{display:flex;flex-direction:row;width:100%;box-sizing:border-box;transition:all .3s ease-in-out}@media (min-width: 640px){.grid-container{flex-direction:column;align-items:flex-start;gap:16px}}@media (min-width: 768px){.grid-container{gap:50px;flex-direction:row;align-items:flex-start}}@media (min-width: 1024px){.grid-container{flex-direction:row;align-self:flex-start;gap:32px}.grid-container:hover{opacity:1;transition:opacity .3s ease-in-out}.grid-container.group-hover{opacity:.5}}.group-text{z-index:10;flex:1}@media (min-width: 640px){.group-text{order:2;grid-column:span 6}}.group-text a{display:inline-flex;align-items:baseline;font-weight:500;line-height:1.25;color:#292524;font-size:1rem;text-decoration:none}.group-text a:hover{color:#92400e}.group-text a .icon{margin-left:8px;font-size:14px}.group-text a:hover .icon,.group-text a:focus-visible .icon{transform:translateY(-5px);transition:transform .3s ease}.group-text a:focus-visible{color:#92400e}.group-text p{margin-top:.5rem;font-size:.875rem;line-height:1.5rem}.group-image{position:relative;width:130px;height:80px}.img{aspect-ratio:16/9;object-fit:cover;border-radius:.375rem;border-width:1px;border:solid;border-color:#6269714d;transition:all .3s ease;width:100%;height:100%}.group-image:hover .img{border-color:#cbd5e14d}@media (min-width: 640px){.img{order:1;grid-column:span 2;transform:translateY(.25rem)}}@media (min-width: 768px){.img{width:156px;height:87px}}@media (min-width: 1024px){.img{width:106px;height:59px}}@media (min-width: 1440px){.img{width:139px;height:78px}}
