*{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-color:#15161b;background-image:url(/background-m.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute;top:0;left:0}#section-1{--gap:3rem;position:relative}#section-1 nav{justify-content:space-between;align-items:center;padding:3.5rem 2.5rem 1.5rem;display:flex}#section-1 nav .nav-element:nth-child(2) i{color:red}#section-1 nav .nav-elem{max-width:5rem}#section-1 nav svg{width:50%;height:50%}#section-1 .middle{gap:var(--gap);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;font-size:5rem;line-height:.8}#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.2}#section-1 .first-line{background-color:#c53939;width:30rem;height:1px;position:absolute;transform:rotate(45deg)translateY(-17rem)}#section-1 .second-line{background-color:#c53939;width:10rem;height:1px;position:absolute;top:28%;right:12%;transform:rotate(135deg)}#section-2 .titles{flex-direction:column;margin-block:10rem;padding-left:15rem;display:flex}#section-2 .titles .title{opacity:.2;cursor:pointer;gap:4rem;padding-block:2rem;transition:all .3s linear;display:flex}#section-2 .titles .title h1{font-size:4.5rem;font-weight:100;line-height:1}#section-2 .titles .title small{margin-top:.6rem}#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}main:has(#section-2 .title[img-title=tomorrowland]:hover) .images #tomorrowland{opacity:1;background-color:#14151a}main:has(#section-2 .title[img-title=navy-pier]:hover) .images #navy-pier{opacity:1;background-color:#030827}main:has(#section-2 .title[img-title=msi-chicago]:hover) .images #msi-chicago{opacity:1;background-color:#031133}main:has(#section-2 .title[img-title=phone]:hover) .images #phone{opacity:1;background-color:#021829}main:has(#section-2 .title[img-title=kikk]:hover) .images #kikk{opacity:1;background-color:#00117a}main:has(#section-2 .title[img-title=kennedy]:hover) .images #kennedy{opacity:1;background-color:#0e2835}main:has(#section-2 .title[img-title=opera]:hover) .images #opera{opacity:1;background-color:#680202}#section-3{flex-direction:column;gap:8rem;padding:clamp(4rem,10vh,10rem) clamp(2rem,8vw,10rem);display:flex;position:relative}#section-3 .top,#section-3 .bottom{gap:4rem;width:100%;display:flex}#section-3 .left,#section-3 .right{flex:1}#section-3 .top .left{padding-left:clamp(0rem,5vw,5rem)}#section-3 .top .left h3{opacity:.7;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.5rem,3vw,2.5rem);font-weight:300;line-height:1.2}#section-3 .bottom .right{flex-direction:column;gap:2rem;display:flex}#section-3 .bottom .right p{opacity:.6;max-width:450px;font-size:.9rem;font-weight:300;line-height:1.6;position:relative}@media (width<=768px){#section-1 nav{padding:1.5rem 1rem}#section-1 .middle{flex-direction:column;gap:1.5rem}#section-1 .middle .left,#section-1 .middle .right{width:100%}#section-1 .middle .left{justify-content:flex-start;padding-block:3rem 1rem}#section-1 .middle h1{text-align:left;font-size:3rem}#section-1 .bottom{flex-direction:column;gap:1rem}#section-1 .bottom .left,#section-1 .bottom .right{width:100%}#section-1 .first-line,#section-1 .second-line{display:none}#section-2 .titles{margin-block:5rem;padding-left:1.5rem}#section-2 .titles .title{opacity:1;gap:1.5rem;padding-block:1rem}#section-2 .titles .title h1{font-size:2.5rem}#section-3{gap:4rem;padding:4rem 1.5rem}#section-3 .top,#section-3 .bottom{flex-direction:column;gap:2rem}#section-3 .left,#section-3 .right{width:100%}#section-3 .top .left{padding-left:0}}