#page {
  display: grid;
  grid-template-columns: 5fr 4fr;
}
#page .navigator {
  position: relative;
  min-height: 600px;
  opacity: 1;
}
body.notCached #page .navigator {
  transition: opacity .3s;
}
body.loading #page .navigator {
  opacity: 0;
}
#page .navigator .background {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform-style: preserve-3d;
}
#page .navigator .background::before,
#page .navigator .background::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-repeat: no-repeat;
  background-size: contain;
}
#page .navigator .background::before {
  background-image: url(../images/gangaa.l.png);
  background-position: top left 50%;
  animation: bg-left 2s ease-in-out infinite alternate;
}
#page .navigator .background::after {
  background-image: url(../images/gangaa.r.png);
  background-position: top right 50%;
  animation: bg-right 2s ease-in-out infinite alternate;
}
#page .navigator .links {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  left: 0; right: 0;
  margin: auto;
}
#page .navigator .links span {
  display: inline-block;
  position: absolute;
  top: 40%;
  padding: 0 6px 4px;
}
#page .navigator .links span a {
  display: inline-block;
  font-size: 140%;
  text-decoration: none;
  border-bottom: 2px dotted transparent;
  line-height: 0.95;
  transition: color .15s, border .15s;
}
#page .navigator .links span a:hover {
  _border-bottom: 2px solid #3b545c;
}
#page.loading .navigator .bracelet,
#page.loading .navigator .necklace {
  _animation: none;
}
#page .navigator .bracelet {
  left: 5%;
  animation: link-left 2s ease-in-out infinite alternate;
  animation-direction: alternate;
}
#page .navigator .necklace {
  right: 5%;
  animation: link-right 2s ease-in-out infinite alternate;
  animation-direction: alternate;
}

#page .about {
  padding: 20% 20% 0 0;
}

@media (max-width: 1399.98px) {
}
@media (max-width: 1199.98px) {
}
@media (max-width: 991.98px) {
}
@media (max-width: 767.98px) {
  #page {
    grid-template-columns: 1fr;
    flex-grow: unset;
    padding: 0 15px;
  }
  #page .navigator {
    min-height: auto;
  }
  #page .navigator .links {
    position: relative;
  }
  #page .navigator .links span a {
    font-size: 120%;
  }
  #page .about {
    grid-row-start: 1;
    padding: 30px 15px;
  }
}
@media (max-width: 575.98px) {
}

@keyframes bg-left {
  from { transform: rotateY(-10deg) translateX(-1px); }
  to { transform: rotateY(0deg) translateX(1px); }
}
@keyframes bg-right {
  from { transform: rotateY(0deg) translateX(-1px); }
  to { transform: rotateY(10deg) translateX(1px); }
}
@keyframes link-left {
  from { transform: scale(1.0); }
  to { transform: scale(1.05); }
}
@keyframes link-right {
  from { transform: scale(1.05); }
  to { transform: scale(1.0); }
}