nav{display:flex;gap:0;justify-content:right;align-items:center;flex-direction:row;position:relative;font-size:clamp(1rem, 3vw, 1.2rem)}nav .main-menu-bar{width:60%;height:clamp(4rem,8vw,5rem);max-height:15dvh;position:sticky;top:2dvh;z-index:10}nav .main-menu-bar .main-menu-fadeout{position:absolute;left:0;right:0;top:0;bottom:0;background-color:#434343;mask-image:linear-gradient(300deg,#000000 0%,#000000 70%,rgba(0,0,0,0) 90%),linear-gradient(to bottom,rgba(0,0,0,0) 0,#000000 5%),linear-gradient(to top,rgba(0,0,0,0) 0,#000000 5%);mask-composite:intersect;mask-repeat:no-repeat;mask-size:cover;-webkit-mask-image:linear-gradient(300deg,#000000 0%,#000000 70%,rgba(0,0,0,0) 90%),linear-gradient(to bottom,rgba(0,0,0,0) 0,#000000 5%),linear-gradient(to top,rgba(0,0,0,0) 0,#000000 5%);-webkit-mask-repeat:no-repeat;-webkit-mask-size:cover;z-index:11}nav .main-menu-bar .bar-content{display:flex;flex-direction:row;align-items:center;justify-content:end;gap:2rem;height:100%;width:100%}nav .main-menu-bar .bar-content .hamburger-menu{background:0 0;height:85%;width:auto;display:flex;gap:1rem;flex-direction:row;align-items:center;justify-content:flex-end;padding-block:0.5rem;padding-inline:1rem;margin-inline-end:1rem;cursor:pointer;border-radius:1rem;z-index:12}nav .main-menu-bar .bar-content .hamburger-menu .text{color:#fff;font-size:2rem;flex-grow:1;font-family:Audiowide,"Segoe UI","Arial Black",Impact,sans-serif;opacity:0;transition:background-color .2s ease-out,opacity .2s ease-out,clip-path .2s ease-out,color .2s ease-out;clip-path:circle(0 at 100% 50%)}nav .main-menu-bar .bar-content .hamburger-menu .lines{height:100%;width:auto;aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:space-around;flex-grow:1}nav .main-menu-bar .bar-content .hamburger-menu .lines .line{background-color:#fff;height:15%;width:100%}nav .main-menu-bar .bar-content .breadcrump{display:block;flex-grow:1;max-width:calc(60% - 5rem);z-index:12;color:#fff;font-size:clamp(1rem, 5dvwm 1.2rem);text-align:center}nav .main-menu-bar .bar-content .breadcrump.aboutme{color:#c7dfff}nav .main-menu-bar .bar-content .breadcrump.aboutme .link:hover{color:#8abaf7}nav .main-menu-bar .bar-content .breadcrump.charity{color:#f9c46a}nav .main-menu-bar .bar-content .breadcrump.charity .link:hover{color:#e09700}nav .main-menu-bar .bar-content .breadcrump.portfolio{color:#b3ea6a}nav .main-menu-bar .bar-content .breadcrump.portfolio .link:hover{color:#68c300}nav .main-menu-bar .bar-content .breadcrump.contact{color:#d0b3e6}nav .main-menu-bar .bar-content .breadcrump.contact .link:hover{color:#b788e1}nav .main-menu-bar .bar-content .breadcrump .crump{white-space:nowrap;display:inline-block}nav .main-menu-bar .bar-content .breadcrump .crump .link:hover{text-decoration:underline}nav .main-menu-bar .bar-content .breadcrump .crump .separator{margin-inline:0.5rem}nav #hamburger-menu-toggle:checked~.main-menu-bar .bar-content .hamburger-menu,nav .bar-content .hamburger-menu:hover{background-color:#4d4d4d}nav #hamburger-menu-toggle:checked~.main-menu-bar .bar-content .hamburger-menu .lines .line,nav .bar-content .hamburger-menu:hover .lines .line{background-color:#efefef}nav #hamburger-menu-toggle:checked~.main-menu-bar .bar-content .hamburger-menu.aboutme .lines .line,nav .bar-content .hamburger-menu:hover.aboutme .lines .line{background-color:#8abaf7}nav #hamburger-menu-toggle:checked~.main-menu-bar .bar-content .hamburger-menu.aboutme .text,nav .bar-content .hamburger-menu:hover.aboutme .text{color:#8abaf7}nav #hamburger-menu-toggle:checked~.main-menu-bar .bar-content .hamburger-menu.charity .lines .line,nav .bar-content .hamburger-menu:hover.charity .lines .line{background-color:#f9c46a}nav #hamburger-menu-toggle:checked~.main-menu-bar .bar-content .hamburger-menu.charity .text,nav .bar-content .hamburger-menu:hover.charity .text{color:#f9c46a}nav #hamburger-menu-toggle:checked~.main-menu-bar .bar-content .hamburger-menu.portfolio .lines .line,nav .bar-content .hamburger-menu:hover.portfolio .lines .line{background-color:#a0e04d}nav #hamburger-menu-toggle:checked~.main-menu-bar .bar-content .hamburger-menu.portfolio .text,nav .bar-content .hamburger-menu:hover.portfolio .text{color:#a0e04d}nav #hamburger-menu-toggle:checked~.main-menu-bar .bar-content .hamburger-menu.contact .lines .line,nav .bar-content .hamburger-menu:hover.contact .lines .line{background-color:#c070ff}nav #hamburger-menu-toggle:checked~.main-menu-bar .bar-content .hamburger-menu.contact .text,nav .bar-content .hamburger-menu:hover.contact .text{color:#c070ff}nav #hamburger-menu-toggle:checked~.main-menu-bar .bar-content .hamburger-menu .text,nav .bar-content .hamburger-menu:hover .text{opacity:1;clip-path:circle(100% at 50% 50%);color:#efefef}nav #hamburger-menu-toggle:checked~#nav-menu-popup{display:block}nav #nav-menu-popup{position:absolute;right:clamp(.3rem,2vw,1rem);top:clamp(6.3rem,12vw,7rem);display:none;z-index:1000}nav #nav-menu-popup ul{display:block}nav #nav-menu-popup ul li{display:list-item;margin-block-end:0}nav #nav-menu-popup ul li::before{content:unset}nav #nav-menu-popup ul.bar1{position:relative;top:-2rem;left:0;list-style:none;background-color:#434343;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:.5rem;border-radius:1em;box-shadow:0 0 15px 0 rgba(0,0,0,.25);-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,.25);gap:1rem;width:fit-content}nav #nav-menu-popup ul.bar1 li.item1{--icon-color:#dadada;--icon-color-hover:#5a5a5a;position:relative}nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1{display:flex;color:#fff;text-decoration:none;align-items:center;justify-content:center;border-radius:.5rem;padding:.5rem;aspect-ratio:1/1;z-index:auto}nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1 svg{cursor:pointer}nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1.active,nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1:focus,nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1:hover{background-color:#505050;outline:0}nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1.active .label,nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1:focus .label,nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1:hover .label{transform:scale(1) rotate(0);opacity:1}nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1.active~.page-description,nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1:focus~.page-description,nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1:hover~.page-description{transform:scale(1);opacity:1}nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1.active svg,nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1.active svg path,nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1:focus svg,nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1:focus svg path,nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1:hover svg,nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1:hover svg path{fill:var(--icon-color-hover);stroke:var(--icon-color-hover)}nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1:not(.has-children){top:calc(-1rem + clamp(.7rem,3vw,.4rem))}nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1 .label{position:absolute;color:#fff;background-color:#707070;white-space:nowrap;padding:.5rem 2rem .5rem 1rem;border-radius:.5rem;right:100%;top:calc(-1rem + clamp(.8rem,3vw,.2rem));transform-origin:center right;transform:scale(0) rotate(-90deg);opacity:0;transition:transform .2s ease-out,opacity .2s ease-out;z-index:-1;will-change:transform opacity}nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1 svg{width:clamp(1.7rem,5vw,2.5rem);height:auto;aspect-ratio:1}nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1 svg,nav #nav-menu-popup ul.bar1 li.item1 .icon-bar1 svg *{fill:var(--icon-color);stroke:var(--icon-color)}nav #nav-menu-popup ul.bar1 li.item1.aboutme{--icon-color:#8abaf7;--icon-color-hover:#6aa0e0}nav #nav-menu-popup ul.bar1 li.item1.aboutme>label.icon-bar1 .label{background-color:#4a90e2}nav #nav-menu-popup ul.bar1 li.item1.charity{--icon-color:#f9c46a;--icon-color-hover:#f5a623}nav #nav-menu-popup ul.bar1 li.item1.charity>label.icon-bar1 .label{background-color:#f5a623}nav #nav-menu-popup ul.bar1 li.item1.portfolio{--icon-color:#a0e04d;--icon-color-hover:#94d645}nav #nav-menu-popup ul.bar1 li.item1.portfolio>label.icon-bar1 .label{background-color:#7ed321}nav #nav-menu-popup ul.bar1 li.item1.contact{--icon-color:#c070ff;--icon-color-hover:#b25cff}nav #nav-menu-popup ul.bar1 li.item1.contact>label.icon-bar1 .label{background-color:#a137ff}nav #nav-menu-popup ul.bar1 li.item1>.page-description{top:calc(100% - clamp(.95rem,2vw,1.7rem));z-index:-1}nav #nav-menu-popup ul.bar1 li.item1 .toggle-menu-item:checked~label.icon-bar1{background-color:#505050;outline:0}nav #nav-menu-popup ul.bar1 li.item1 .toggle-menu-item:checked~label.icon-bar1 .label{transform:scale(1) rotate(0);opacity:1}nav #nav-menu-popup ul.bar1 li.item1 .toggle-menu-item:checked~label.icon-bar1~.page-description{transform:scale(1);opacity:1}nav #nav-menu-popup ul.bar1 li.item1 .toggle-menu-item:checked~label.icon-bar1 svg,nav #nav-menu-popup ul.bar1 li.item1 .toggle-menu-item:checked~label.icon-bar1 svg path{fill:var(--icon-color-hover);stroke:var(--icon-color-hover)}nav #nav-menu-popup ul.bar1 li.item1 .toggle-menu-item:checked~ul.bar2{transform:scale(1) rotate(0);opacity:1}nav #nav-menu-popup ul.bar2{position:absolute;display:flex;right:calc(100% - 1rem);top:2rem;list-style:none;background-color:#434343;flex-direction:row;justify-content:space-between;align-items:center;border-radius:1rem 0 0 1rem;box-shadow:0 0 15px 0 rgba(0,0,0,.25);-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,.25);padding:clamp(.5rem,2vw,1rem) calc(clamp(1.4rem,3vw,1.8rem) + 2rem) clamp(.5rem,2vw,1rem) clamp(.5rem,2vw,1rem);gap:clamp(1rem,3vw,2rem);height:fit-content;z-index:-1;opacity:0;will-change:opacity transform;transform:scale(0) rotate(-90deg);transform-origin:calc(100% + 2rem) center;transition:opacity .4s ease-out,transform .2s ease-out}nav #nav-menu-popup ul.bar2 li.item2 label.icon-bar2{display:flex;color:#fff;text-decoration:none;align-items:center;justify-content:center;border-radius:.5rem;padding:clamp(.5rem,2vw,1rem);aspect-ratio:1/1;z-index:auto;position:relative;cursor:pointer}nav #nav-menu-popup ul.bar2 li.item2 label.icon-bar2.active,nav #nav-menu-popup ul.bar2 li.item2 label.icon-bar2:focus,nav #nav-menu-popup ul.bar2 li.item2 label.icon-bar2:hover{outline:0;background-color:#505050}nav #nav-menu-popup ul.bar2 li.item2 label.icon-bar2.active~.page-description,nav #nav-menu-popup ul.bar2 li.item2 label.icon-bar2:focus~.page-description,nav #nav-menu-popup ul.bar2 li.item2 label.icon-bar2:hover~.page-description{transform:scale(1);opacity:1}nav #nav-menu-popup ul.bar2 li.item2 label.icon-bar2 svg{width:clamp(1.4rem,3vw,1.8rem);height:auto;aspect-ratio:1}nav #nav-menu-popup ul.bar2 li.item2 label.icon-bar2 svg,nav #nav-menu-popup ul.bar2 li.item2 label.icon-bar2 svg path{fill:var(--icon-color);stroke:var(--icon-color)}nav #nav-menu-popup ul.bar2 li.item2 .toggle-bar2:checked~.icon-bar2{outline:0;background-color:#505050}nav #nav-menu-popup ul.bar2 li.item2 .toggle-bar2:checked~.icon-bar2~.page-description{transform:scale(1);opacity:1}nav #nav-menu-popup .page-description{position:absolute;background-color:#ececec;padding:clamp(.6rem,2vw,1rem) 1rem clamp(.6rem,2vw,1rem) clamp(.6rem,2vw,1rem);border-radius:.5rem;top:100%;right:1rem;width:min(90vw,800px);max-width:calc(100vw - 6rem);transform-origin:top right;transform:scale(0);opacity:0;transition:opacity .5s ease-out;will-change:opacity;z-index:-2;font-size:1.2rem;box-shadow:0 10px 15px 0 rgba(0,0,0,.25);-webkit-box-shadow:0 10px 15px 0 rgba(0,0,0,.25)}nav #nav-menu-popup .page-description a{display:block}nav #nav-menu-popup .page-description .title{font-weight:700;font-size:1.1rem}nav #nav-menu-popup .page-description .desc{margin-block-start:clamp(0.5rem,2vw,1rem)}nav #nav-menu-popup .page-description .desc::after{display:block;height:0;content:"";clear:both}nav #nav-menu-popup .page-description .desc img{box-shadow:0 0 5px 0 rgba(0,0,0,.25);-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.25);border-radius:.5rem;border:solid 1px #ccc;margin:0 1rem .5rem 0;float:left;width:clamp(5rem,10vw,7rem);height:auto;aspect-ratio:1/1;background-color:#fefefe}nav #nav-menu-popup .page-description .desc img.bluray-disc-de{background-color:#3f5c78;padding:.5rem}nav #nav-menu-popup .page-description .desc img.bfdw,nav #nav-menu-popup .page-description .desc img.plan{padding:.5rem}@media (max-width:768px){nav .main-menu-bar{width:100%}nav .main-menu-bar .main-menu-fadeout{mask-image:none;-webkit-mask-image:none}nav .main-menu-bar .bar-content{justify-content:space-between;padding-inline-start:1rem}nav .main-menu-bar .bar-content .breadcrump{text-align:start}nav #nav-menu-popup .page-description{max-width:calc(100dvw - 6rem);width:calc(100dvw - 6rem)}}