html {
  scroll-behavior: smooth;
  overflow: hidden; }

body {
  font-size: 0;
  margin: 0; }

#container {
  -webkit-transition: 640ms;
  -o-transition: 640ms;
  transition: 640ms; }

section {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  section:nth-of-type(1) {
    background-image: url(img/bg-monsterhunter.jpg); }
  section:nth-of-type(2) {
    background-image: url(img/bg-openworld.jpg); }
  section:nth-of-type(3) {
    background-image: url(img/bg-buy.jpg); }
  section:nth-of-type(4) {
    background-image: url(img/bg-map.jpg); }
  section:nth-of-type(5) {
    background-color: orange; }
  section:nth-of-type(6) {
    background-color: blue; }
  section:nth-of-type(7) {
    background-color: pink; }
  section:nth-of-type(8) {
    background-color: green; }
  section img {
    max-width: 25vw; }

#side {
  position: fixed;
  z-index: 999;
  right: 2.5rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }
  #side * {
    -webkit-transition: 120ms ease;
    -o-transition: 120ms ease;
    transition: 120ms ease; }
  #side > div {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-color: rgba(0, 0, 0, 0.75);
    width: 1.250rem;
    height: 1.250rem;
    padding: 0.500rem;
    cursor: pointer; }
    #side > div > div {
      width: calc(100% - 0.250rem);
      height: calc(100% - 0.250rem);
      border: 0.125rem solid rgba(255, 255, 255, 0.25);
      position: relative; }
      #side > div > div > div {
        width: 0.500rem;
        height: 0.500rem;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%) scale(0);
        -ms-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0); }
    #side > div.active > div {
      border-color: #ffffff; }
      #side > div.active > div > div {
        background-color: white;
        -webkit-transform: translate(-50%, -50%) scale(1);
        -ms-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1); }
    #side > div:not(:last-of-type) {
      margin-bottom: 1.750rem; }