:root {
  --gutter-x: 1.666rem;
  --black: rgba(25, 25, 25, 1);
  --black0: rgba(25, 25, 25, 0);
  --black2: rgba(17, 17, 17, 1);
  --black3: rgba(0, 0, 0, 1);
  --black_0_90: rgba(22, 22, 2, .9);
  --black_0_80: rgba(22, 22, 22, .8);
  --darkgray: rgba(33, 33, 33, 1);
  --gray: rgba(99, 99, 99, 1);
  --softwhite: rgba(175, 175, 175, 1);
  --white: rgba(225, 225, 225, 1);

  --neongreen: #2CFF05;
  --neonyellow: #ffe400;
  --neonblue: #00FFFF;
  --neonred: #ED1E79;
  --neonpink: #FF00FF;
  --neonflamingo: #FC92FF;
  --neonpurple: #BF00FF;
  --neonorange: #FF931E;

  --mainfont: "tchig-mono", monospace;
  --bodyfontsize: .8rem;
  --lineheight: calc(var(--bodyfontsize) * 1.5);
  --br: calc(var(--bodyfontsize) / 6.666666);
  --padding: var(--bodyfontsize);
  --padding_sm: calc(var(--bodyfontsize) / 2);
  --padding_xs: calc(var(--bodyfontsize) / 3);
  --padding_l: calc(var(--bodyfontsize) * 2);
  --padding_xl: calc(var(--bodyfontsize) * 3);
  --padding_xxl: calc(var(--bodyfontsize) * 4);
}

::selection {color: var(--black); background: var(--softwhite);}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust:100%
  box-sizing:border-box
}

html, body {
  font-family: var(--mainfont);
  font-size: var(--bodyfontsize);
  line-height: var(--lineheight);
  color: var(--softwhite);
  background-color: var(--black);
  scroll-behavior: smooth;
  text-transform: lowercase;
}

body {
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: 'kern';
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}


main {
  background-color: var(--black);
}

section.default {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--padding_xxl) * 2) 0;
}

section.execute, section.websites, section.cloud, .offcanvas-backdrop {
  background: linear-gradient(-35deg, var(--black), var(--black3));
	background-size: 400% 400%;
	animation: gradient 30s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  background-repeat: no-repeat;
}

section.home, section.design, section.contact {
	background: linear-gradient(-45deg, var(--black3), var(--black));
	background-size: 400% 400%;
	animation: gradient 30s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  background-repeat: no-repeat;
}

@keyframes gradient {
	0% {background-position: 100% 100%;}
	50% {background-position: 0% 0%;}
	100% {background-position: 100% 100%;}
}


