/** Basic styling */
body { font-family: "ryo-gothic-plusn", sans-serif; font-size: 16px; line-height: 1.5; font-weight: 500; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; }

.weight-light { font-weight: 300; }

.weight-regular { font-weight: 400; }

.weight-medium { font-weight: 500; }

.weight-bold { font-weight: 700; }

a { text-decoration: none; }

html, body { height: 100%; margin: 0px; padding: 0px; }

.page-content { height: 100vh; width: 100vw; box-sizing: border-box; padding: 20px; }

#yamanote-loop-outline { height: 100%; width: 100%; box-sizing: border-box; border: 40px solid #50c900; }

#interface-layer { position: absolute; top: 0; left: 0; min-height: 100vh; width: 100vw; }

#interface-wrapper { height: 100vh; flex: 1 1 auto; }

#center-area { align-self: center; flex-grow: 1; }

#indicator-display { width: 50vw; background-color: #111; box-sizing: border-box; padding: 20px; margin-left: auto; margin-right: auto; margin-bottom: 2em; color: #50c900; vertical-align: middle; font-size: 7.2vmin; line-height: 1em; }

#top-area { display: flex; min-height: 40px; margin: 20px 60px; flex-direction: row; align-content: space-between; justify-content: space-between; }

#bottom-area { display: flex; min-height: 40px; margin: 20px 60px; flex-direction: row-reverse; align-content: space-between; justify-content: space-between; }

#left-area { display: flex; align-self: flex-stretch; flex-grow: 1; margin: 0px 20px; flex-direction: column-reverse; align-content: space-between; justify-content: space-between; }

#right-area { display: flex; align-self: flex-stretch; flex-grow: 1; margin: 0px 20px; flex: 1 1 auto; flex-direction: column; align-content: space-between; justify-content: space-between; }

#middle-wrapper { display: flex; flex: 1 1 auto; flex-wrap: nowrap; flex-direction: row; }

#bottom-area a.station { text-align: center; flex-direction: column-reverse; }

#top-area a.station { text-align: center; flex-direction: column; }

#right-area a.station { text-align: right; flex-direction: row-reverse; }

#left-area a.station { flex-direction: row; }

a.station { display: flex; text-decoration: none; color: black; flex-basis: auto; align-content: center; align-items: center; justify-content: flex-start; line-height: 1em; }

a.station .square { box-sizing: border-box; border: 5px solid #50c900; height: 40px; width: 40px; background-color: white; }

a.station.current .square { background-color: yellow; }

@-webkit-keyframes blink { 0% { background: white; }
  50% { background: yellow; }
  100% { background: white; } }
@keyframes blink { 0% { background: white; }
  50% { background: yellow; }
  100% { background: white; } }
a.station.tsugi .square { -webkit-animation-direction: normal; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-name: blink; -webkit-animation-timing-function: ease; animation-direction: normal; animation-duration: 1s; animation-iteration-count: infinite; animation-name: blink; animation-timing-function: ease; }

a.station .name { margin: 1em; }