@font-face {
  font-family: "Handjet[egrd,eshp,wght]";
  src: url('../images/') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --light-blue: teal;
  --white-smoke: #fdffff;
  --dark-grey: black;
  --pale-goldenrod: #c3c3c3;
  --lime: #010081;
  --white: #c3c3c3;
  --violet: black;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

body {
  color: #333;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Inconsolata, monospace;
  font-size: 32px;
  font-weight: 300;
  line-height: 36px;
}

a {
  color: var(--light-blue);
  text-decoration: none;
}

.body {
  background-color: var(--white-smoke);
  font-family: VT323, sans-serif;
  font-weight: 400;
}

.desktop-wrapper {
  background-color: var(--light-blue);
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-family: VT323, sans-serif;
  font-weight: 400;
  display: flex;
  position: absolute;
}

.desktop-icons-wrapper {
  z-index: 1;
  width: 10%;
  padding-top: 2.8rem;
  padding-left: 2rem;
  position: absolute;
  inset: 0% auto auto 0%;
}

.desktop-icon-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: .3rem;
  display: flex;
}

.desktop-icon-wrapper.is-portfolio-icon {
  color: var(--light-blue);
  text-decoration: none;
}

.icons-heading {
  color: var(--dark-grey);
  text-transform: uppercase;
  margin-top: 6px;
  margin-bottom: 6px;
  font-family: VT323, sans-serif;
  font-size: 1.8rem;
  line-height: 3rem;
}

