* {
        margin: 0;
      }
      html, body {
        height: 100%;
        background-color: #4D97FF;
      }

      .page {
        min-height: 100%;
        background-color: #4D97FF;
        font-weight: 500;
      }
      .page:after {
        content: "";
        display: block;
      }

      .header-wrapper {
        width: 100%;
        height: 10vh;
      }
      .header-content {
        width: calc(100% - 2rem);
        padding: 1rem;
      }

      .main {
        width: 100%;
        min-height: calc(100vh - 100px - 4vw);
      }
      .content {
        width: 90vw;
        max-width: 45rem;
        margin: 0 auto;
        text-align: center;
        font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
        color: white;
        /* hack to prevent content from shifting when scrollbar appears; see
        https://stackoverflow.com/a/30293718/2308190 */
        padding-left: calc(100vw - 100%);
      }
      .content a {
        color: white;
      }
      hr {
        border-width: 0;
        border-top-style: solid;
        border-top-width: 1px;
        border-color: white;
        opacity: 25%;
        margin: 2rem 0;
      }
      img.main-img {
        width: 300px;
        height: 200px;
      }
      h1 {
        font-size: 2rem;
        margin: 1.5rem 1rem 2.5rem 1rem;
      }
      h2 {
        font-size: 1.125rem;
        margin: 1rem 1rem 2.25rem 1rem;
      }
      h2.reload {
        cursor: pointer;
        pointer-events: all;
      }
      h2.comment:before {
        margin-top: 0;
        margin-left: -2.375rem;
        content:'';
        background: url('http://scratch-maintenance.s3.amazonaws.com/comment.svg');
        height: 66px; /*height of image*/
        width: 63px;  /*width of image*/
        position: absolute;
        background-size: 25px 24px;
        background-repeat: no-repeat;
      }
      p {
        font-size: 1rem;
        line-height: 1.5rem;
        margin: 1rem 1rem 1.5rem 1rem;
      }
      .narrow {
        padding: 0 10%;
      }
      button {
        cursor: pointer;
        border: 0;
        background-color: white;
        box-shadow: none;
        border-radius: .25rem;
        padding: 1rem 1.5rem;
      }
      button span {
        font-size: 1rem;
        color: #4D97FF;
        font-weight: 600;
      }

      .hidden {
        display: none;
      }
      .showing {
        display: inline-block;
      }
      .grid-wrapper {
        min-height: 100%;
        /* display: flex; */
        margin-bottom: 2rem;
      }
      .grid-content {
        /* display: inline-block; */
      }
      .grid-content .grid-box {
        width: 16rem;
        display: inline-block;
        background-color: white;
        font-size: 1rem;
        color: #4D97FF;
        font-weight: 600;
        border-radius: .5rem;
        padding: 1rem 1rem;
        margin: 0.5rem;
        text-align: left;
        vertical-align: top;
      }
      .os-name-row {
        margin-bottom: 0.25rem;
        display: flex;
        align-items: center;
      }
      .os-name-img {
      }
      .os-name-text {
        color: #575E75;
        line-height: 1.25rem;
        margin-left: 0.5rem;
      }
      .os-version {
        color: #aaa;
        font-size: 0.75rem;
        font-weight: 400;
      }
      .download-link-row {
        margin-top: 0.75rem;
        display: flex;
        align-items: center;
      }
      .store-img {
        flex: 1;
        height: 2.625rem;
      }
      .store-img img {
        height: 2.5rem;
      }
      .vertical-separator-left {
        border-right: 1px solid #d9d9d9;
        height: 2rem;
        flex: 1;
      }
      .vertical-separator-right {
        flex: 1;
      }
      .download-link {
        flex: 1;
        padding: .25rem 0.125rem .25rem 0;
      }
      .download-link a {
        color: #4D97FF;
        text-decoration: none;
      }