.neondoom, .text p strong {
	animation: neondoom 80s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

@keyframes neondoom {
	0%        {color: var(--neonorange);}
	16.666%   {color: var(--neonflamingo);}
  33.333%   {color: var(--neonpink);}
  50%       {color: var(--neonblue);}
  66.666%   {color: var(--neonyellow);}
  83.333%   {color: var(--neongreen);}
	100%      {color: var(--neonorange);}
}


.mdash {
  display: block;
  height: var(--lineheight);
  margin-top: var(--lineheight);
  width: 33%;
  border-top-width: .0125rem;
  border-top-style: solid;
  animation: neondoomborder 80s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

@keyframes neondoomborder {
  0%        {border-top-color: var(--neonorange);}
	16.666%   {border-top-color: var(--neonflamingo);}
  33.333%   {border-top-color: var(--neonpink);}
  50%       {border-top-color: var(--neonblue);}
  66.666%   {border-top-color: var(--neonyellow);}
  83.333%   {border-top-color: var(--neongreen);}
	100%      {border-top-color: var(--neonorange);}
}

a, a:hover, a:focus, a:link a:visited, a:active, a.active {
  text-decoration: none;
  color: var(--softwhite);
}

.text a {
  color: var(--softwhite);
  border-bottom-width: 2px!important;
  border-bottom-style: solid!important;
  animation: neondoomaborder 80s cubic-bezier(0.25, 0.1, 0.25, 1) infinite!important;
}

@keyframes neondoomaborder {
  0%        {border-bottom-color: var(--neonorange);}
	16.666%   {border-bottom-color: var(--neonflamingo);}
  33.333%   {border-bottom-color: var(--neonpink);}
  50%       {border-bottom-color: var(--neonblue);}
  66.666%   {border-bottom-color: var(--neonyellow);}
  83.333%   {border-bottom-color: var(--neongreen);}
	100%      {border-bottom-color: var(--neonorange);}
}

.container {
  padding-left: var(--gutter-x);
  padding-right: calc(var(--gutter-x) * 3);
  margin-left: unset;
  margin-right: unset;
}


.meranav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 56px;
  width: calc(var(--gutter-x) * 3);
  padding: var(--lineheight);
  padding-top: calc(var(--lineheight) * 2);
  text-align: center;
  line-height: 1;
}

.meranav ul {
  margin: 0;
  padding: 0;
  writing-mode: vertical-rl;
  margin: 0 auto;
}

.meranav ul li {
  display: inline-block;
}
.meranav ul li a.nav-link {
  color: var(--gray);
}

.meranav ul li a.nav-link.active {
  color: var(--softwhite);
}

.TchigMonoRegular {
  font-family: "tchig-mono", monospace;
  font-weight: 400;
  font-style: normal;
}


h1, h2, h3, h4, h5, h6 {
  font-size: var(--bodyfontsize);
  line-height: var(--lineheight);
  font-weight: 400;
  margin-bottom: var(--lineheight);
}


.gray {color: var(--gray)!important}
.black {color: var(--black)!important}
.white {color: var(--white)!important}
.softwhite {color: var(--softwhite)!important}

.lh1 {
  line-height: var(--bodyfontsize);
}

img {
  width: 100%;
  height: auto;
  display: block;
}



.text p {margin-bottom: var(--lineheight);}

.text p strong {
  font-weight: 400!important;
}

.text_sm {
  font-size: calc(var(--bodyfontsize) * .75);

}

section.websites .text p:has(a) {
  color: var(--gray);
}

ul {
  list-style: none;
}

hr {
  margin: calc(var(--bodyfontsize) * 3) 0;
  border-top: 1px solid;
}


.card {
  background: var(--black);
  color: var(--white);
}

.biicon {
  font-size: calc(var(--bodyfontsize) * 1.25);
}
hr.tiny {
  margin: calc(var(--bodyfontsize) * .5) 0;
  border-top: 1px solid;
}

.download_title {
  text-transform: uppercase;
}

.offcanvas.offcanvas-bottom {
  background: var(--black);
  color: var(--softwhite);
  height: auto;
  border-top: none;
  -webkit-transition: all 1.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 1.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.offcanvas-backdrop.show {
  opacity: .75;
}

.offcanvas-backdrop {
  -webkit-transition: opacity 1.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 1.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

figure.image {
  position: relative;
  display: block;
  --w: 1;
  --h: 1.408;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background: url(../images/loading.gif);
  background-size: 66px auto!important;
  background-repeat: no-repeat!important;
  background-position: center!important;
  overflow: hidden;
  margin-bottom: 0;
}

figure.image img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  opacity: 0;
  transform: scale(1.03);
  -webkit-transition: all 1.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 1.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
}

figure.image[data-contain] img {
  object-fit: cover;
}

figure.image img.img_load {
  opacity: 1!important;
  transform: scale(1);
}

.lightboxOverlay {
  background-color: var(--black0);
  opacity: 1;
  -webkit-backdrop-filter:saturate(160%) blur(15px);
  backdrop-filter:saturate(160%) blur(15px);
}

.lb-outerContainer {
  border-radius: 0;
  background-color: var(--black0);
  background: url(../images/loading.gif), var(--gray);
  background-repeat: no-repeat!important;
  background-size: 66px auto!important;
  background-position: center!important;
}

.lightbox .lb-image {
  border: 0;
}

.lb-closeContainer {
  display: none;
}

.lb-cancel {background: unset;}

.btn {
  outline: none!important;
  shadow: none!important;
  box-shadow: none!important;
  text-transform: lowercase;
  font-weight: 400;
  border-radius: var(--br);
}



.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:focus, .btn-primary:active:hover  {
  color: var(--softwhite)!important;
  border-color: var(--softwhite)!important;
  background-color: var(--black)!important;
}

.btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:active:focus, .btn-secondary:active:hover  {
  color: var(--gray)!important;
  border-color: var(--softwhite)!important;
  background-color: var(--softwhite)!important;
}

footer.footer {
  background: var(--black2);
  padding: var(--padding) 0;
}


section.cloud .card .card-body {
  padding-bottom: 0;
}

section.cloud .card .card-footer {
  padding-top: 0;
  border-top: 0;
}
@media (hover: hover) {

section.work a:hover figure.image img {transform: scale(1.03);}
.btn {-webkit-transition: all 0.666s cubic-bezier(0.25, 0.1, 0.25, 1);transition: all 0.666s cubic-bezier(0.25, 0.1, 0.25, 1);}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:focus, .btn-primary:active:hover {background-color: var(--softwhite)!important;color: var(--black)!important;}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:active:focus, .btn-secondary:active:hover  {color: var(--black)!important;border-color: var(--white)!important;background-color: var(--white)!important;}

figure.image:hover img {
  -webkit-filter: grayscale(0%);
   filter: grayscale(0%);
}

}


@media (min-width: 576px) {
  :root {--gutter-x: 1.999rem;--bodyfontsize: .8333333rem;}

}

@media (min-width: 768px) {
  :root {--gutter-x: 2.222rem;--bodyfontsize: .8666666rem;}
}

@media (min-width: 992px) {
  :root {--gutter-x: 2.555rem;--bodyfontsize: .9rem;}
}

@media (min-width: 1200px) {
  :root {--gutter-x: 2.999rem;--bodyfontsize: .9333333;}
}

@media (min-width: 1400px) {
  :root {--gutter-x: 3.333rem;--bodyfontsize: .9666666rem;}
}

@media (min-width: 1400px) {
  :root {--gutter-x: 3.888rem;--bodyfontsize: 1rem;}
}