* {
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  /* Trigger Chrome GPU acceleration... */
  transform: translateZ(0);
  background: repeating-linear-gradient(
    45deg,
    #000,
    #000 10px,
    #111 10px,
    #111 20px
  );
}

a {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
}

a[disabled] {
  opacity: 0.25;
}

#content {
  width: 100%;
  height: 100%;
}

#content:active > #next-arrow-right {
  transform: rotate(90deg) translateX(-25%);
}

#next-arrow-right {
  display: flex;
  position: absolute;
  top: 30%;
  right: 0%;
  align-items: center;
  opacity: 0.9;
  clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0% 100%);
  transition: right 2s, transform 2s;
  will-change: right, transform;
  background: repeating-linear-gradient(
    -45deg,
    #a4fba6,
    #a4fba6 10px,
    #4ae54a 10px,
    #4ae54a 20px,
    #30cb00 20px,
    #30cb00 30px
  );
  width: 125%;
  height: 15%;
  color: rgba(0, 0, 0, 0.8);
  font-size: 30vh;
  font-family: "Antic Slab", serif;
}

#next-arrow-right:active {
  right: 100%;
}

#next-arrow-right > a {
  margin-right: 10%;
  margin-left: auto;
}

#next-arrow-up {
  display: flex;
  position: absolute;
  top: 100%;
  left: 70%;
  justify-content: center;
  opacity: 0.9;
  clip-path: polygon(50% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
  transition: top 1.5s;
  will-change: top;
  background: repeating-linear-gradient(
    -45deg,
    #ffbaba,
    #ffbaba 10px,
    #ff7b7b 10px,
    #ff7b7b 20px,
    #ff5252 20px,
    #ff5252 30px
  );
  width: 15vh;
  height: 100%;
  color: rgba(0, 0, 0, 0.8);
  font-size: 30vh;
  font-family: "Antic Slab", serif;
}

#next-arrow-up > a {
  margin-top: 10vh;
  writing-mode: vertical-rl;
}

#next-arrow-right:active ~ #next-arrow-up {
  top: 0%;
}

#prev-arrow-left {
  display: flex;
  position: absolute;
  top: 50%;
  left: 0%;
  align-items: center;
  opacity: 0.9;
  clip-path: polygon(10% 0, 100% 0%, 100% 100%, 10% 100%, 0% 50%);
  transition: left 2s;
  will-change: left;
  background: repeating-linear-gradient(
    45deg,
    #71c7ec,
    #71c7ec 10px,
    #1ebbd7 10px,
    #1ebbd7 20px,
    #189ad3 20px,
    #189ad3 30px
  );
  width: 100%;
  height: 15%;
  color: rgba(0, 0, 0, 0.8);
  font-size: 30vh;
  font-family: "Antic Slab", serif;
}

#prev-arrow-left:active {
  left: 100%;
}

#prev-arrow-left > a {
  margin-right: auto;
  margin-left: 10%;
}

#prev-arrow-down {
  display: flex;
  position: absolute;
  bottom: 100%;
  left: 20%;
  justify-content: center;
  opacity: 0.9;
  clip-path: polygon(0 90%, 0 0, 100% 0, 100% 90%, 50% 100%);
  transition: bottom 1.5s;
  will-change: bottom;
  background: repeating-linear-gradient(
    45deg,
    #fff9ae,
    #fff9ae 10px,
    #f8ed62 10px,
    #f8ed62 20px,
    #e9d700 20px,
    #e9d700 30px
  );
  width: 15vh;
  height: 100%;
  color: rgba(0, 0, 0, 0.8);
  font-size: 30vh;
  font-family: "Antic Slab", serif;
}

#prev-arrow-down > a {
  margin-top: auto;
  margin-bottom: 10vh;
  writing-mode: vertical-lr;
}

#prev-arrow-left:active ~ #prev-arrow-down {
  bottom: 0%;
}

#published {
  display: none;
}