@import"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Lato,sans-serif;background-color:#000;color:#fff}h1{font-weight:800}h2{font-weight:100}p{font-weight:300}a{text-decoration:none;color:inherit}#app{position:relative;width:100vw;min-width:335px;height:fit-content;background-color:#000;padding-bottom:1rem;overflow:hidden}.frame{position:relative;top:2rem;left:50%;transform:translate(-50%);height:calc(100vh - 4rem);width:calc(100vw - 2.5rem);min-width:calc(310px - 2.5rem);margin-bottom:3rem;border:1px solid silver}.frame>h1{margin-top:-1.48rem;font-size:3.3rem;font-family:lato sans-serif;-webkit-text-stroke:1px white;color:transparent}#logo{position:fixed;top:1.3rem;right:.57rem;width:23px;height:23px;border-radius:50%;z-index:100}#logo img{width:23px;height:23px;object-fit:cover;object-position:center;border-radius:50%;border:1px solid white}#sound-btn{position:absolute;width:23px;height:23px;top:1.3rem;left:.57rem;padding:3px 1px 0 0;font-size:.9rem;color:#fff;background-color:#000;border-radius:50%;z-index:100}#action-btn{position:absolute;bottom:2.5rem;left:0;right:0;margin:auto;height:8vh;width:8vh;border-radius:50%;border:1px solid rgba(128,128,128,.136);cursor:pointer;z-index:100;transition:all 2s ease-in-out}#action-btn:hover{transform:scale(1.1);border:1px solid rgb(0,255,255);transition:all .5s ease-in-out}#action-btn:active{background-color:red}#action-btn img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%}#landing-frame{overflow:hidden}.ripple-layer{position:absolute;top:10vh;left:0;right:0;bottom:0;background:#000}.ripple-back{position:absolute;height:34rem;width:47rem;top:25vh;left:50%;border-radius:50%;background:url(/assets/sitno-CWI7XkhU.webp) no-repeat top/cover;filter:contrast(500%) brightness(200%) grayscale(100%) invert(100%);opacity:.1;animation:sand 40s 8s ease infinite;transform:translate(-50%,-50%)}@keyframes sand{0%,to{transform:translate(-50%,-50%) rotate(0);opacity:.1}25%{transform:translate(-45%,-50%) rotate(7deg);opacity:.9}75%{transform:translate(-55%,-50%) rotate(-7deg);opacity:.5}}.ripple-mask{position:absolute;top:27.2vh;left:49.7%;transform:translate(-50%,-50%);height:157vw;width:377vw;background:url(/assets/longMask-KwSDd4Ft.webp) no-repeat center / cover}.logo-layer{position:absolute;top:37vh;left:50%;transform:translate(-50%,-50%);width:110vw;height:110vw;background:url(/assets/logoHole-NpKTPSSq.webp) no-repeat center / cover;animation:swing 40s ease infinite;border-radius:50%}@keyframes swing{0%,to{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-50%,-50%) rotate(5deg)}50%{transform:translate(-50%,-50%) rotate(0)}75%{transform:translate(-50%,-50%) rotate(-5deg)}}.landing-grid-container{position:absolute;width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto}.grid-item:nth-child(1),.grid-item:nth-child(2){grid-row:1;align-self:stretch}#name-container{position:relative;display:flex}.name-box{position:absolute;top:14.5rem;right:1rem;transform:translate(50%);height:fit-content;display:flex;justify-content:center;flex-wrap:nowrap}.name-list{position:relative;width:10rem;height:5rem;display:flex;justify-content:center;font-size:6vh;font-weight:100;padding-top:1.3vh}.name{position:absolute;opacity:0;transition:opacity 3s ease}.name.active{opacity:1}.name-blur{animation:blured 5s ease-in-out}@keyframes blured{0%{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0px)}}.blurred-area{font-size:7.85vh;font-weight:700;z-index:100}.blurred-area:before{content:"";top:0;left:0;width:100%;height:100%;-webkit-backdrop-filter:contrast(250%) brightness(300%);backdrop-filter:contrast(250%) brightness(300%);-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="5 -4 400 105" font-family="sans-serif"  font-weight="bold"%3E%3Ctext x="50%" y="85" font-size="100"  text-anchor="middle"%3EŠćepan%20/%3C/text%3E%3C/svg%3E');mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="5 -4 400 105" font-family="sans-serif"  font-weight="bold"%3E%3Ctext x="50%" y="85" font-size="100"  text-anchor="middle"%3EŠćepan%20/%3C/text%3E%3C/svg%3E');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.name-frame-text{position:relative;width:100%;height:100%;color:transparent;-webkit-text-stroke:.5px white;display:flex;align-items:center;justify-content:center;font-family:sans-serif;font-weight:700;letter-spacing:.15rem}.job-title{position:absolute;top:62vh;right:13vw;width:fit-content;font-size:1rem;font-weight:300;font-family:Lato,sans-serif;text-align:center}.name-article{position:absolute;top:66vh;right:13.7vw;width:11rem;height:fit-content;font-size:1.7vh;color:#ffffff7b}.name-article span{filter:blur(2px);color:#ffffff7b;transition:filter .5s ease-in-out}.name-article span:hover{filter:blur(0px)}#item2{position:relative}.mugshots-container{position:absolute;top:1.6rem;transform:translate(-50%);background-color:transparent}#mugshots{position:relative;height:18.6vh;width:14vh;cursor:pointer;z-index:100}.main-mug,.profil-mug{position:absolute;right:0;left:0;margin:auto;width:100%;height:100%;object-position:center;object-fit:cover;transition:transform 1s ease;border:2px solid white;border-radius:5px}#mugshots.spread>.main-mug{transform:translate(55%)}#mugshots.spread>.profil-mug{transform:translate(-53%)}.contact-container{position:absolute;top:62.7vh;left:10rem;transform:translate(-50%);line-height:.55rem;font-size:1.5vh;width:20vh;height:25vh;text-align:center}.contact-container p{margin-bottom:1.7vh}.contact-container a:hover{color:#0ff}.qr-container{width:100%;height:55px;background:url(/assets/qr-DIZsLS5M.webp) center/contain no-repeat;filter:contrast(500%)}.grid-item:nth-child(3){grid-row:2;grid-column:1 / 3;width:100%;max-width:70rem;height:fit-content;display:flex;justify-content:space-around;align-items:center;background-color:#000;margin:0 auto;padding:.2rem 0}.tech-icon{font-size:1rem;width:1.4rem;height:1.3rem;display:flex;justify-content:space-around;align-items:center;z-index:100;filter:grayscale(100%);transition:filter .5s ease-in-out}.vite-icon{width:1.2rem;height:1.2rem}.tech-icon:hover{filter:none}#projects-frame{height:fit-content}#projects-frame>h1{margin-left:-1.1rem}.project{background-image:linear-gradient(to bottom,#000,#000 60%,#00020f);height:fit-content}.project h2{font-size:2rem;font-weight:300}#project2{background-image:linear-gradient(to top,#000,#000 60%,#00020f)}.project-container{display:flex;justify-content:center;gap:1rem;height:fit-content;padding-bottom:2rem;font-family:lato,sans-serif;color:gray;border-bottom:1px solid grey}.project-text-intro{height:fit-content;padding:0 1rem;font-size:1rem;font-weight:300}.project-text-intro h4{color:#fff;font-weight:300;font-size:1.3rem;margin-top:2rem}.project-text-intro a{color:red}.project-text-list{height:fit-content;display:flex;flex-wrap:wrap;gap:1rem;padding:0 1rem}.project-text-list label{color:#fff;font-weight:300;margin-bottom:.5rem}.project-text-list li{margin-left:1rem;line-height:1.5rem}.project-text-list li::marker{content:"-  "}.project-screen{display:flex;flex-direction:column;height:fit-content}.project-screen h2{text-align:right;font-size:3rem;margin:.5rem 1rem}#iframe-container{width:100%;height:fit-content;border:1px solid rgba(128,128,128,.4)}#iframe-container img{width:100%;height:100%;object-fit:cover}.screen-label{height:1.8rem;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;border-bottom:.5px solid rgba(128,128,128,.4)}.project-tech{width:100%;display:flex;justify-content:center;align-items:center}.screen-label a{display:flex;width:5rem;margin-left:1rem;color:#8080804c;font-size:.7rem}.screen-label span{color:red;padding-top:.25rem}#about-frame{background-image:linear-gradient(to bottom,#000,#000 60%,#011901);height:fit-content}#about-frame>h1{margin-left:-1rem}.about-grid{width:100%;height:fit-content;margin-top:2rem;display:grid;grid-template-rows:50% 50%;grid-template-columns:70% 30%}.retro-container{position:relative;top:2vh;height:40vh;grid-row:1;grid-column:span 2;overflow:hidden}.circle-container{position:absolute;top:6vh;left:50%;transform:translate(-50%)}.retro-code{position:absolute;top:-2.3vh;left:50%;transform:translate(-50%);background-color:transparent;color:green;filter:blur(2px) brightness(70%);font-size:1rem}.about-bottom{width:100%;grid-row:2 / 3;grid-column:span 2;display:flex;justify-content:center;align-items:center;column-gap:3rem;padding:3rem}.about-text{grid-row:2 / 3;grid-column:1 / 2;margin-top:-5vh;width:30rem;max-width:40rem;height:fit-content}.about-list{position:relative;grid-row:2 / 3;grid-column:2 / 3;font-weight:100;color:gold;text-align:center;height:fit-content;max-width:15rem;padding:1rem .5rem;margin-top:-1vh}.about-list ul{column-count:1;margin-top:1rem;list-style-type:none;text-align:center}.about-list li{margin-bottom:.5rem;font-family:Lato}.upper-left{position:absolute;top:0;left:0;width:1vh;height:1vh;border-top:1px solid gold;border-left:1px solid gold}.upper-right{position:absolute;top:0;right:0rem;width:1vh;height:1vh;border-top:1px solid gold;border-right:1px solid gold}.lower-left{position:absolute;bottom:0;left:0;width:1vh;height:1vh;border-bottom:1px solid gold;border-left:1px solid gold}.lower-right{position:absolute;bottom:0;right:0;width:1vh;height:1vh;border-bottom:1px solid gold;border-right:1px solid gold}#testimonials-frame{position:relative;margin-bottom:3rem;height:fit-content;padding-bottom:2rem;background-image:linear-gradient(to bottom,#000,#000 60%,#360101)}#testimonials-frame>h1{margin-left:-1.35rem}#testimonials-frame>p{width:85%;margin:2vh auto;text-align:center;font-family:Lato;font-size:1.3rem}.graveyard-grid{width:100%;max-width:57rem;display:flex;flex-wrap:wrap;justify-content:center;justify-content:space-evenly;gap:.5rem;margin:1rem auto;padding:0 .5rem}.card{position:relative;width:9rem;height:12.5rem;padding:0 .2rem;border-radius:5px;cursor:pointer;border:1px solid white}.card:hover{transform:scale(1.01) rotate(1deg)}.card>.img-container{width:6rem;height:6rem;margin:.5rem auto 0;border-radius:50%;border:1px solid white;overflow:hidden}.card img{object-fit:cover;height:fit-content;width:100%}.card h4{margin:.2rem auto 0;text-align:center;font-family:lato,sans-serif;font-size:.9rem;font-size:1rem;font-weight:300}.card h5{margin:.2rem auto .3rem;text-align:center;font-weight:300;font-size:.65rem;color:#ffffff6b}.card p{position:absolute;bottom:1rem;text-align:center;font-size:.7rem;left:0;right:0;margin:auto;padding:0 .2rem}.testis-modal{position:fixed;top:50%;left:50%;width:19rem;height:32rem;transform:translate(-50%,-50%);margin:auto;border-radius:5px;background-color:#000;border:1px solid white;z-index:1}.testis-img-container{width:15rem;height:15rem;border-radius:50%;border:1px solid white;overflow:hidden;margin:1.5rem auto 0}.testis-img-container img{width:100%;object-fit:contain;height:fit-content}.testis-modal h4{width:100%;font-size:1.5rem;text-align:center;margin:.5rem auto 0}.testis-modal h5{width:100%;text-align:center;margin:.5rem auto;padding:0 1rem;font-size:1rem;font-weight:400;color:#4d4c4c}.testis-modal p{margin:2rem 0;padding:0 1rem;text-align:center;font-size:1rem;width:100%}.disclaimer{position:absolute;bottom:.5rem;left:.5rem;font-size:.5rem;color:#ffffff6b}footer{position:absolute;width:100%;height:2rem;margin:-1rem auto 0;display:flex;align-items:center;justify-content:center;font-size:.7rem}@media only screen and (max-width: 576.5px){#landing-frame{height:calc(97vh - 4rem)}#logo{right:.57rem}#sound-btn{left:.57rem}.logo-layer{width:90vw;height:90vw}.ripple-mask{top:27.1vh;left:49.6%;height:156vw;width:310vw}.name-box{flex-wrap:wrap;right:0}.job-title{max-width:8rem;margin-left:2rem;right:11vw}.name-article{display:none}.contact-container{top:62vh;line-height:.4rem;left:21vw}.contact-container a{color:#0ff}.qr-container{display:none}#action-btn{bottom:2.5rem}.tech-icon{filter:none}#projects-frame>h1{margin-left:-1.1rem}.project-container,.project-text-list{flex-direction:column}.project-text-list label{display:block;width:100%;text-align:center}.project-screen{width:100%}.project h2{font-size:1.5rem}#about-frame>h1{margin-left:-1rem}.about-grid{grid-template-rows:33% 33% 33%;grid-template-columns:100%}.retro-container{grid-column:1}.about-bottom{grid-column:1;flex-direction:column;padding:1rem .5rem 0}.about-text{grid-column:1;padding:1rem;margin:8.5rem 0 1.5rem;width:100%}.about-list{margin:0 2rem -6rem}#testimonials-frame>h1{margin-left:-.85rem}}@media only screen and (min-width: 576px) and (max-width: 768px){.frame{width:calc(100vw - 2.5rem)}#logo{right:.57rem}#sound-btn{left:.57rem}.ripple-mask{max-height:90rem;max-width:145rem}.logo-layer{max-width:42rem;max-height:42rem}.name-box{width:29rem}.job-title{right:10.5vw}.name-article{right:11vw;width:11rem}.contact-container a{color:#0ff}.tech-icon{filter:none}#projects-frame>h1{margin-left:-1.1rem}.project-container,.project-text-list{flex-direction:column}.project-text-list label{display:block;width:100%;text-align:center}.project-screen{width:100%}#about-frame>h1{margin-left:-1rem}.about-grid{grid-template-rows:33% 33% 33%;grid-template-columns:100%}.retro-container{grid-column:1}.about-bottom{grid-column:1;flex-direction:column;padding:1rem .5rem 0}.about-text{grid-column:1;padding:1rem;margin:0 0 2rem;margin:8.5rem 0 1.5rem;width:100%}.about-list{margin:0 2rem -6rem}}@media only screen and (min-width: 768px) and (max-width: 1024px){.ripple-mask{max-height:90rem;max-width:145rem}.logo-layer{max-width:42rem;max-height:42rem}.name-box{width:29rem}.job-title{right:10.5vw}.name-article{right:10.9vw}.contact-container{left:21vw}.project-container{flex-wrap:wrap}.project-text-intro{order:1;width:35vw;max-width:19rem;padding:1rem}.project-screen{order:2;width:52vw;max-height:28rem}.project-text-list{order:3;width:85vw;display:grid;gap:0;grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.project-text-list>:nth-child(1){grid-column:1/2;grid-row:1/2}.project-text-list>:nth-child(2){grid-column:2/3;grid-row:1/3;height:20rem}.project-text-list>:nth-child(3){grid-column:1/2;grid-row:2/4}.project-text-list>:nth-child(4){grid-column:2 / 3;grid-row:3 / 4}.text-list-item{padding:1rem}.project-text-list label{display:block;width:100%;text-align:center}.screen-label{border-left:.5px solid rgba(128,128,128,.4);border-right:.5px solid rgba(128,128,128,.4)}.screen-label a{font-size:.7rem}.retro-container{margin-bottom:-3rem}.about-bottom{margin:0 auto 3rem}}@media only screen and (min-width: 1024px){.ripple-mask{max-height:90rem;max-width:144.5rem}.logo-layer{max-width:42rem;max-height:42rem}.name-box{width:29rem;flex-wrap:nowrap;right:5rem;top:10.5rem}.name-list{justify-content:start}.job-title{width:11.5rem;right:10.5vw}.name-article{width:12.7rem;right:8.4vw}.contact-container{left:14rem}.mugshots-container{position:absolute;top:9rem;left:14rem}.project-container{flex-wrap:wrap;max-width:57rem;margin:0 auto}.project-text-intro{order:1;width:35vw;max-width:20rem;padding:1rem}.project-screen{order:2;width:52vw;max-width:33rem;max-height:28rem}.project-text-list{order:3;width:85vw;display:grid;gap:0;grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.project-text-list>:nth-child(1){grid-column:1/2;grid-row:1/2}.project-text-list>:nth-child(2){grid-column:2/3;grid-row:1/3;height:20rem}.project-text-list>:nth-child(3){grid-column:1/2;grid-row:2/4}.project-text-list>:nth-child(4){grid-column:2 / 3;grid-row:3 / 4}.text-list-item{padding:1rem}.project-text-list label{display:block;width:100%;text-align:center}.screen-label{border-left:.5px solid rgba(128,128,128,.4);border-right:.5px solid rgba(128,128,128,.4)}.screen-label a{font-size:.7rem}.retro-container{margin-bottom:-3rem}.about-bottom{margin:0 auto 3rem}}