@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Kanit', sans-serif;
  margin: 0;
}

.logo {
  left: 20px;
  position: fixed;
  top: 20px;
}
.logo > img {
  max-width: 150px;
  width: 10vw;
}
.logo > img + img {
  margin-left: -25%;
}

.footer {
  bottom: 0;
  padding: 12px 15px;
  position: fixed;
  text-align: right;
  width: 100%;
}
.footer a, 
.footer p {
  color: #eee;
  font-size: 2vw;
  margin: 0;
}

.contents {
  bottom: 10%;
  position: fixed;
  right: 80px;
  text-align: right;
}
h1 {
  -webkit-text-stroke: #eee 5px;
  color: #710000;
  font-size: 10vw;
  font-style: italic;
  line-height: 1em;
  margin: 0;
  text-shadow: 5px 5px 3px #333;
}
h2 {
  -webkit-text-stroke: #333 1px;
  color: #eee;
  font-size: 4vw;
  line-height: 1;
  margin: 0;
  text-shadow: 3px 3px 2px #666;
}
h2 > span {
  -webkit-text-stroke-color: #eee;
  color: #FFcc00;
  display: inline-block;
  font-size: 8vw;
}
.update-date {
  background: #eee;
  border-radius: 50px;
  box-shadow: 1px 1px 2px #333;
  color: #666;
  display: inline-block;
  font-size: 1.5vw;
  margin: 0 auto;
  padding: 2px 20px;
}

@media (orientation: portrait) {
  .logo > img {
    width: 12vw;
  }
  .footer a, 
  .footer p {
    font-size: 4vw;
  }

  .contents {
    bottom: 6%;
    right: 60px;
  }
  h1 {
    font-size: 15vw;
  }
  h2 {
    font-size: 5vw;
  }
  h2 > span {
    font-size: 12vw;
  }
  .update-date {
    font-size: 2vw;
  }
}