/* Copyright 2017 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 * Extract source code from chromium by congerh. */

body {
  --google-blue-600: rgb(26, 115, 232);
  --google-blue-700: rgb(25, 103, 210);
  --google-gray-50: rgb(248, 249, 250);
  --google-gray-500: rgb(154, 160, 166);
  --google-gray-600: rgb(128, 134, 139);
  --google-gray-700: rgb(95, 99, 105);
  background-color: transparent;  /* #fff; */
  color: var(--google-gray-700);
  word-wrap: break-word;
}

html {
  -webkit-text-size-adjust: 100%;
  font-size: 125%;
}

.icon {
  background-repeat: no-repeat;
  background-size: 100%;
}

/* Copyright 2014 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

.bad-clock button,
.captive-portal button,
.main-frame-blocked button,
.neterror button,
.offline button,
.pdf button,
.ssl button,
.safe-browsing-billing button {
  background: var(--google-blue-600);
}

.error-code {
  color: #646464;
  font-size: .86667em;
  text-transform: uppercase;
  margin-top: 12px;
}

h1 {
  color: var(--google-gray-900);
  font-size: 1.6em;
  font-weight: normal;
  line-height: 1.25em;
  margin-bottom: 16px;
}

h2 {
  font-size: 1.2em;
  font-weight: normal;
}

.icon {
  height: 72px;
  margin: 0 0 40px;
  width: 72px;
}

.interstitial-wrapper {
  box-sizing: border-box;
  font-size: 1em;
  line-height: 1.6em;
  margin: 14vh auto 0;
  /*max-width: 600px;*/
  width: 100%;
}

#main-message > p {
  display: inline;
}

@media (max-width: 700px) {
  .interstitial-wrapper {
    padding: 0 10%;
  }
}

@media (max-width: 420px) {
  .interstitial-wrapper {
    padding: 0 5%;
  }
}

/**
  * Mobile specific styling.
  * Navigation buttons are anchored to the bottom of the screen.
  * Details message replaces the top content in its own scrollable area.
  */

/* Fixed nav. */
@media (min-width: 240px) and (max-width: 420px) and (min-height: 401px),
        (min-width: 421px) and (min-height: 240px) and (max-height: 560px) {
  body .nav-wrapper {
    background: transparent;
    bottom: 0;
    box-shadow: 0 -22px 40px #fff;
    left: 0;
    margin: 0 auto;
    max-width: 736px;
    padding-left: 24px;
    padding-right: 24px;
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 2;
  }

  .interstitial-wrapper {
    max-width: 736px;
  }

  #details,
  #main-content {
    padding-bottom: 40px;
  }
}

@media (max-width: 420px) and (orientation: portrait),
        (max-height: 560px) {
  body {
    margin: 0 auto;
  }

  #details.hidden,
  #main-content.hidden {
    display: block;
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding-bottom: 0;
    transition: none;
  }

  h1 {
    font-size: 1.5em;
    margin-bottom: 8px;
  }

  .icon {
    margin-bottom: 5.69vh;
  }

  .interstitial-wrapper {
    box-sizing: border-box;
    margin: 7vh auto 12px;
    padding: 0 24px;
    position: relative;
  }

  .interstitial-wrapper p {
    font-size: .95em;
    line-height: 1.61em;
    margin-top: 8px;
  }

  #main-content {
    margin: 0;
    transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (min-width: 421px) and (min-height: 500px) and (max-height: 560px) {
  .interstitial-wrapper {
    margin-top: 10vh;
  }
}

@media (min-height: 400px) and (orientation:portrait) {
  .interstitial-wrapper {
    margin-bottom: 145px;
  }
}


@media (min-height: 500px) and (max-height: 650px) and (max-width: 414px) and
        (orientation: portrait) {
  .interstitial-wrapper {
    margin-top: 7vh;
  }
}

@media (min-height: 650px) and (max-width: 414px) and (orientation: portrait) {
  .interstitial-wrapper {
    margin-top: 10vh;
  }
}

