html, body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Sen";
}

* {
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  cursor: none;
  user-select: none;
  -webkit-user-drag: none;
}

#tsparticles {
  z-index: 80;
  position: fixed;
  width: 100vw;
  height: 75vh;
}

#main {
  display: flex;

  .part {
    flex: 1;

    .section {
      width: 100%;
      height: 100vh;
      position: relative;
      overflow: hidden;

      img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        position: absolute;
        left: var(--x);
        pointer-events: none;
      }
    }
  }
}

.cursor {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: white;
  position: absolute;
  z-index: 999;
  pointer-events: none;
  mix-blend-mode: difference;

  &-f {
    width: var(--size);
    height: var(--size);
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("data:image/svg+xml,<svg width='47' height='47' viewBox='0 0 47 47' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M42.4202 42.4202C38.8403 46 33.3594 46 23.5 46C13.6406 46 8.15966 46 4.57983 42.4202C1 38.8403 1 33.3594 1 23.5C1 13.6406 1 8.15966 4.57983 4.57983C8.15966 1 13.6406 1 23.5 1C33.3594 1 38.8403 1 42.4202 4.57983C46 8.15966 46 13.6406 46 23.5C46 33.3594 46 38.8403 42.4202 42.4202Z' stroke='white'/></svg>");
    background-size: cover;
    mix-blend-mode: difference;
    pointer-events: none;
    opacity: .5;
  }
}

.buttons {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 199;

  button {
    border: none;
    background-size: contain;
    background: url("data:image/svg+xml,<svg width='10' height='29' viewBox='0 0 10 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0V27L1 17.4857' stroke='white' stroke-width='2'></svg>") no-repeat;
    background-position: center;
    width: 10px;
    height: 30px;
    display: block;
    margin: 20px 0;
    padding: 0 15px;
    transition-duration: .6s;

    &.next {
      transform: scaleY(-1);
    }

    &.prev:active {
      transform: translateY(8px);
    }

    &.next:active {
      transform: scaleY(-1) translateY(8px);
    }
  }
}

h1 {
  position: absolute;
  top: 40%;
  transform: translateY(-40%);
  left: 0;
  right: 0;
  margin: auto;
  z-index: 199;
  color: white;
  text-align: center;
  font-size: 2.6em;
  /*mix-blend-mode: overlay;*/
  pointer-events: none;
}

.content {
  width: 90%;
  position: absolute;
  text-align: center;
  top: 45%;
  left: 0;
  right: 0;
  margin: auto;
  color: white;
  z-index: 199;
  font-size: 0.8em;

  h5 {
  font-size: 1.5em;
  }
  p {
    margin: .8em auto;
  }

  kbd {
    width: 15px;
    height: 15px;
    border: 1px solid white;
    display: inline-block;
    border-radius: 3px;
    font-size: .9em;
    vertical-align: text-top;
  }

  a {
    color: rgba(227, 227, 227, 0.78);
    text-decoration: none;
    border-bottom: 1px solid currentColor;

    &:hover {
      padding-bottom: 1px;
    }
  }
}
.black-full-width-footer {
  width: 100%;
  position: absolute;
  background-color: black;
  color: black;
  top: 75%;
  left: 0;
  bottom: 0;
}
.right-footer {
  width: 90%;
  position: absolute;
  text-align: left;
  top: 5%;
  left: 70%;
  right: 0;
  margin: auto;
  color: white;
  background-color: #000000;
  z-index: 9999;
  font-size: 1em;

  p {
    margin: .8em auto;
  }

  kbd {
    width: 15px;
    height: 15px;
    border: 1px solid white;
    display: inline-block;
    border-radius: 3px;
    font-size: .9em;
    vertical-align: text-top;
  }

  a {
    color: rgba(227, 227, 227, 0.78);
    text-decoration: none;
    border-bottom: 1px solid currentColor;

    &:hover {
      padding-bottom: 1px;
    }
  }
}