@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --ite-color-0: #ffffff;
  --ite-color-1: #1cc0a0; /* #fcb941 */
  --ite-color-2: #222222;
  --ite-color-3: #eaeaea; /* thin line color */
  --ite-color-4: rgba(0, 0, 0, 0.35); /* footer text color */
  --ite-color-5: #fcfcfc; /* latest release item background color */
  --ite-color-6: #dff8f6; /* single-product.php tags item background color (hover) */
  --ite-color-7: #c9e8dd; /* single-product.php tags item background color */
  --ite-color-8: #d3d3d3; /* single-product.php version title background color */
  --ite-color-9: #919191; /* single-product.php version title color */
}

html {
  font-size: 16px;
}

body {
  background-color: var(--ite-color-0);
  color: var(--ite-color-2);
  font-family: 'Space Mono', monospace;
}

a {
  text-decoration: none;
  color: var(--ite-color-2);
  transition: all 0.25s;
}

a:hover {
  color: var(--ite-color-1);
}

::-moz-selection {
  color: var(--ite-color-2);
  background: var(--ite-color-1);
}

::selection {
  color: var(--ite-color-2);
  background: var(--ite-color-1);
}

.main-content .page-header {
  font-size: 1.75rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* Bootstrap */
.w-10 {
  width: 10%!important;
}

.w-20 {
  width: 20%!important;
}

.w-70 {
  width: 70%!important;
}

.w-90 {
  width: 90%!important;
}

.ratio-3x2 {
  --bs-aspect-ratio: calc(2 / 3 * 100%);
}

.ratio-16x10 {
  --bs-aspect-ratio: calc(10 / 16 * 100%);
}

.btn-ite-style {
  font-size: 0.8rem;
  color: var(--ite-color-3);
  background: var(--ite-color-2);
  border: unset;
  border-radius: 0.5rem;
  padding: 0.5rem 3rem;
  transition: all 0.25s;
}

.btn-ite-style:hover {
  color: var(--ite-color-0);
  background: var(--ite-color-1);
}

/* Hover */
/* Underline From Center */
.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: var(--ite-color-1);
  height: 2px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}