html, body {
  height: 100%;
}

img {
  max-width: 100%;
  display: block; margin: 0 auto;
  text-align: center;
}

audio {
  max-width: 100%;
  display: block; margin: 0 auto;
  text-align: center;
}

footer{

}

a {
  /*color: blue;
  text-decoration-line: none;*/
}

.column {
  float: left;
  width: 33.33%;
  color: white;
}

.column-text {
  float: left;
  width: 33.33%;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: Haopsoweb;
  font-size: 16px;
  line-height: 140%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


@font-face {
    font-family: 'Haopsoweb';
    src: url('./Haopsoweb-Regular.otf') format('opentype');
}

@media screen and (max-width: 600px) {
  .column-text {
    height: 150%;
    font-size: 14px;
    line-height: 130%;
  }
  iframe {
    width: 100px;
    height: 160px;
  }
}

/*
<b class="font">도시의 무늬</b><br>
*/

/*
    <footer>
      <div class="column">
        ○
      </div>
      <div class="column">
        ○
      </div>
      <div class="column-text" position="absolute">
        <a href="#section1">위로</a>
      </div>
    </footer>
*/