.navigation-bar {
  z-index: 10;
  background-color: var(--white-smoke);
  justify-content: space-between;
  align-items: stretch;
  height: auto;
  padding-top: .9rem;
  padding-bottom: .9rem;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.desktop-icons {
  width: 5rem;
}

.menu-button {
  box-shadow: -3px -3px 0 0 var(--pale-goldenrod), 2px 2px 0 1px var(--pale-goldenrod);
  justify-content: center;
  align-items: center;
  width: 8rem;
  margin: 0 1rem;
  padding: .25rem 0;
  font-weight: 400;
  display: flex;
}

.menu-title {
  color: var(--lime);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.nav-bar-divider {
  background-color: var(--white-smoke);
  box-shadow: inset -3px -3px 0 0 var(--white), 2px 2px 0 0 var(--pale-goldenrod);
  width: .3rem;
  min-height: 2rem;
  display: block;
}

.popup {
  background-color: var(--white-smoke);
  flex-flow: column;
  justify-content: center;
  width: 40rem;
  height: auto;
  max-height: none;
  padding: .4rem;
  display: none;
  position: absolute;
  inset: 10% auto auto 20%;
}

.popup.is-services {
  z-index: 20;
  display: none;
  top: 7%;
  left: 14%;
}

.popup.is-contact {
  z-index: 25;
  width: auto;
  display: none;
  top: 31%;
  left: 62%;
}

.popup.is-portfolio {
  z-index: 40;
  display: none;
  top: 10%;
  left: 34%;
}

.popup.credit {
  z-index: 150;
  width: 25rem;
  display: none;
}

.popup-top-bar {
  background-color: var(--lime);
  cursor: grab;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 .3rem;
  padding: .4rem;
  display: flex;
}

.popup-title {
  color: #fdffff;
  margin-left: .3rem;
  font-size: 1.2rem;
  line-height: 1.3rem;
}

.popup-icon {
  width: 1rem;
  height: 1rem;
}

.popup-title-wrap {
  display: flex;
}

.popup-button-wrap {
  align-items: center;
  display: flex;
}

.popup-button {
  background-color: var(--white-smoke);
  box-shadow: -2px -2px 0 0 var(--white), 2px 2px 0 0 var(--dark-grey);
  width: 1.5rem;
  height: 1.5rem;
  margin-left: .3rem;
  margin-right: .3rem;
}

.icon {
  margin-right: .6rem;
}

.services-wrapper {
  background-color: var(--white);
  flex-direction: column;
  align-items: center;
  padding-bottom: 1rem;
  padding-left: 2.6rem;
  padding-right: 2.6rem;
  display: flex;
}

.services-image {
  padding-top: .3rem;
  padding-bottom: 1rem;
}

.contact-wrapper {
  background-color: var(--white);
  padding: .9rem 1.7rem;
}

.contact-text-wrapper {
  justify-content: space-around;
  align-items: center;
  display: flex;
}

.icon-text-wrapper {
  align-items: center;
  display: flex;
}

.link-icon {
  width: 1rem;
  margin-right: .3rem;
}

.start-menu-wrap {
  background-color: var(--white-smoke);
  box-shadow: inset 3px 2px 0 0 var(--white), 2px 2px 0 0 var(--dark-grey);
  width: auto;
  min-height: 3rem;
  padding: 1rem 1rem 1rem 3rem;
  display: none;
  position: absolute;
  inset: auto auto 98% 0%;
}

.menu-link-title {
  color: var(--violet);
  font-size: 2rem;
  line-height: 2rem;
}

.start-menu-item-wrap {
  align-items: center;
  padding: .7rem;
  display: flex;
}

.start-menu-item-wrap:hover {
  background-color: #a7a7a7bd;
}

.start-icon {
  width: 2rem;
  margin-right: .5rem;
}

.divider {
  background-color: var(--dark-grey);
  width: auto;
  height: .25px;
}

.start-strip {
  background-color: var(--lime);
  align-items: flex-end;
  width: 1.8rem;
  height: auto;
  margin-top: .3rem;
  margin-left: .3rem;
  padding-left: 4px;
  display: flex;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.text-block {
  color: #fdffff;
  font-size: 14px;
  position: absolute;
  transform: translate(0, -10px)rotate(-90deg);
}

.clock-wrapper {
  align-items: center;
  width: auto;
  margin-right: 10rem;
  padding-right: 0;
  display: flex;
}

.clock {
  width: auto;
  min-width: 12rem;
  min-height: 2rem;
  margin-left: .5rem;
  padding-right: 0;
  font-size: 2rem;
  line-height: 2rem;
}

.menu-side-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}

.logo-wrap {
  cursor: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.logo-center {
  z-index: 1;
  display: block;
  position: relative;
  transform: rotate(0);
}

.logo-center.text {
  top: 35%;
}

.pre-looader {
  z-index: 200;
  background-color: var(--light-blue);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: none;
  position: absolute;
}

.loading-block-wrapper {
  border: 1px solid var(--white-smoke);
  flex-direction: row;
  justify-content: center;
  width: 19.2rem;
  height: 2rem;
  padding: .2rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.loading-block {
  background-color: var(--lime);
  width: auto;
  min-width: 1.1rem;
  height: auto;
  margin-left: .125rem;
  margin-right: .125rem;
}

.loading-text {
  color: var(--white-smoke);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.loading-cover {
  background-color: var(--light-blue);
  width: 20rem;
  height: 2rem;
  position: absolute;
}

.top-black {
  z-index: 300;
  background-color: var(--dark-grey);
  height: 60vh;
  position: absolute;
  inset: -73% 0% 0%;
}

.shut-down {
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.bottom-black {
  z-index: 300;
  background-color: var(--dark-grey);
  height: 50vh;
  position: absolute;
  inset: 101% 0% 0%;
}

.right-black {
  z-index: 300;
  background-color: var(--light-blue);
  width: 50vw;
  position: absolute;
  inset: 0% 162% 0% 0%;
}

.left-black {
  background-color: var(--light-blue);
  width: 50vw;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.clock-icon {
  padding-left: .5rem;
  padding-right: .5rem;
}

.side-black-left {
  z-index: 300;
  background-color: #000;
  width: 70vh;
  height: 20vh;
  display: none;
  position: absolute;
  inset: auto 0 auto -50%;
}

.side-black-left.left {
  inset: auto -49% 0% auto;
}

.side-black-left.right {
  inset: auto -56% auto auto;
}

.side-black-right {
  z-index: 300;
  background-color: var(--dark-grey);
  width: 70vh;
  height: 20vh;
  display: none;
  position: absolute;
  right: -49%;
}

.looping-text-wrapper {
  justify-content: flex-start;
  align-items: center;
  width: 80vw;
  display: flex;
  overflow: hidden;
}

.infinity-text {
  text-align: center;
  width: auto;
  min-width: 60vw;
  font-size: 1.5rem;
}

.credit-content {
  background-color: var(--white);
  align-items: flex-start;
  padding: 2rem;
  display: flex;
}

.credit-text {
  padding-left: 1rem;
  font-size: 1rem;
}

.icon-cat {
  width: 2rem;
  height: auto;
}

.link {
  color: var(--lime);
}

.link-2, .link-3, .link-4 {
  font-size: 18px;
}

@media screen and (max-width: 991px) {
  .start-menu-wrap, .start-menu-item-wrap.is-shutdown, .top-black, .shut-down, .bottom-black, .side-black-left, .side-black-right {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .desktop-icons-wrapper {
    width: 50%;
  }

  .desktop-icon-wrapper.is-portfolio-icon {
    width: auto;
  }

  .desktop-icons {
    width: 3rem;
    max-width: none;
  }

  .popup.is-services {
    width: auto;
    display: none;
  }

  .popup.is-contact {
    display: none;
    inset: 31% auto auto 6%;
  }

  .popup.credit, .start-menu-wrap {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .desktop-wrapper {
    z-index: auto;
    background-color: var(--light-blue);
    flex-direction: column;
    height: 100vh;
  }

  .desktop-icons-wrapper {
    z-index: 0;
    padding-top: 0;
    padding-left: .6rem;
    display: block;
  }

  .desktop-icon-wrapper.is-portfolio-icon {
    position: static;
  }

  .icons-heading {
    z-index: 1;
    position: relative;
  }

  .navigation-bar {
    z-index: 10;
    height: auto;
    overflow: visible;
  }

  .nav-bar-divider {
    display: none;
  }

  .popup.is-services {
    z-index: 20;
    display: none;
  }

  .popup.is-contact {
    z-index: 25;
  }

  .popup.is-portfolio {
    z-index: 30;
    width: auto;
    display: none;
    inset: 6% auto auto 0%;
  }

  .popup.credit {
    width: auto;
    display: none;
    left: 0%;
  }

  .contact-text-wrapper {
    flex-direction: column;
  }

  .start-menu-wrap {
    z-index: 100;
    display: none;
    position: absolute;
    bottom: 101%;
  }

  .clock {
    display: flex;
  }

  .logo-center {
    z-index: 1;
    max-width: 20%;
    display: none;
    position: relative;
    top: auto;
  }

  .logo-center.text {
    max-width: 50%;
    position: relative;
    top: auto;
  }

  .looping-text-wrapper {
    display: none;
  }
}

#w-node-_3a973390-1520-4176-5a62-4180d3048a9e-06cf6857, #w-node-_0e478676-87bb-448e-486b-f44458bfeffc-06cf6857, #w-node-e09c84e5-12eb-2f7b-9c6c-5051d3277eea-06cf6857, #w-node-d3aa7111-d0ce-2b05-b4eb-b34224b895de-06cf6857 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}


@font-face {
  font-family: 'Handjet[egrd,eshp,wght]';
  src: url('../images/') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}