/* Small mobile screens. No fixed nav. */
@media (max-height: 400px) and (orientation: portrait),
        (max-height: 239px) and (orientation: landscape),
        (max-width: 419px) and (max-height: 399px) {
  .interstitial-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }

  #main-content {
    flex: 1 1 auto;
    order: 0;
  }
}

/* Copyright 2013 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* Don't use the main frame div when the error is in a subframe. */
html[subframe] #main-frame-error {
  display: none;
}

/* Don't use the subframe error div when the error is in a main frame. */
html:not([subframe]) #sub-frame-error {
  display: none;
}

h1 {
  margin-top: 0;
  word-wrap: break-word;
}

h1 span {
  font-weight: 500;
}

h2 {
  color: #666;
  font-size: 1.2em;
  font-weight: normal;
  margin: 10px 0;
}

a {
  color: rgb(17, 85, 204);
  text-decoration: none;
}

.icon {
  -webkit-user-select: none;
  display: inline-block;
}

.icon-offline {
  content: -webkit-image-set(
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAeUExURQBMKoCAgAATfwBMKQJMKLJVALFUALBUAaBUDwAAAIu85rcAAAAKdFJOU////////////wCyzCzPAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA+UlEQVRYR+2R2RaCMAwFxQ37/z8stAO06ZIq0Bc6D5qTmzvC8WYOoot0ukini3S6SKeLdLpI58qim4B1RCsR7QAiQYVoGGx/hUhQI7rb/gqRoEIkIRJ0kQ+RoL2IRZb2IgfrBGeI4jPaEywKNBChcLArcI5oK9i2gCjDWSJ37iafeWePspwnSsNJgWuISioOClSJiIuII5oCwiLi6EE1hLBIdETXg0AhOntS3yBQSJzRB5Yqx4leAe/RLlG4T2M+I3GCOZ9J/qL1eKIasqJlct86/4q8l3Jw6L+tX9/9RAz7RYtgm4x4FYn9+5kn3JwUQXi/kXyi3zHmC5ctmzVMjq+RAAAAAElFTkSuQmCC) 1x,
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGwUExURV6MdzRzVjRwVDRvVAxLLwBWLwBSLABRLBBMMQBTLQBOKgBNKg1MLwBQKwBMKgBLKQBLKABKJwBPKypoTANLKgBJJQBIIwxMLwBQLAVNLRRUNx1XPR9ZPRdWNwVOLQBLKg9MMABSLQBIJBRTN1BsYHF6dHd/dFhzYBZVNwBJJgBHIh1XPJKDkH9zkFhjdBZRPABJIgBKJh9ZPH90jzg3jxcmcwVBPABOIwBMJ1lzYFZjdA8ndAAaXwA+NwBPJQBNKBZWNxVRPANCPABILQBMKQBIJQBJIwBKKABLJxBNMRBQMx5NODVPQkJRSkJSSkVRSxJMMhFLMQBOKwBULQBYMApLLhJLMgBRLTR1VgBULgBVLhBSM0JSSxBMMAxLLh5NNwBTLAxLLABWLh5NNhBQMjNvUydlSS1qTQ1NMLtqIrppIr1qIsRuIseHT3mUh7uHWLduLLlqJL5rIsVvIsiIT6RTC6NTC6ZTC65XC5JSGYZSI6FXFaJTDadUC65YC5NTGWhTQGpUQGNSRGBSRmdUQmdTQGlTQGtUQGNTRMR+QJlTFMlwImRSQrJZC1NTUwAAABtxjsoAAACQdFJOU///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AANl54cAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAUuSURBVHhe7Zn5X9s2FMBDS5zEDk4CtHRHC2Hrsfteu6NlBztaulIYg567T3a3jJ0t3dW7y788y362ZVnSkywn8Nn0/Sl2ZPL94Kf3pKdKb4thhTCsEIYVwrBCGFYIwwphWCEMK4RhhTCsEIYVwrBCGFYIwwphWCEMK4RhhTCsEIYVwrBCGFYIwwphWCEMK4RhhTCsEIYVwrBCGMZClaFt24VsG9L++8ZCw1WnJsSpDsMwZYyF6g3XE+I26jBMGWOh5ojfanc67ZbPY7QJw5QxEgriZ2zc89s7du7c0QaFLN74mGYcGQlNVJ1dXqt919333Lt7D+9/NNnydjnVCRiuhJHQVNf1/M70fffv3bf/wHQHLCgmW77ndqdguBJGQvWa5/sPPPjQ3ocfefSxx58ACwavphXYZQg9ue+pp5959uAhMGAYuFBnevdzz7/w4uEjM2DAMHChVnvPSy+/cvjVmVkwYBi4kO+3X3v94JGZycnw93NsglDrjTcPzcxuISE5VgjDCmFYIRpSTFkGXlxpyHIDVq8Jg1x+5F+ZN96sMxw9NgfDlShZaLR5/C2WE/MwXIlyhbzaSfiqMP9xoQK7DJbSg3oMNq1Fdq0EI6EFWijKQYvdBvD20jswTAsjoeWsEMlBK5sq1BwFmRAmB2nmnxiuUOXUKVQUdq0UbA7Syz8x3B+eWFpC0/1wuGullq1ebRm+MoIrNHX6NFoQSdfDzwotwFdGcIXqDbyNko2fAM1lhogCQmHPjImfgD4LSf79Yc8sGz+EPr8ySYBGPbNM/BD6GdR1pyapSbnoAczrGIEvVHO5nS9B9ABQxwrWsBi+0Mgs6XzlOqiC6IkISsdKo9Fd0VyysoiEfF4HVRA9ESC06Dpai3oWwSsjbyUfE6LoiQhrWXPcNZv+EqFsBzVfu1jCWna8WXP6JBR1UJM4ytUuFpj29TNn+vTKwg5qGke52sUCiXFYoTDLkLwyQhpH8vgJgNIxd/ZsoXVQDCKUrJGR+AkAoflz5wqtg2LkQunWWB4/hL4W11QoaR5I44cwECEd/ldC4aEK9opY+ikUHTttIaG5Y0eb6DSnKXAMJYIrNH8iqElYIqSJyoxRho7hChHQUpEhqPQFd6osQiG0mGYglb7YTpVFKKQVRyUt8AlCIa04KmkLRBAKEc6rxFGJM4wgFXpXJY5KnGEEqdB7SnFU3gwjSIXU4qi8GUaQChHOvy+JI2aZWwao0AcfSuKI2QiUASr00ceyOCo3fgiokDyOyo0fAipE+ITOR7CsDa9LzNAxSkKf0vkoWvhH1yVm6BglocrQZ5+ncQR7eHJd0qKMpvKFmNXVL7/6GsZ9k8YR7OHJNSX07Xffr67Cg8pcuLgGjydUfhCzvv7jTz/DuOgYgco74XppdiQR+uXX39bX4UFlLl3egMcTKlek/P4HjIsOWqi8E66XKKE///obntHg6rXr8HiCUgwRoq1RmnfC9ZJhL4iHplCad8L8ZNgL4qEuxGnzLSt0/HXREcrVrQVtobWLFzgzi0bjlbm5uqVyJpJl4/IlzsyiyQgF/tzcQCDNdLZu6Qtdv3aVM7NoMkKBPzc3EIIfzx2By89EipERCvy5uYEgENqc4krgnX/Iz0SKoRXU7PkH/0zkxg34UAhloSnHXewyR9+8e73ezZvwoRBRtRfMrLVbt5L7E1Vnhf1x3r1e7/Zt+BAim7k8omovmFkbd+4k94PalTuL591jkc1cHpV/ALjOQN8PBwXAZQjc4j4bA0OkY1J6vX8BVL1N5vTdoHYAAAAASUVORK5CYII=) 2x);
  position: relative;
}

.icon-disabled {
  content: -webkit-image-set(
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABICAMAAAAZF4G5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAzUExURf9qAP1pAP5pAABMKv8AAP///wAm/wRMKQBMKQZMKAFMKbJVALFUAKtUBaJUDbBUAAAAAGKI66AAAAARdFJOU/////////////////////8AJa2ZYgAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAjdJREFUaEPF1ItWwjAQBFBUUBTU/v/Xms1OyLPJtpniHA+WJMx1KXhajkin9RCwV3oAKJXrtWzwJI29UjYo8ehauKC0DRrZEw5JMjj0qKBqg0YmCK1fyQPVGvaRQJFsVcwJTSptwpB+4QsFDLON53P7DNBFaoaebL8ywCB1u/wh/eEkFPYiZ1jgkApHZsGTi14MqgI5CYrnxVHP48wcqB5mXI9qeooF9ntU82dYYCdqhTNHgyJl23Ng/NB0omY4NAl6EZfNxE1czYLdhNnifAbwrQiWrZH+1OODaWGQ8rVuoGTBVjt1n1fjsgE8Xy5nLyHYakXaisYSMICX9/eLlxBsVclHeXx8sztIBSWPdvG8WAIG0PaW5uXqtb6iBrAMtqqkJDz3tAR4YOodP6FqsQzecSC0UsSTNBRQrbxqxSOAIg1a0mwEsVxETZs6D8YGk5gcquuguGChSpjNOt806CINdq8DgtJgrUqQzN4s6ONVK5mBsdgrRbBVxT6dZAJ8fLU33MEK1Fq9SiNr/lCMeF7coLnsBtVr//vqpQLbwZEk8NzrJydsB0eSwPuPCbdlNxg/NNuSvQLtjeBAll2eDcQ2JcXfCKEINikpwI8rjDRXbFJS3YVaxAYpFfhZidggpQLL+4hFWhrgFygNFmk53bLcv2UxUPq4LD+/2G5E9rekMWENMrMKhiv9zctecMebqQGY343IPG1CXDwPDFC8Wna+hWX81wLXLre7PDZBJD+/Pc0Jj8uy/AE0ALyxVuTCFAAAAABJRU5ErkJggg==) 1x,
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAACQCAMAAAAm0ZcSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQAAAABKKf9rAABSKWNKQs5aEBBCMfeUQr1jOr0QGVJKUsWUSowxGb1jY1oQGWNaKZRjWsWca2NjCO+cY7Up3lrvGVrvnFqtnL3vWr0xUlparb3vGVoZrb3v3r2t3r2tnL3vnFop3uZK3ozOWoRK3ozO3oyMWoyM3oyMGeYI3ozOGYzOnIyMnLVK3lrOWlrO3lqM3lqMGbUI3lrOGVrOnFqMnL3O3r2M3r2MnL3OnFoI3nNSQhBaQu9aWu+UEDEQ5lprWu9jOu8QGRDmpRCtpRBCpRDmexCtexBCexDmzhBzzhCtzhCEGRDOGebv3owIEJxSCO+t3uatnFoxGb2cKb0xGb2cCDpSQveEMbVrGVpr3ubO3u/vWu8xUoxarTEQY+/vGYwZre/vnIwp3jEQITEQpe+M3u+MnFpK3u/OnIwI3ghSGTE6QoxSKTFaEBA6zhBzpRBzexCEShDOSuYxGQgI5jHmpTGtpTFCpTHmezGtezFCexDm7xBz7xCt7xClGRDvGTHmzjFzzjGtzjGEGTHOGTF7SveEQhA6UhA67zFzpTGlSjFzexClShDvSowQY+ZrjOYpjFoQY7VrjLUpjL3Oa70QY1prjL3OKVopjDE6zjHOSowQQuZKjOYIjFoQQrVKjLUIjL3OSr0QQlpKjL3OCFoIjDHm7zFz7zGt7zGlGTHvGTExEFqMa7VSEDE67+9SCO/Oa+8QY4xrjBAQc+/OKYwpjBAQMRAQtRAxEO/OSu8QQoxKjBAQUu/OCIwIjBAQEBAQlOZr7zHvSozva4Rr74zv74wxY+ZrrYyta4yt7+YprYytKeYp74zvKYzvrYytrVoxY7VrrbUprVqta7Vr71rva1rv71qt71qtKVqMSuZrzozvSoRrzozvzowxQuZKrYytSoytzuYIrYytCOYpzozvCIzvjIytjFoxQrVKrbUIrVqtSrVrzlrvSlrvzlqtzlqtCDFjUntrWu9zEJRrKZRrCO+lMQA6ENZrECEQAABaEO9zAAAQAAAxKQAAANJkZrcAAAEAdFJOU////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wBT9wclAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAIbUlEQVR4Xu2bbW7bOBCGW3/EgPszxxF6hewmQFGlPYP+tVewL+MmdzPyIwYW8HI4MyIl80McyhaV3QdwJLuOd58M3yElWZ/Oc2G7pZ005iNY/fNGe0nMRXBbnTcb2k9iLoLVuqa9ROYgqKp3hvrpbSpzEKzWODh5m0TZglAz9aipepIUli0INcP0iaoHFD5EoWaYvvrU0GtpzCGD2EObk6iG5Qpyz2zTJ0lgyYJZvdNQ8BDF7JmtjLIzOEIVSxaE3glivBVRsiCvP1fSdShQpiBlbgNzX1b9ShXkzMHcJz6OQAodoly7vRLV+2JKzSDUbrXet/tiyhO08ren2snWMEh5giZ/+7zaISUJQu0gd1bdcmqHlCQItatU7qr8uhmKGqK6Zqeq7aGcxxzKyyDkDuc/fGRSWgYVnD2sZ84cWKkPLC2DfbL66HpdiqDdPzl7Vj1lVA2sYcsQtPsn7K/okcX6BD8LGaI6b2uz9tysm6xjCEgffGZVlZTBxlp7VqesYwhIn96+FZVBrhnMhVBLCVA7TJ+uYl1SBk3NuJYCoHaYPqxiSRmEmplaUhdNhT9JVbFu1EeUlEHA1NI1KyYAVTwVMw8ylENdS/qZAqSOt1zJsgQzz7+0vZO2wLSC2wqhp+pvzmsZETp7VD3+0GkFV88nzT09pzkwJ339Kk4puK2at4XmjY4ZOhmUgDOg2U4rqOqHfosF1TAzg9g77e2UgqZ+ANUwo3Y6c5s9zH2mflMKVqZ+gJVDEZw5mPtM/SYV7PgtFjA4xf1T1U6vW6pGH4/ofaQswaz+adcO9pGyBIUZpPzVTbPXGbQ/pzBBGW3+aP1pM3NBqJ3KnVW3/hiYuSDUjo8b3EwneL7vGNaiaULXbF9V1EPpYTOh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) 2x);
  width: 112px;
}

.error-code {
  display: block;
  font-size: .8em;
}

.hidden {
  display: none;
}

#suggestions-list p {
  margin-block-end: 0;
}

#suggestions-list ul {
  margin-top: 0;
}

