@font-face {
    font-family: ApercuRegular;
    src: url(fonts/apercu_regular.otf);
}
@font-face {
    font-family: ApercuBold;
    src: url(fonts/apercu_bold.otf);
}

::selection {
    background-color: #000000;
    color: #ffffff;
}
body {
    margin:0;
    font-family: ApercuRegular;
  }

h1 {
    font-size: 36px;
    font-family: ApercuRegular;
}
h2 {
    font-size: 20px;
}
.byline {
    font-size: 20px;
    line-height: 26px;
}
.date {
    font-size: 14px;
    color: #626262;
    margin-bottom: 20px;
}
p {
    font-size: 14px;
    line-height: 17px;
}
b {
    font-family: ApercuBold;
}
img {
    width: 100%;
    mix-blend-mode: multiply;
}
.button {
    border-radius: 5px;
    border: 1px solid #000000;
    display: inline;
    padding: 5px;
    cursor: pointer;
    transition: all 0.25s;
}
.button:hover {
    color: #ffffff;
    background-color: #000000;
}

/* Bridge */
.bridge-section {
    font-size:14px;
    height: 460px;
    width: 450px;
    padding: 15px;
    box-sizing: border-box;
    text-wrap: wrap;
}
.box {
    background-color: #bcc2b8;
    justify-content: space-between;
}
.under-the-bridge {
    width: 420px;
    margin-left: 15px;
}
/* Original Code */
  #container .box {
    width:460px;
    height:auto;
    display: inline-block;
    position:relative;
  }
  #container {
    overflow-y:scroll;
    overflow-x:hidden;
    transform: rotate(270deg) translateX(-100%);
    transform-origin: top left;
    background-color:#000000;
    position:absolute;
    width:100vh;
    height:100vw;
    display: flex-end;
  }
  #container2 {
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    white-space:nowrap;
    font-size:0;
    position: absolute;
  }

  /*Comments*/
  .comment {
    border: 1px solid #00000049;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 15px;
  }
  .comment-source {
    font-family: ApercuBold;
  }