@font-face {
  font-family: "Ribeye";
  font-style: normal;
  font-weight: 400;
  src: local("Ribeye"),
       url("ribeye.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url("ribeye.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto Slab"),
       url("roboto-slab.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url("roboto-slab.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans Japanese"),
       url("noto-sans-jp.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url("noto-sans-jp.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
.japanese {
  font-family: "Noto Sans Japanese", sans-serif;
  color: #999;
}
body {
  font-family: "Roboto Slab", serif;
  font-size: 1.2rem;
  color: #333;
}
.m-0 {
  margin: 0;
}
.fullscreen {
  min-height: 100vh;
}
.grid {
  display: grid;
}
.text-primary {
  color: #6c3;
}
.text-white {
  color: #efd;
}
a {
  color: #6c3;
}
a:hover, a:focus {
  color: #5b2;
}
a:active {
  color: #4a1;
}
.bg-primary {
  background: #6c3;
  color: #efd;
  text-shadow: 1px -1px 2px rgba(0, 0, 0, 0.3);
}
.social {
  position: absolute;
  top: 2rem;
  right: 2rem;
}
.nav a {
  display: block;
  opacity: 0.7;
}
.nav a:hover, .nav a:focus {
  opacity: 0.9;
}
.nav a:active {
  opacity: 1;
}
.nav a object {
  pointer-events: none;
}
.text-center {
  text-align: center;
}
.grid-center {
  place-self: center;
  margin: 10px;
}
#landing img {
  position: relative;
  max-width: 800px;
  width: 100%;
  height: auto;
  display: block;
}
h1, h2 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-family: "Ribeye", cursive;
}
h1 {
  font-size: 350%;
}
h2 {
  font-size: 200%;
}
.container {
  max-width: 42rem;
  padding: 0 1rem;
  margin: 2rem 0;
  box-sizing: border-box;
  width: 100%;
}

@media only screen and (max-width: 480px) {
  body {
    font-size: 1rem;
  }
  .social {
    top: 1rem;
    right: 1rem;
  }
}