.snackbar {
  background: #323232;
  border-radius: 2px;
  bottom: 24px;
  box-sizing: border-box;
  color: #fff;
  font-size: .87em;
  left: 24px;
  max-width: 568px;
  min-width: 288px;
  opacity: 0;
  padding: 16px 24px 12px;
  position: fixed;
  transform: translateY(90px);
  will-change: opacity, transform;
  z-index: 999;
}

.snackbar-show {
  -webkit-animation:
    show-snackbar .25s cubic-bezier(0.0, 0.0, 0.2, 1) forwards,
    hide-snackbar .25s cubic-bezier(0.4, 0.0, 1, 1) forwards 5s;
}

@-webkit-keyframes show-snackbar {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes hide-snackbar {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(90px);
  }
}

/* Decrease padding at low sizes. */
@media (max-width: 640px), (max-height: 640px) {
  h1 {
    margin: 0 0 15px;
  }
  #content-top {
    margin: 15px;
  }
}

/* Don't allow overflow when in a subframe. */
html[subframe] body {
  overflow: hidden;
}

#sub-frame-error {
  -webkit-align-items: center;
  background-color: #DDD;
  display: -webkit-flex;
  -webkit-flex-flow: column;
  height: 100%;
  -webkit-justify-content: center;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  transition: background-color .2s ease-in-out;
  width: 100%;
}

