@import "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap";*{box-sizing:border-box;margin:0;padding:0}html,body,#root{color:#f5f5f5;background-color:#000;width:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}main{position:relative}section{z-index:2;min-height:100vh;position:relative}#canvas-elem:after{content:"";z-index:-1;background-image:url(/background-l.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;transition:all .3s linear;position:absolute;top:0;left:0}.main-nav{z-index:100;justify-content:space-between;align-items:center;width:100%;padding:3.5rem 2.5rem 1.5rem;display:flex;position:fixed;top:0;left:0}.main-nav .nav-elem:nth-child(2) i{color:red}.main-nav svg{width:100%;max-width:5rem;height:100%}#section-1{--gap:5rem;position:relative}#section-1 .middle{gap:var(--gap);padding-top:10rem;display:flex}#section-1 .middle .left,#section-1 .middle .right{width:50%}#section-1 .middle .left{justify-content:flex-end;align-items:center;padding-block:7rem;display:flex}#section-1 .middle h1{text-align:right;letter-spacing:-2px;font-family:Playfair Display,serif;font-size:6.5rem;line-height:.9}#section-1 .bottom{gap:var(--gap);display:flex}#section-1 .bottom .left,#section-1 .bottom .right{width:50%}#section-1 .bottom .right p{font-weight:200;line-height:1.5}#section-1 .first-line{background-color:#ff000065;width:35rem;height:1px;position:absolute;transform:rotate(45deg)translateY(-17rem)}#section-1 .second-line{background-color:#ff000065;width:10rem;height:1px;position:absolute;top:28%;right:12%;transform:rotate(135deg)}#section-2{width:100%}#section-2 .titles{flex-direction:column;width:100%;margin-block:10rem;padding-left:5vw;display:flex;overflow:hidden}#section-2 .titles .title{opacity:.25;cursor:pointer;align-items:center;gap:3vw;padding-block:1rem;transition:all .3s linear;display:flex}#section-2 .titles .title small{text-align:left;letter-spacing:2px;flex-shrink:0;width:8rem;margin-top:0;font-size:.75rem}#section-2 .titles .title h1{white-space:nowrap;text-align:left;margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:5.5vw;font-weight:200;line-height:1}#section-2 .titles .title:hover{opacity:1}main:has(#section-2 .title:hover) #canvas-elem:after{opacity:0}.images{width:100%;height:100%;position:fixed;top:0;left:0}.images img{object-fit:cover;opacity:0;width:100%;height:100%;transition:all .3s linear;position:absolute;top:0;left:0}:is(main:has(#section-2 .title[img-title=tomorrowland]:hover) .images #tomorrowland,main:has(#section-2 .title[img-title=navy-pier]:hover) .images #navy-pier,main:has(#section-2 .title[img-title=msi-chicago]:hover) .images #msi-chicago,main:has(#section-2 .title[img-title=phone]:hover) .images #phone,main:has(#section-2 .title[img-title=kennedy]:hover) .images #kennedy){opacity:1;background-color:#040718}main:has(#section-2 .title[img-title=kikk]:hover) .images #kikk{opacity:1;background-color:#010f5cad}main:has(#section-2 .title[img-title=opera]:hover) .images #opera{opacity:1;background-color:#b00404}.project-descriptions{z-index:10;pointer-events:none;width:25vw;position:fixed;bottom:10vh;right:5vw}.desc-item{opacity:0;text-align:right;transition:all .3s;position:absolute;bottom:0;right:0}.desc-item small{letter-spacing:3px;opacity:.5;font-size:.6rem}.desc-item p{margin-top:1rem;font-size:1.1rem;font-weight:300;line-height:1.4}:is(main:has(#section-2 .title[img-title=tomorrowland]:hover) .project-descriptions #desc-tomorrowland,main:has(#section-2 .title[img-title=navy-pier]:hover) .project-descriptions #desc-navy-pier,main:has(#section-2 .title[img-title=msi-chicago]:hover) .project-descriptions #desc-msi-chicago,main:has(#section-2 .title[img-title=phone]:hover) .project-descriptions #desc-phone,main:has(#section-2 .title[img-title=kikk]:hover) .project-descriptions #desc-kikk,main:has(#section-2 .title[img-title=kennedy]:hover) .project-descriptions #desc-kennedy,main:has(#section-2 .title[img-title=opera]:hover) .project-descriptions #desc-opera){opacity:1}#section-3{z-index:0;align-items:center;padding-left:5vw;display:flex}.bottom-content{max-width:50vw}.bottom-content small{letter-spacing:3px;font-size:.75rem}.bottom-content h1{margin-top:2rem;font-family:Playfair Display,serif;font-size:5vw;font-weight:400;line-height:.9}@media (width<=768px){.main-nav{padding:1.5rem 1rem 1rem}.main-nav svg{max-width:3.5rem}.main-nav .nav-elem:nth-child(2){display:none}#section-1 .middle{flex-direction:column;padding-top:6rem}#section-1 .middle .left,#section-1 .middle .right,#section-1 .bottom .left,#section-1 .bottom .right{width:100%}#section-1 .middle .left{padding-block:2rem;justify-content:flex-start;padding-left:1rem}#section-1 .middle h1{text-align:left;font-size:4rem}#section-1 .bottom{flex-direction:column;padding-left:1rem}.first-line,.second-line{display:none}#section-2 .titles{margin-block:5rem}#section-2 .titles .title{flex-direction:column;align-items:flex-start;gap:.5rem;padding-block:1.5rem}#section-2 .titles .title small{width:100%}#section-2 .titles .title h1{white-space:normal;font-size:10vw}.project-descriptions{width:80vw;bottom:5vh;right:5vw}.desc-item p{font-size:.9rem}#section-3{padding-left:1rem}.bottom-content{max-width:90vw}.bottom-content h1{margin-top:1rem;font-size:10vw}}