:root {
      --vh: 1vh;
      --blue: #0000ff;
      --white: #FFFFFF;
      --textOne: 3rem;
      --textTwo: 1rem;
      --lh: 5.5;
      --lt: calc(50dvh - 2.5rem)
  }

  @media screen and (min-width:992px) {
      :root {
          --textOne: 5rem;
          --textTwo: 1.5rem;
          --lh: 4.5;
          --lt: calc(50dvh - 3rem)
      }
  }

  .section {
      height: calc(var(--vh) * 100);
  }

  .roboto-mono {
      font-family: "Roboto Mono", monospace;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
  }

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

  .bg-blue {
      background-color: #0000ff;
  }

  .text-white {
      color: var(--white) !important;
  }

  .text-blue {
      color: var(--blue) !important;
  }

  .left {
      text-align: right;
      position: relative;

  }

  .right {
      text-align: left;
      position: relative;

  }

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

  a:hover {
      color: var(--blue);
  }

  /* Scrollbars
--------------------------------------------- */
  html {
      scrollbar-width: none;
      scroll-behavior: auto;
  }

  body {
      -ms-overflow-style: none;
      font-family: "Roboto Mono", monospace;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }

  body::-webkit-scrollbar {
      display: none;
  }

  html,
  body {
      padding: 0;
      margin: 0;
      height: 100%;
      overflow: hidden;
      /* overscroll-behavior: none;*/
  }

  body {
      padding: 0;
      color: var(--white);
      width: 100%;
  }

  .site {
      display: flex;
      width: 100%;
      flex-direction: column;
      will-change: transform;
      position: relative;
      touch-action: none;
  }

  .site-description {
      position: absolute;
      z-index: 10;
      right: 50%;
      transform: translate(50%, -50%);
      top: 80dvh;
  }

  @media screen and (min-width:1080px) {
      .site-description {
          right: 20%;
          top: 50%;
          font-size: var(--textTwo);
      }

  }

  .section {
      width: 100%;
      height: 100dvh;
      position: relative;
      line-height: 1;
      overflow-y: hidden;
  }



  .dots {
      position: absolute;
      left: 50%;
      top: 50dvh;
      transform: translate(-50%, -50%);
      font-size: var(--textOne);
      line-height: 1;
      color: var(--white);
      text-shadow: none;
      z-index: 30;
      text-align: center;
      width: 300px;
      pointer-events: none;
  }

  .one-one {
      will-change: transform;
  }

  /* Section One */

  .section-one::before {
      content: '';
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      pointer-events: none;
  }

  .section-one::after {
      content: '';
      position: absolute;
      z-index: 2;
      bottom: 0;
      left: 0;
      width: 100%;
      pointer-events: none;
  }

  .section-one::before,
  .section-one::after {
      background-color: var(--blue);
      padding-top: calc(50dvh - 2rem);
  }

  .section-one .one-one {
      width: 100%;
      font-size: var(--textOne);
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3rem;
  }

  .section-one .artemis div {
      color: var(--white);
      float: right;
  }

  .section-one .one-one div div:last-child {
      position: absolute;
      top: 0;
      float: right;
  }

  .section-one .one-one div.left div {
      right: 0
  }

  .section-one .one-one div.right span {
      left: 0
  }

  /* Section Services */


  .section-services ul.one-one {
      list-style: none;
      position: relative;
      font-size: var(--textTwo);
      line-height: var(--lh);
      padding: 0;
      top: var(--lt);
      margin: 0;
      display: block;
      left: 0;
      text-transform: uppercase;
      width: 100%;
  }

  .section-services .one-one li {
      width: 100%;
      display: flex;
      gap: 3rem
  }

  .section-services .one-one li span {
      width: 50%;
  }

  .section-services .site-contact {
      font-size: var(--textTwo);
      position: absolute;
      z-index: 10;
      left: 0%;
      transform: translate(0, -100%);
      top: 100dvh;
      width: 100%;
      background-color: var(--white);
      text-align: center;
  }

  @media screen and (min-width:1080px) {
      .section-services ul.one-one {
          list-style: none;
          position: relative;
          font-size: var(--textTwo);
          line-height: var(--lh);
          padding: 0;
          top: var(--lt);
          margin: 0;
          display: flex;
          flex-direction: column;
          left: calc(50% - 1.5rem);
          transform: translate(-100%, 0);
          text-transform: uppercase;
      }

      .section-services .one-one li {
          text-align: right;
          width: auto;
          display: inline-block;
      }

      .section-services .one-one li span {
          width: auto;
      }

      .section-services .site-contact {
          left: calc(50% + 1.75rem);
          top: 50dvh;
          transform: translate(0, calc(-50% - 1px));
          width: auto;
          text-align: left;
          line-height: var(--lh);
          padding-top: 0.75rem !important;
      }


  }