*{margin:0;padding:0;box-sizing:border-box;accent-color:rgb(10,1,40);scrollbar-width:none}::selection{background-color:#34158f;color:#000}html,body,#root{width:100%;background-color:#000}.preloader{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;transition:opacity .8s ease-out,visibility .8s ease-out}.preloader.loaded{opacity:0;visibility:hidden;pointer-events:none}.main-content{opacity:0;transition:opacity .6s ease-in;position:relative}.main-content.visible{opacity:1}section{height:100vh;position:relative;z-index:4}#section2{z-index:1}#section3{height:100vw}main{position:relative}.nav-item a{text-decoration:none;color:#ffffff96}.nav-item a:hover{color:#fff;cursor:cell;padding:2px;z-index:999;border-bottom:2px solid red}#about{height:100vh;width:100%;display:flex}.abs{height:100%;width:50%;color:#fff;position:relative}#head1{position:absolute;font-size:13vw;top:2.5rem;padding-left:1rem;z-index:1}#head2{position:absolute;font-size:13vw;bottom:2.5rem;right:2.5rem;z-index:1;color:red}.abs2{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10rem;gap:1vw;font-size:1vw;color:#ffffff96;margin-left:10vw;margin-top:-15vw}.abs2 h2{color:#fff}.icon{height:2rem;position:absolute;bottom:1vw;right:20vw;font-size:x-large;display:flex;gap:25px}.icon a{text-decoration:none;color:#fff;opacity:.5;transition:all .1s linear}.icon a:hover{opacity:1;border-bottom:2px solid red}.titles{display:flex;flex-direction:column;padding-top:5rem;padding-inline:5rem;margin-top:7rem}.title{display:flex;gap:5rem;color:#fff;opacity:.3;transition:all .3s linear;padding-block:2rem}.title h1{font-size:5rem;font-weight:lighter;line-height:1}.title h1 a{text-decoration:none;color:#fff}.title small{margin-top:.6rem}.title:hover{opacity:1;cursor:pointer}#canvas:after{content:"";height:100%;width:100%;position:absolute;top:0;left:0;z-index:-1;transition:all .3s linear;background-image:url(/background-l.png);background-size:cover;background-repeat:no-repeat}main:has(#section3 .title:hover) #canvas:after{opacity:0}.images{height:100%;width:100%;position:fixed;top:0;left:0}.images img{height:100%;width:100%;object-fit:cover;position:absolute;top:0;left:0;transition:all .3s linear;opacity:0}main:has(#section3 .title[img-title=tommorowland]:hover) .images #tommorowland{opacity:1;background-color:#040718}main:has(#section3 .title[img-title=navy-pier]:hover) .images #navy-pier{opacity:1;background-color:#040718}main:has(#section3 .title[img-title=msi-chicago]:hover) .images #msi-chicago{opacity:1;background-color:#040718}main:has(#section3 .title[img-title=phone]:hover) .images #phone{opacity:1;background-color:#040718}main:has(#section3 .title[img-title=kikk]:hover) .images #kikk{opacity:1;background-color:#010f5cad}main:has(#section3 .title[img-title=kennedy]:hover) .images #kennedy{opacity:1;background-color:#040718}main:has(#section3 .title[img-title=opera]:hover) .images #opera{opacity:1;background-color:#b00404}.text{height:100%;width:25vw;color:#ffffffd3;top:80%;right:.5rem;position:fixed;transition:all .3s linear}.text .p{width:100%;right:5rem;font-weight:100;position:absolute;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;opacity:0;transition:all .3s linear}main:has(#section3 .title[img-title=tommorowland]:hover) .text #p1{opacity:1}main:has(#section3 .title[img-title=navy-pier]:hover) .text #p2{opacity:1}main:has(#section3 .title[img-title=msi-chicago]:hover) .text #p3{opacity:1}main:has(#section3 .title[img-title=phone]:hover) .text #p4{opacity:1}main:has(#section3 .title[img-title=phone1]:hover) .text #p8{opacity:1}main:has(#section3 .title[img-title=kikk]:hover) .text #p5{opacity:1}main:has(#section3 .title[img-title=kennedy]:hover) .text #p6{opacity:1}main:has(#section3 .title[img-title=opera]:hover) .text #p7{opacity:1}.contactme{height:100vh;width:100%;display:flex;justify-content:flex-end;background-image:url(/matcap/bg2.png);background-size:contain}.contact{height:100%;width:50%}.click{width:100%;height:100%;font-size:2rem;display:flex;align-items:center;justify-content:center;font-family:futura;color:#ffffff96;animation:ani 1.5s linear infinite}.click h3{padding-bottom:10px;transition:all .3s linear;transform-origin:left}.click h3 a{text-decoration:none;color:#ffffff96;font-weight:700}@keyframes ani{0%{transform:translateY(0)}50%{transform:translateY(-2rem)}to{transform:translateY(0)}}.click h3:hover{cursor:pointer;color:#fff;border-bottom:2px solid red}.click h3:hover a{color:#fff}@media screen and (max-width:1024px){#section3{height:auto;min-height:100vh}.titles{padding-inline:3rem;padding-top:3rem;margin-top:5rem}.title h1{font-size:4rem}.text{width:30vw;top:75%}.abs2{padding:5rem;margin-left:5vw;margin-top:-10vw;font-size:1.2vw}#head1,#head2{font-size:10vw}.icon{right:10vw}.contactme{background-size:cover;background-position:center}}@media screen and (max-width:768px){section{height:auto;min-height:100vh}#section3{height:auto;min-height:100vh}#about{flex-direction:column;height:auto;min-height:100vh;padding:2rem 0}.abs{width:100%;height:auto}.abs1{height:30vh;display:flex;align-items:center;justify-content:center}#head1{position:relative;font-size:15vw;top:auto;padding-left:0}#head2{position:relative;font-size:15vw;bottom:auto;right:auto}.abs2{padding:2rem;margin-left:0;margin-top:0;font-size:3.5vw;text-align:center}.abs2 h2,.abs2 h3{font-size:4vw}.icon{position:relative;bottom:auto;right:auto;justify-content:center;padding:2rem 0}.titles{padding-inline:1.5rem;padding-top:2rem;margin-top:4rem}.title{flex-direction:column;gap:.5rem;padding-block:1.5rem}.title h1{font-size:8vw}.title small{margin-top:0;font-size:3vw}.text{display:none}.images{display:block;pointer-events:none}.images img{opacity:0;transition:opacity .3s ease}#canvas:after{display:none}main:has(#section3 .title.active[img-title=tommorowland]) .images #tommorowland{opacity:1}main:has(#section3 .title.active[img-title=navy-pier]) .images #navy-pier{opacity:1}main:has(#section3 .title.active[img-title=msi-chicago]) .images #msi-chicago{opacity:1}main:has(#section3 .title.active[img-title=phone]) .images #phone{opacity:1}main:has(#section3 .title.active[img-title=kikk]) .images #kikk{opacity:1}main:has(#section3 .title.active[img-title=kennedy]) .images #kennedy{opacity:1}main:has(#section3 .title.active[img-title=opera]) .images #opera{opacity:1}.title.active{opacity:1}.contactme{flex-direction:column;justify-content:center;align-items:center;background-size:cover;background-position:center}.contact{width:100%;height:auto;display:flex;flex-direction:column;align-items:center;padding:2rem}.click{font-size:1.2rem;text-align:center}.click h3{font-size:1.2rem}}@media screen and (max-width:576px){#head1,#head2{font-size:18vw}.abs2{padding:1.5rem;font-size:4vw;gap:.8rem}.abs2 h2,.abs2 h3{font-size:5vw}.abs2 p{font-size:3.8vw;line-height:1.5}.titles{padding-inline:1rem;padding-top:1.5rem;margin-top:3rem}.title{padding-block:1rem;gap:.3rem}.title h1{font-size:10vw}.title small{font-size:3.5vw}.icon{gap:15px}.icon a{font-size:1.2rem}.click{font-size:1rem;padding:1rem}.click h3{font-size:1rem;text-align:center}@keyframes ani{0%{transform:translateY(0)}50%{transform:translateY(-1rem)}to{transform:translateY(0)}}}@media screen and (max-width:400px){.abs2{padding:1rem;font-size:4.5vw}.abs2 h2,.abs2 h3{font-size:5.5vw}.titles{padding-inline:.8rem;margin-top:2rem}.title h1{font-size:11vw}.icon{gap:12px}.icon a{font-size:1rem}}.preloader-inner{width:100%;height:100%;background:linear-gradient(135deg,#000,#0a0118,#000);display:flex;justify-content:center;align-items:center}.preloader-content{display:flex;flex-direction:column;align-items:center;gap:2rem}.loader-container{position:relative;width:150px;height:150px;display:flex;justify-content:center;align-items:center}.loader-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:3px solid transparent;border-top-color:red;border-right-color:#8b00ff;animation:spin 1.5s linear infinite}.loader-ring-inner{position:absolute;inset:10px;border-radius:50%;border:3px solid transparent;border-bottom-color:red;border-left-color:#34158f;animation:spin 1s linear infinite reverse}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loader-dog{width:80px;height:80px}.dog-svg{width:100%;height:100%;animation:pulse 2s ease-in-out infinite}.dog-path{stroke-dasharray:500;stroke-dashoffset:500;animation:draw 3s ease-in-out infinite}@keyframes draw{0%{stroke-dashoffset:500}50%{stroke-dashoffset:0}to{stroke-dashoffset:-500}}@keyframes pulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.05);opacity:1}}.progress-container{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:200px}.progress-bar{width:100%;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,red,#8b00ff,red);background-size:200% 100%;animation:gradient-shift 2s linear infinite;border-radius:2px;transition:width .3s ease}@keyframes gradient-shift{0%{background-position:0% 50%}to{background-position:200% 50%}}.progress-text{color:#fff;font-size:1.2rem;font-weight:600;font-family:monospace;letter-spacing:2px}.loading-text{color:#fff9;font-size:.9rem;text-transform:uppercase;letter-spacing:3px;animation:blink 1.5s ease-in-out infinite}@keyframes blink{0%,to{opacity:.6}50%{opacity:1}}@media screen and (max-width:768px){.preloader-content{gap:1.5rem;padding:1rem}.loader-container{width:120px;height:120px}.loader-dog{width:60px;height:60px}.progress-container{width:180px}.progress-text{font-size:1rem}.loading-text{font-size:.8rem;letter-spacing:2px}}@media screen and (max-width:480px){.preloader-content{gap:1rem}.loader-container{width:100px;height:100px}.loader-dog{width:50px;height:50px}.progress-container{width:150px}.progress-text{font-size:.9rem}.loading-text{font-size:.7rem;letter-spacing:1px}}