body {
  margin: 0;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  background: #fff7b8 url("osaka.png") repeat;
  background-size: 82px;
}

main {
  max-width: 760px;
  margin: 14px auto;
  padding: 12px;
  background: #fffef2;
  border: 3px solid #000;
}

h1 {
  margin: 0;
  font-size: clamp(1.6rem, 6vw, 2.8rem);
}

.osaka {
  width: 58px;
  border: 2px solid #000;
  vertical-align: middle;
}

.osaka.big {
  width: 84px;
}

.wall {
  margin-top: 10px;
}

pre,
textarea {
  width: 100%;
  box-sizing: border-box;
  border: 2px dashed #000;
  background: #fff;
}

button {
  border: 2px solid #000;
  background: #7fffd4;
  font-weight: bold;
}

.ticker {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  background: #fff;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

.ticker-track {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 12s linear infinite;
}

.reverse .ticker-track {
  animation-direction: reverse;
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}