.theme-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#050505;
  cursor:pointer;
  flex-shrink:0;
  opacity:.72;
  transition:opacity .25s ease,color .25s ease;
}
.theme-toggle:hover{opacity:1}
.theme-toggle svg{display:block}
.theme-toggle-slot{display:block;width:18px;height:18px}

@media (max-width:1360px){
  .headmenu{gap:24px}
}
@media (max-width:1240px){
  .headmenu{gap:18px}
  .headmenu li{font-size:11px}
}

html[data-theme="dark"] .theme-toggle,
body.ivt-true .theme-toggle{color:#fff}

html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}

html[data-theme="dark"] .mainav{background:rgb(14 14 14 / .8)}
html[data-theme="dark"] .logo *{fill:#fff}
html[data-theme="dark"] .burger line{stroke:#fff}
html[data-theme="dark"] .headmenu li{color:#fff}
html[data-theme="dark"] #main-nav::before{background:rgb(14 14 14 / .8)}
html[data-theme="dark"] #main-nav.menu-open::before{background:#0e0e0e}
html[data-theme="dark"] #main-nav.menu-open .mobilenav li{color:#fff}

html[data-theme="dark"] .rounded-btn.black_{background:#fff;color:#000}
html[data-theme="dark"] .black_ .bdrop{background-color:#000}
html[data-theme="dark"] .rounded-btn.black_:hover{color:#fff;border-color:rgb(228 224 219 / .6)}

html[data-theme="dark"] main{background-color:#111}
html[data-theme="dark"] .casescarousel,
html[data-theme="dark"] .playgroundsection,
html[data-theme="dark"] .contactsection,
html[data-theme="dark"] .logosection,
html[data-theme="dark"] .centerhero,
html[data-theme="dark"] .techlist,
html[data-theme="dark"] .techclose{background-color:#111;color:#f4f1ec}
html[data-theme="dark"] .contactsection{border-top-color:#262626}

html[data-theme="dark"] .title,
html[data-theme="dark"] .title .serif,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .herocontent h1,
html[data-theme="dark"] .centerhero h1,
html[data-theme="dark"] .abouthalf h4,
html[data-theme="dark"] .techgroup h3,
html[data-theme="dark"] .techclose h2,
html[data-theme="dark"] .legalpage h1,
html[data-theme="dark"] .legalpage h2,
html[data-theme="dark"] .legalpage a{color:#f4f1ec}

html[data-theme="dark"] .herocontent h1 span,
html[data-theme="dark"] .performance p,
html[data-theme="dark"] .centerhero .autop,
html[data-theme="dark"] .abouthalf .autop p,
html[data-theme="dark"] .techgroup p,
html[data-theme="dark"] .techclose .autop p,
html[data-theme="dark"] .title .autop,
html[data-theme="dark"] .legalpage p,
html[data-theme="dark"] .legalpage li,
html[data-theme="dark"] .contactintro p,
html[data-theme="dark"] .contactthanks p{color:#9a9a9a}

html[data-theme="dark"] .small{color:rgb(228 224 219 / .45)}
html[data-theme="dark"] .contactintro a,
html[data-theme="dark"] .contactintro .contactmeta,
html[data-theme="dark"] .contactthanks a,
html[data-theme="dark"] .clientnames li{color:#f4f1ec}

html[data-theme="dark"] .clientnames ul{border-top-color:#262626}
html[data-theme="dark"] .clientnames li:not(:last-child)::after{color:#4a4a4a}
html[data-theme="dark"] .performance p{border-bottom-color:#262626}
html[data-theme="dark"] .simple-hr{border-top-color:#262626}
html[data-theme="dark"] .techgroup,
html[data-theme="dark"] .techgroup:last-child,
html[data-theme="dark"] .techclose{border-color:#262626}
html[data-theme="dark"] .techgroup .stack{color:#9a9a9a}

html[data-theme="dark"] .contactform input,
html[data-theme="dark"] .contactform select,
html[data-theme="dark"] .contactform textarea{
  color:#f4f1ec;
  -webkit-text-fill-color:#f4f1ec;
  border-bottom-color:#262626;
}
html[data-theme="dark"] .contactform input:focus,
html[data-theme="dark"] .contactform select:focus,
html[data-theme="dark"] .contactform textarea:focus{border-bottom-color:#f4f1ec}
html[data-theme="dark"] .contactform select{
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.89 0.67L4.88 4.49' stroke='%23f4f1ec' stroke-width='0.9' stroke-linecap='round'/%3E%3Cpath d='M9 0.51L6.3 3.21' stroke='%23f4f1ec' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .display-cards .title,
html[data-theme="dark"] .display-cards h3{color:#fff}

@media (max-width:1170px){
  html[data-theme="dark"] #main-nav.menu-open .theme-toggle{color:#fff}
}

@media (max-width:740px){
  .theme-toggle{width:36px;height:36px}
}