html {
  font-size: 4pt;
}

body,
footer {
  width: 100vw;
  display: flex;
}
body {
  height: 100vh;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #222;
  background-color: #fcfcfc;
  margin: 0;
}
footer {
  position: fixed;
  bottom: 1em;
}
.lang {
  margin-left: auto;
  margin-right: 1rem;
}
h1,
h2,
h3 {
  padding: 0;
  margin: 0;
}
h4 {
  margin: 1em 0 0;
}
.main {
  max-width: 60vw;
}
.text h1 {
  font-family: Nunito, "FOT-UDMarugo", 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14rem;
  text-transform: uppercase;
  font-weight: 200;
  color: #c2185b;
  margin-left: -3px;
  line-height: 1.5em;
  word-break: keep-all;
}
.text h1 rt,
.text h2 {
  font-size: 3rem;
}
.snowflake-link,
.text h2,
.text h2 a:visited {
  color: #00bcd4;
}
.text h2 {
  font-family: "Roboto Mono", Menlo, Consolas, "Fira Code", monospace;

  font-weight: 300;
}
.text h3,
.text h4 {
  font-family: Roboto, "Source Han Sans", 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 4rem;
}
.text h3 {
  font-weight: 400;
  font-size: 6rem;
  max-width: 500px;
}

.text h3.jp {
  max-width: 550px;
}
.text h4 {
  font-weight: 300;
}
.c-sharp {
  color: #682079;
}
.react {
  color: #00d8ff;
}

.rust {
  color: #dea584;
}
.social {
  display: inline-flex;
  align-content: center;
  font-family: "Roboto Mono", Menlo, Consolas, "Fira Code", monospace;
  font-weight: 300;
  font-size: 3rem;
  padding-right: 1rem;
}
.twitter a,
.twitter a:visited {
  color: #1da1f2;
}
.github a,
.github a:visited {
  color: #333;
}
.medium a,
.medium a:visited {
  color: #000;
}
.steam a,
.steam a:visited {
  color: #000;
}
.mal a,
.mal a:visited {
  color: #2e51a2;
}

.resume a,
.resume a:visited {
  color: #303f9f;
}
.reddit a,
.reddit a:visited {
  color: #ff4500;
}

.lang {
  font-size: 3rem;
}
.lang a,
.lang a:visited {
  font-family: "Roboto Mono", "Source Han Sans", source-han-sans-japanese, Consolas, Menlo, 'Fira Code';
  font-weight: 100;
  color: #555;
}

.seiri-link {
  font-style: italic;
}

a {
  text-decoration: none;
}
i {
  padding-right: 5px;
}

@media screen and (max-width: 814px) {
  .text h1 {
    line-height: 1.2em;
  }
}



/* 
@media screen and (max-width: 866px) {
  .text h1.jp {
    font-size: 13rem;
  }
}


@media screen and (max-width: 806px) {
  .text h1.jp {
    font-size: 12rem;
  }
}



@media screen and (max-width: 768px) {
  .text h1.jp {
    font-size: 14rem;
  }
} */

@media screen and (max-aspect-ratio: 11/15) {
  .text h1 {
    font-size: 36pt;
  }
  .text h3 {
    font-size: 18pt;
    max-width: 350px;
  }
  .social {
    font-size: 9pt;
  }
}

@media screen and (max-width: 768px)
{
  .text h1.jp {
    display: flex;
    flex-direction: column;
  }
}


@media screen and (max-width: 426px)
{
  html {
    font-size: 3pt;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh + 3rem);
  }

  body {
    height: auto;
    padding-top: 10px;
    align-items: center;
    justify-content: flex-start;
  }

  .main {
    max-width: 100vw;
    padding-left: 20px;
    padding-right: 20px;
  }

  .text h2 {
    font-size: 5rem;
  }


  .text h1 {
    font-size: 18rem;
  }

  .text h1.jp {
    font-size: 17rem;
  }

  .text h3 {
    font-size: 8rem;
    max-width: initial;
  }

  .icons {
    padding-top: 5px;
  }

  .text h4 {
    font-size: 5rem;
  }
  .social {
    font-size: 4rem;
  }

  .lang {
    padding-top: 1em;
    font-size: 4rem;
  }
}