/* incognet.io */
/* header / dropdown menu */
body{animation:fade .05s ease-out .5s both;display:block!important;pointer-events:auto!important;visibility:visible!important}
header{animation:slide .05s ease .15s both}
.dropdown-content,button,.btn{will-change:transform}
header img,svg{margin:0 auto;max-width:100%;display:block;line-height:1.1;font-size:0;font-weight:600;}
header img{height:64px;padding-right:10px;animation:fade .15s ease .5s both,blur .2s linear .3s both}
@keyframes slide{from{transform:translateY(-400px)}to{transform:translateY(0)}}

/* header overlay image */
header::before,.tg:nth-last-of-type(2)::before{position:absolute;top:10px;left:0;right:0;bottom:0;content:"";display:inline-block;width:100%;height:calc(100% - 10px);background:url(../images/rack.webp) no-repeat center center / cover;mix-blend-mode:overlay;opacity:.15;pointer-events:none}
header::before{z-index:-2;top:0;height:100%;background:url(../images/mb.webp) no-repeat center top / cover;mix-blend-mode:screen;opacity:.2;filter:saturate(.7) sepia(.5) blur(1px);will-change:transform;animation:header .3s ease-out 1s both;contain:layout paint}
.tg:nth-last-of-type(2)::before{height:calc(100% - 20px)}
.navbar{margin-top:-1px;overflow:hidden;width:calc(100% - 16px);background:linear-gradient(to bottom,#373f4988,#2c323a88,#16191d88);box-shadow:0 0 0 1px #161212,0 1px 2px rgba(0,0,0,.25);white-space:nowrap}
.dropdown{float:left;overflow:hidden;background:transparent;white-space:nowrap}
.navbar a,.dropdown .dropbtn,#sectionnav a{padding:14px 16px;min-width:176px;float:left;box-sizing:border-box;font-size:17px;font-weight:600;text-align:center;text-decoration:none;color:#d1d7e0;vertical-align:middle;position:relative;background:linear-gradient(to bottom,rgba(255,255,255,.01),rgba(0,0,0,.01));border:none;border-right:1px solid #373f49 !important;outline:none;white-space:nowrap}
.navbar .dropdown:last-child .dropbtn,.navbar .dropdown-content a{border-right:1px solid transparent !important}
.navbar .dropdown:last-child > .dropdown-content{min-width:185px !important}
.navbar a{margin:-3px 0 -8px}
.navbar a:first-child{display:none}
.dropdown .dropbtn{margin-top:-1px}
.dropdown:hover .dropbtn,.navbar a:hover,#sectionnav a:hover{background:linear-gradient(to bottom,#cb4d56,#8a282d);text-shadow:1px 1px 1px rgba(0,0,0,.4);color:#fff}
#sectionnav a{border-color:#0b0d0f !important;transition:ease background .005s}
#sectionnav a:hover{transition:ease background .005s;background:#c54952}
.navbar .singleton:active,#sectionnav a:active{color:#ccc;box-shadow:inset 0 0 0 1px #000,inset 3px 6px 3px rgba(0,0,0,.7);background:linear-gradient(to bottom,#631d20,#b2343c)}
.dropdown:hover .dropbtn:first-child::after{background:var(--dropdown_hover) no-repeat right center / 10px}
.dropdown .dropbtn:hover{position:relative;z-index:10;will-change:transform}
.dropdown .dropbtn:first-child::after{content:"";display:inline-block;vertical-align:baseline;height:10px;width:18px;background:var(--dropdown) no-repeat right center / 10px;opacity:.9}
.dropdown button.dropbtn::before,.navbar a::before{content:"";display:inline-block;width:1px;height:100%;position:absolute;top:0;right:0;background:#16191d;vertical-align:middle;z-index:999}
.dropdown-content{display:none;position:absolute;background:linear-gradient(to right,#23212b,#23212c);background:linear-gradient(to right,#101923,#111b27);min-width:184px;z-index:1000;z-index:0;border-radius:0 0 8px 8px;box-shadow:0 2px 2px 2px rgba(0,0,0,.3),0 3px 3px 3px rgba(0,0,0,.1)}
.dropdown-content a{float:none;color:#fff;padding:12px 16px;text-decoration:none;display:block;text-align:left;border-top:1px solid transparent;border-bottom:1px solid #080c12;font-size:15px;font-weight:600;margin:0;will-change:transform;background:none;position:relative}
.dropdown-content a:not(:last-child)::after{position:absolute;left:0;right:-1px;bottom:-2px;width:calc(100%+1px);height:1px;background:rgba(255,255,255,.05);content:"";}
.dropdown-content a:not(:last-child):hover::after{display:none}
.dropdown-content a:first-child{padding-top:16px}
.dropdown-content a:last-child{border-bottom:1px solid transparent}
.dropdown-content #twitter,.dropdown-content #mastodon,.dropdown-content #contact{padding-left:20px}
.dropdown-content #twitter img,.dropdown-content #mastodon img,.dropdown-content #contact img{margin:-3px 1px 0 -5px;display:inline-block;vertical-align:text-bottom;height:16px;width:28px;animation:none;transition:ease margin .15s;will-change:transform}
#twitter:hover img,#mastodon:hover img,#contact:hover img{margin:-3px -6px 0 4px;transition:ease-in margin .1s}
.dropdown-content a:hover{background:#c63943;color:#fff;border-top:1px solid rgba(255,255,255,.4);border-bottom:1px solid rgba(255,255,255,.4);text-shadow:1px 1px 1px rgba(0,0,0,.4)}
.dropdown-content a::before,.dropdown:last-child .dropbtn::before{display:none !important}
.dropdown-content a:last-child{border-bottom:none;border-radius:0 0 8px 8px}
.dropdown:hover .dropdown-content{display:block;margin-top:30px;animation:joltup 96ms ease-out 0s both;transform-origin:50% 0;pointer-events:auto;will-change:transform}
.dropdown-content a:active{background:#9e2e35;box-shadow:inset 0px 5px 4px -4px rgba(0,0,0,.7);contain:paint}
.singleton{contain:paint}

/* hamburger */
#hamburger{width:24px;height:24px;position:absolute;top:-45px;right:25px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23fff' d='M8 8h48v8.3H8zm0 19.9h48V36H8zm0 19.9h48V56H8z'/%3E%3C/svg%3E")}
#hamburger:active,#hamburger:focus{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23ca3e47' d='M8 8h48v8.3H8zm0 19.9h48V36H8zm0 19.9h48V56H8z'/%3E%3C/svg%3E")}
#mobileNav{position:absolute;right:28px;margin:15px 25px 0;padding:15px 25px 20px;width:auto;display:none;z-index:100;box-shadow:inset 0 0 0 1px var(--color-border),inset 0 0 0 2px #000,inset 0 0 2px 3px #b4353d,0 2px 2px 2px rgba(0,0,0,.5);border-radius:8px;background:var(--color-background-secondary);background:linear-gradient(to bottom,#23212b,#23212c),url(../images/rack.webp) no-repeat center center / cover;background-blend-mode:multiply}
#hamburger:focus + #mobileNav,#hamburger:active + #mobileNav,#mobileNav:hover,#mobileNav:active{display:block;animation:fade .15s ease .15s both}
#mobileNav a{padding:0 5px;display:inline-block;font-size:80%;font-weight:600;border-radius:15px;text-shadow:1px 1px 1px rgba(0,0,0,.5)}
#mobileNav a:hover,#mobileNav a:focus{background:linear-gradient(to bottom,#f9d29f,#f6bb6f);color:#511;text-shadow:1px 1px 1px rgba(255,255,255,.25)}
#mobileNav a:active{box-shadow:inset 3px 3px 3px rgba(0,0,0,.7);background:linear-gradient(to bottom,#f4b057,#f6bb6f);color:#533}
#mobileNav hr{margin:10px 0;background:linear-gradient(to right,#fcdab7,rgba(0,0,0,0));opacity:.5}
#mobileNav .sectionTitle{margin-bottom:2px}
#mobileNav .sectionTitle::before{content:"";display:inline-block;width:18px;height:18px;vertical-align:top;background:url(../icons/bullet.svg) no-repeat left 2px / 16px}
#hamburgerWrapper{position:relative}

/* animation */
@keyframes joltup{from{transform:translateX(-1px) scaleY(0);color:transparent} to{transform:translateY(17px) translateX(-1px) scaleY(1);color:inherit}}
@keyframes blur{from{filter:blur(1px)}}
@keyframes header{0%{filter:blur(5px);opacity:.2}}
@keyframes shiftRight{from{transform:translateX(-6px)}to{transform:translateY(0)}}

/* responsive */
@media screen and (max-width:1599px){.header--logo{margin:-2px 0 6px 12px;padding:0} header img{height:56px} .navbar{margin:-54px 0 20px 254px;width:calc(100% - 112px)} .navbar a,.dropdown .dropbtn{min-width:168px;font-size:15px} .dropdown-content,.navbar .dropdown:last-child > .dropdown-content{min-width:168px !important} .dropdown-content a{font-size:14px} .dropdown:hover .dropdown-content{margin-top:28px}}
@media screen and (max-width:1400px){header img{height:52px}}
@media screen and (max-width:1300px){.navbar{margin-left:268px;margin-top:-53px;width:calc(100% - 160px)} .header--logo{margin:-3px 0 9px 12px} header img{margin-left:12px;height:50px} .dropdown .dropbtn,.navbar a,.dropdown .dropbtn,.dropdown-content,.navbar .dropdown:last-child > .dropdown-content{width:160px !important;min-width:160px !important;font-size:14px} .dropdown:hover .dropdown-content{margin-top:26px;font-size:13px} .dropdown .dropbtn:first-child::after{height:9px;width:14px;background-size:8px}}
@media screen and (max-width:1199px){#hamburger{margin-top:24px;display:block} .navbar{display:none} .header{padding-bottom:24px !important} header img{margin-left:28px} .navbar{margin:5px -40px 10px;width:calc(100% + 80px)} .dropdown .dropbtn,.navbar a{font-size:13px} .dropdown:hover .dropdown-content{margin-top:40px} .dropdown .dropbtn,.dropdown-content,.navbar a{min-width:150px} .dropdown .dropbtn{padding:10px} .header--logo{margin:-18px 0 -18px -90px} .navbar{margin:-54px 0 20px 108px;width:100%} .navbar a,.dropdown .dropbtn{padding:14px;min-width:156px} .dropdown-content,.navbar .dropdown:last-child > .dropdown-content{min-width:156px !important} .dropdown-content a{font-size:12px} .dropdown:hover .dropdown-content{margin-top:28px}}
@media screen and (max-width:800px){.navbar{margin:5px -25px 0;width:calc(100% + 50px)}}
@media screen and (max-width:768px){.header--logo{margin:-8px 0 -19px -62px}}
@media screen and (min-width:1600px){.header__layout{margin-left:-50px} .navbar{margin:-55px 0 26px 232px;width:1086px} .navbar a,.dropdown .dropbtn{min-width:180px} .dropdown-content a:hover::before{margin:1px 3px 0 -2px;content:"";background:var(--dropdown) no-repeat left top / 10px;width:10px;height:16px;position:relative;display:inline-block !important;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.5));animation:shiftRight .15s ease .05s both} .dropdown-content a:active::before{width:14px;background-position:center top}}