#sub-frame-error:hover {
  background-color: #EEE;
}

#sub-frame-error .icon-generic {
  margin: 0 0 16px;
}

#sub-frame-error-details {
  margin: 0 10px;
  text-align: center;
  visibility: hidden;
}

/* Show details only when hovering. */
#sub-frame-error:hover #sub-frame-error-details {
  visibility: visible;
}

/* If the iframe is too small, always hide the error code. */
/* TODO(mmenke): See if overflow: no-display works better, once supported. */
@media (max-width: 200px), (max-height: 95px) {
  #sub-frame-error-details {
    display: none;
  }
}

/* Adjust icon for small embedded frames in apps. */
@media (max-height: 100px) {
  #sub-frame-error .icon-generic {
    height: auto;
    margin: 0;
    padding-top: 0;
    width: 25px;
  }
}

/* Offline page */
.offline {
  transition: -webkit-filter 1.5s cubic-bezier(0.65, 0.05, 0.36, 1),
              background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
  will-change: -webkit-filter, background-color;
}

.offline #main-message > p {
  display: none;
}

.offline.inverted {
  -webkit-filter: invert(1%);
  background-color: rgba(0,0,0,0.4); /* #000; */
}

.offline .interstitial-wrapper {
  color: #2b2b2b;
  font-size: 1em;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 600px;
  padding-top: 100px;
  width: 100%;
}

