@charset "UTF-8";

*,
::before,
::after {
  box-sizing: border-box;
}
html {
  font-size: 65%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font: 1.6rem "Zen Maru Gothic", serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  background: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url(../img/thisisme.png) no-repeat left 2rem bottom 2rem/clamp(200px,40vw,30%) #999;
}
.content {
  max-width: 1100px;
  margin: auto;
}
h1 {
  font: 3rem "RocknRoll One", serif;
  margin: 0;
  text-align: center;
  letter-spacing: -0.15em;
  padding-left: 0.5em;
  overflow: hidden;
}
h1 span {
  display: inline-block;
}
h1 span:first-child {
  vertical-align: -10px;
  font-size: 6rem;
  rotate: -30deg;
}
h1 span:nth-child(2) {
  vertical-align: 10px;
  rotate: -20deg;
}
h1 span:nth-child(3) {
  vertical-align: -20px;
  font-size: 8rem;
}
h1 span:nth-child(4) {
  vertical-align: -40px;
  rotate: -20deg;
}
h1 span:nth-child(5) {
  vertical-align: middle;
  font-size: 8rem;
}
h1 span:nth-child(6) {
  vertical-align: 20px;
  font-size: 6rem;
}
h1 span:nth-child(7) {
  vertical-align: 50px;
  font-size: 10rem;
  rotate: 10deg;
}
h1 span:nth-child(8) {
  vertical-align: middle;
  rotate: 30deg;
}
h1 span:last-child {
  vertical-align: -60px;
  rotate: 40deg;
  font-size: 8rem;
  margin-left: -30px;
}
main .content { text-align: center;}
footer { text-align: center;}
small { font-size: 1.6rem;}


@media (min-width: 600px) {
  h1 { font-size: 8rem;}
  h1 span:first-child { font-size: 10rem;}
  h1 span:nth-child(5) { font-size: 11rem;}
  h1 span:nth-child(7) { font-size: 12rem;}
  h1 span:last-child { font-size: 12rem;}
  }
@media (min-width: 1024px) {
  h1 { font-size: 10rem;}
  h1 span:first-child { font-size: 14rem;}
  h1 span:nth-child(5) { font-size: 15rem;}
  h1 span:nth-child(7) { font-size: 20rem;}
  h1 span:last-child { font-size: 16rem;}
}