@charset "UTF-8";

/* global */

body {
  background-image: url(./images/bg-index.jpg);
  background-attachment: scroll;
  margin-top: 22%;
}

body:after {
  background: url(./images/bg-index-bottom.jpg) bottom center no-repeat;
  background-size: 100% auto;
  content: " ";
  display: block;
  width: 100%;
  height: 108%;
  position: absolute;
  bottom: 0;
  z-index: -1;
}


/* title */

h1 {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 100;
}

h1 img {
  width: 70%;
}


/* navigation menu */

#menu {
  margin-bottom: 7em;
}


/* releases */

section#releases {
  margin-top: 5em;
}



/* tweets */

.twitter-timeline {
  float: right;
}

@media (max-width: 600px) {
  .twitter-timeline {
    float: none;
  }
}


/* characters */

p.character#mint1 {
  left: 0%;
  top: -18em;
  z-index: 120;
}
p.character#mint1 img {
  width: 19em;
}

p.character#ohno {
  right: 0%;
  top: -18em;
}
p.character#ohno img {
  width: 22em;
}

p.character#mint2 {
  left: -2.5em;
  top: -13em;
}
p.character#mint2 img {
  width: 20em;
}

p.character#tanimachi {
  right: 8%;
  top: -7em;
}
p.character#tanimachi img {
  width: 27em;
}


/* small-screen */

@media (max-width: 600px) {
  h1 img {
    width: 90%;
  }

  #menu {
    margin-bottom: 1em;
  }

  p.character#mint1 {
    float: left;
    margin-left: -1em;
    top: 0;
  }
  p.character#mint1 img {
    width: 11em;
  }

  p.character#ohno {
    float: right;
    top: 0;
  }
  p.character#ohno img {
    width: 12.5em;
  }

  p.character#mint2 {
    float: left;
    left: 0;
    top: 0;
  }
  p.character#mint2 img {
    width: 12em;
  }

  p.character#tanimachi {
    float: right;
    right: 0;
    top: 0;
  }
  p.character#tanimachi img {
    width: 16em;
  }
}