.offline .runner-container {
  direction: ltr;
  height: 150px;
  max-width: 600px;
  overflow: hidden;
  position: absolute;
  top: 35px;
  width: 44px;
}

.offline .runner-canvas {
  height: 150px;
  max-width: 600px;
  opacity: 1;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 10;
}

.offline .controller {
  background: rgba(247,247,247, .1);
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 9;
}

#offline-resources {
  display: none;
}

@media (max-width: 420px) {
  .snackbar {
    left: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
  }
}

@media (max-height: 350px) {
  h1 {
    margin: 0 0 15px;
  }

  .icon-offline {
    margin: 0 0 10px;
  }

  .interstitial-wrapper {
    margin-top: 5%;
  }
}

@media (min-width: 420px) and (max-width: 736px) and
       (min-height: 240px) and (max-height: 420px) and
       (orientation:landscape) {
  .interstitial-wrapper {
    margin-bottom: 100px;
  }
}

@media (max-width: 360px) and (max-height: 480px) {
  .offline .interstitial-wrapper {
    padding-top: 60px;
  }

  .offline .runner-container {
    top: 8px;
  }
}

@media (min-height: 240px) and (orientation: landscape) {
  .offline .interstitial-wrapper {
    margin-bottom: 90px;
  }

  .icon-offline {
    margin-bottom: 20px;
  }
}

@media (max-height: 320px) and (orientation: landscape) {
  .icon-offline {
    margin-bottom: 0;
  }

  .offline .runner-container {
    top: 10px;
  }
}

@media (max-width: 240px) {
  .interstitial-wrapper {
    overflow: inherit;
    padding: 0 8px;
  }
}

.arcade-mode,
.arcade-mode .runner-container,
.arcade-mode .runner-canvas {
  image-rendering: pixelated;
  max-width: 100%;
  overflow: hidden;
}

.arcade-mode #buttons,
.arcade-mode #main-content {
  opacity: 0;
  overflow: hidden;
}

.arcade-mode .interstitial-wrapper {
  height: 100vh;
  max-width: 100%;
  overflow: hidden;
}

.arcade-mode .runner-container {
  left: 0;
  margin: auto;
  right: 0;
  transform-origin: top center;
  transition: transform 250ms cubic-bezier(0.4, 0.0, 1, 1) .4s;
  z-index: 2;
}