* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    @font-face {
        font-family: "PublicPixel";
        src:
            url("fonts/PublicPixel.woff2") format("woff2"),
            url("fonts/PublicPixel.woff") format("woff"),
            url("fonts/PublicPixel.ttf") format("truetype"),
            url("fonts/PublicPixel.otf") format("opentype");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    body {
        background-color: #f2f2f2;
        text-align: center;
        min-height: 100vh;
        font-family: "PublicPixel";
        padding: 20px;
        color: #020202;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    .interstitial-wrapper {
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
    }


    .runner-container {
        position: relative;
        isolation: isolate;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .controller {
        overscroll-behavior: none;
        touch-action: none;
    }

    img {
        width: 100%;
    }

    ::selection {
        background-color: #0cce4d;
        color: #ffffff;
    }

    ::-moz-selection {
        background-color: #0cce4d;
        color: #ffffff;
    }

    .container {
        width: clamp(320px, 90%, 1500px);
        margin: auto;
    }

    p,
    div,
    h1,
    h2 {
        margin: 0;
    }

    h1 {
        font-size: 15px;
        line-height: 22px;
    }

    h2 {
        line-height: 25px;
        font-size: 20px;
    }

    .border {
        text-align: center;
        margin: auto;
        display: flex;
        justify-content: center;
    }

    .border-block {
        position: relative;
        background: #f2f2f2;
        border: 4px solid #f2f2f2;
        width: 45%;
        margin-bottom: 3%;
        max-width: 600px;
    }

    .border-block:before {
        content: "";
        position: absolute;
        width: calc(100% + 8px);
        height: 100%;
        top: 0;
        bottom: 0;
        left: -4px;
        right: -4px;
        z-index: 10;
        box-shadow: -4px 0px 0px #000, 4px 0px 0px #000;
    }

    .border-block:after {
        content: "";
        position: absolute;
        width: 100%;
        height: calc(100% + 8px);
        top: -4px;
        bottom: -4px;
        left: 0;
        right: 0;
        z-index: 10;
        box-shadow: 0 -4px 0 #000, 0 4px 0 #000;
    }

    .inner-top,
    .inner-bottom {
        display: block;
        position: relative;
        background: #add8e6;
    }

    .inner-top:before,
    .inner-top:after,
    .inner-bottom:before,
    .inner-bottom:after {
        content: "";
        position: absolute;
        height: 0px;
        width: 0px;
        z-index: 1;
    }

    .inner-top:after {
        top: -4px;
        right: -4px;
        border: 2px solid #191970;
    }

    .inner-top:before {
        top: -4px;
        left: -4px;
        border: 2px solid #191970;
    }

    .inner-bottom:after {
        bottom: -4px;
        right: -4px;
        border: 2px solid #191970;
    }

    .inner-bottom:before {
        bottom: -4px;
        left: -4px;
        border: 2px solid #191970;
    }

    .item {
        padding: 25px 5px 15px 5px;
    }

    .logo {
        width: 15%;
    }

    #leaderboard-list div {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    .leader-title {
        z-index: 999;
        content: 'LEADERBORD';
        background-repeat: no-repeat;
        width: 85%;
        position: absolute;
        top: -23px;
        left: 5%;
    }

    .leader-title:after {
        content: '';
        position: absolute;
        background-image: url(img/adz-cup.png);
        background-size: contain;
        width: 85px;
        height: 130px;
        background-repeat: no-repeat;
        top: -46%;
        right: -10%;
    }

    .leader-text {
        text-transform: uppercase;
        position: absolute;
        left: 14%;
        right: 0;
        margin: auto;
        top: 21%;
        font-size: 25px;
    }

    #leaderboard-list {
        font-size: 13px;
        line-height: 35px;
    }

    .instruction {
        margin-bottom: 4%;
    }

    .leaderbord-block {
        position: relative;
        margin-top: 7%;
    }

    .leaderbord-block .wrapper {
        padding-top: 100px;
        padding-bottom: 50px;
    }

    .medal-icon {
        width: 15px;
        height: 15px;
        margin-right: 25px;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 9999;
        margin-bottom: -15px;
    }

    .left-score {
        margin-left: 30px;
    }

    .rank {
        margin-right: 25px;
    }

    .space {
        width: 45px;
    }

    .player-score {
        padding-right: 30px;
    }

    .left-score .player-name {
        text-transform: uppercase;
        
    }

    .mob-text {
        display: none;
    }

    .flex {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .social-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .share-block {
        max-width: 600px;
        margin: 20px auto;
    }

    .social-btn img {
        width: 40px;
        margin: 0 7px;
    }

    .share-btn {
        width: 170px;
        position: relative;
    }

    .share-text {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 18px 0 0px;
        top: 30%;
        text-transform: uppercase;
        color: #fff;
    }

    .share-text:after {
        content: '';
        position: absolute;
        background-image: url(img/share-icon.png);
        width: 20px;
        background-size: contain;
        background-repeat: no-repeat;
        height: 19px;
        right: 3%;
    }

    .modal,
    .modal-result {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        left: 0;
        background: #0000005c;
        z-index: 9999999;
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;
    }

    .modal .wrapper,
    .modal-result .wrapper {
        padding: 80px 20px 20px;
        z-index: 999999;
        display: block;
        position: relative;
    }

    .modal-result .wrapper h4 {
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .modal-result .share-block {
        margin: 50px auto;
    }

    .modal-result h3 {
        text-transform: uppercase;
        line-height: 24px;
    }

    .modal-result .share-block h3 {
        font-size: 13px;
        margin-bottom: 13px;
        text-transform: uppercase;
    }

    .modal .border-block {
        width: 35%;
        text-transform: uppercase;
    }

    .modal .wrapper h4 {
        display: inline-block;
    }

    .modal h4.text-two {
        margin: 8% 0 4%;
        line-height: 22px;
    }

    .modal .leader-title {
        top: -6%;
    }

    .modal .iput-block .border-block {
        width: 70%;
        margin: auto;
        margin-bottom: 20px;
    }

    .modal .iput-block .border-block input {
        width: 100%;
        height: 30px;
        border: none;
    }



    .iput-block .border-block:before {
        content: "";
        position: absolute;
        width: calc(100% + 8px);
        height: 100%;
        top: 0;
        bottom: 0;
        left: -4px;
        right: -4px;
        z-index: 10;
        box-shadow: -4px 0px 0px #dbdbdb, 4px 0px 0px #dbdbdb;
    }

    .iput-block .inner-top:before {
        top: -4px;
        left: -4px;
        border: 2px solid #dbdbdb;
    }

    .iput-block .inner-top:after {
        top: -4px;
        right: -4px;
        border: 2px solid #dbdbdb;
    }

    .iput-block .inner-bottom:before {
        bottom: -4px;
        left: -4px;
        border: 2px solid #dbdbdb;
    }

    .iput-block .inner-bottom:after {
        bottom: -4px;
        right: -4px;
        border: 2px solid #dbdbdb;
    }

    .iput-block .border-block:after {
        content: "";
        position: absolute;
        width: 100%;
        height: calc(100% + 8px);
        top: -4px;
        bottom: -4px;
        left: 0;
        right: 0;
        z-index: 10;
        box-shadow: 0 -4px 0 #dbdbdb, 0 4px 0 #dbdbdb;
    }
.iput-block {
    margin-bottom: 10%;
}
#input-error {
    color: red;
    font-size: 9px;
    position: absolute;
    bottom: -70%;
    left: 0;
    right: 0;
    margin: auto;
}
    .modal .iput-block .border-block input.terminal-input {
        background: transparent;
        border: none;
        color: #020202;
        font-size: 24px;
        outline: none;
        padding: 5px 0;
        width: 90%;
        display: flex;
        margin: 0 0 5px 12px;
        font-family: "PublicPixel";
        position: relative;
        caret-color: transparent;
        background: transparent;
        border: none;
        outline: none;
        z-index: 999999999;
    }


    .input-wrapper {
        position: relative;
        display: inline-block;
    }

    .custom-cursor {
        content: '';
        position: absolute;
        width: 20px;
        height: 3px;
        animation: blinkBorder 1s step-end infinite;
        background-color: #020202;
        left: 8px;
        bottom: 0px;
    }

    .green-btn,
    .retry-game {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .retry-game {
        width: 100%;
        border: none;
        background: transparent;
    }

    .green-btn-img {
        display: flex;
        background-image: url(img/buy-desk.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 70%;
        height: 70px;
        margin-top: 15px;
        position: relative;
    }

    .green-btn-img span {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 26%;
        text-transform: uppercase;
        color: #fff;
    }

    .retry-btn-img {
        display: flex;
        background-image: url(img/retry.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 40%;
        height: 60px;
        margin-top: 15px;
        position: relative;
    }

    .retry-game span {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 30%;
        text-transform: uppercase;
        color: #010202;
        font-family: "PublicPixel";
    }

    @keyframes blinkBorder {

        0%,
        50% {
            opacity: 1;
        }

        51%,
        100% {
            opacity: 0;
        }
    }

    .skip {

        width: 200px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        font-family: "PublicPixel";
        text-transform: uppercase;
        font-size: 18px;
        background-color: transparent;
        color: #020202;
        position: relative;
    }

    .ok {

        width: 200px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        font-family: "PublicPixel";
        text-transform: uppercase;
        color: #fff;
        font-size: 18px;
        background-color: transparent;
        position: relative;
    }

    .skip-text,
    .ok-text {
        position: absolute;
    }

    #score-number {
        font-size: 27px;
    }

    .modal-result .border-block {
        width: 70%;
        max-width: 700px;
    }

    .modal-result .leader-title {
        z-index: 999;
        content: 'LEADERBORD';
        background-repeat: no-repeat;
        width: 80%;
        position: absolute;
        top: -27px;
        left: 5%;
    }

    .modal-result .leader-text {
        top: 30%;
        font-size: 21px;
    }

    .modal-result .leader-title:after {
        width: 90px;
        top: -34%;
        right: -12%;
    }

    .mob-btn {
        margin-top: 20px;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: manipulation;
    }

    .mob-btn-img {
        background-image: url(img/jump.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 65px;
        display: flex;
        align-items: center;
        justify-self: center;
    }

    .mob-btn-img span {
        display: block;
        width: 100%;
    }

    .mob-btn {
        display: none;
    }
    .skip-mob, .ok-mob {
        display: none;
    }
.btn-main .green-btn-img {
    width: 35%;
    height: 60px;
}
.btn-main .green-btn-img span {
    top: 30%;
}
.show-board {
    width: 85%;
    border: none;
    font-family: "PublicPixel";
    background: transparent;
    cursor: pointer;
}
.show-board .border-block {
    width: 100%;
    border: none;
    height: 40px;
    position: relative;
    z-index: 9999999999;
    max-width: 330px;
    left: 0;
    right: 0;
    margin: auto;
    background: transparent;
}
.leaderbord-block .show-board .wrapper {
    padding-top: 5px;
    padding-bottom: 4px;
}
.show-board-text {
    font-size: 14px;
    z-index: 9999;
    position: relative;
    color: #fff;
}
.show-board .border-block .item {
    padding: 0px;
}
.show-board .border-block:after {
    background: #5bb9f3;
    box-shadow: 0 -4px 0 #ffffff, 0 4px 0 #0777cc;
}

.show-board .border-block:before {
    background: #5bb9f3;
    box-shadow: -4px 0px 0px #fff, 4px 0px 0px #0279cf;
}
.show-board .inner-top:before {
    border: 2px solid #fff;
}
.show-board .inner-top:after {
    border: 2px solid #0081dd;
}
.show-board .inner-bottom:before {
    border: 2px solid #fff;
}
.show-board .inner-bottom:after {
    border: 2px solid #0081dd;
}
    @media(min-width:2300px) {
        h1 {
            font-size: 16px;
            line-height: 25px;

        }

        h2 {
            line-height: 38px;
            font-size: 27px;
        }

        #leaderboard-list {
            font-size: 20px;
            line-height: 50px;
        }
    }

    @media(max-width:600px) {
        body {
            padding: 20px 0;
        }

        .border-block {
            width: 100%;
        }

        .mob-text {
            display: block;
            margin-top: 20px;
        }

        .desk-text {
            display: none;
        }

        .leaderbord-block .border-block:after {
            display: none;
        }

        .leaderbord-block .border-block:before {
            display: none;
        }

        .leaderbord-block .inner-top:before,
        .leaderbord-block .inner-top:after {
            display: none;
        }

        .leaderbord-block .inner-bottom:before,
        .leaderbord-block .inner-bottom:after {
            display: none;
        }

        

       
        .leaderbord-block .show-board .border-block:after {
            display: block;
        }

        .leaderbord-block .show-board .border-block:before {
            display: block;
        }

        .leaderbord-block .show-board .inner-top:before,
        .leaderbord-block .show-board .inner-top:after {
            display: block;
        }

        .leaderbord-block .show-board .inner-bottom:before,
        .leaderbord-block .show-board .inner-bottom:after {
           
            display: block;
        }

        .logo {
            width: 65%;
        }

        .share-block .flex {
            flex-direction: column;
        }

        .share-btn {
            margin-bottom: 10px;
        }

        .leader-title {
            z-index: 999;
            content: 'LEADERBORD';
            background-repeat: no-repeat;
            width: 110%;
            position: absolute;
            top: 0;
            left: -5%;
        }

        .leader-text {

            left: -10%;
            right: 0;
            margin: auto;
            top: 26%;
            font-size: 20px;
        }

        .leader-title:after {

            width: 60px;
            height: 99px;
            top: -30%;
            right: 4%;
        }

        .modal .border-block {
            width: 100%;
        }

        .modal .leader-title {
            top: -6%;
            right: 0;
            left: 0;
        }

        .modal .iput-block .border-block {
            width: 100%;
        }

        .modal .wrapper,
        .modal-result .wrapper {
            padding: 60px 5px 20px 5px;
        }

        .skip {
            margin-right: 12px;
            height: 43px;
        }

        .ok {
            height: 43px;
        }

        .modal-result .border-block {
            width: 100%;
        }

        .modal-result .leader-title {
            width: 120%;
            top: -27px;
            left: 0%;
        }

        .modal-result .leader-text {
            top: 33%;
            font-size: 14px;
            white-space: break-spaces;
            width: 300px;
            left: -6%;
        }

        .green-btn-img {
            width: 100%;
            height: 70px;
            background-image: url(img/buy-mob.png);
        }

        .green-btn-img span {
            top: 40%;
            font-size: 15px;
        }

        .retry-btn-img {
            width: 62%;
            height: 45px;
        }

        .modal .leader-text {
            left: 0%;
            right: 0;
            top: 28%;
        }

        .modal .leader-title:after {
            top: -13%;
            right: 12%;
        }

        .mob-btn {
            display: flex;
        }

        .left-score {
            margin-left: 0;
        }

        .player-score {
            padding-right: 0;
        }

        .rank {
            margin-right: 13px;
        }

        .medal-icon {
            margin-right: 14px;
        }

        .space {
            width: 29px;
        }

        .modal-result h3 {
            text-transform: uppercase;
            line-height: 16px;
            font-size: 14px;
        }

        .modal-result .share-block h3 {
            margin-bottom: 20px;
            margin-top: 20px;
        }

        .modal-result .share-block {
            margin: 20px auto;
        }

        .modal-result .wrapper h4 {
            margin-bottom: 10px;
        }

        .interstitial-wrapper {
            margin: 25px auto 0;
        }

        .social-btn img {
            width: 50px;
            margin: 0 5px;
        }

        .share-block {
            margin: 20px auto 20px;
        }

        .leaderbord-block .wrapper {
            padding-top: 80px;
        }

        .skip-mob, .ok-mob {
            display: block;
        }
        .skip-desk, .ok-desk {
            display: none;
        }
        .btn-main .green-btn-img span {
            top: 21%;
            font-size: 13px;
            line-height: 18px;
            padding: 0 10px;
        }
        .btn-main .green-btn-img {
            margin-bottom: 30px;
        }
        .btn-main .green-btn-img {
            width: 100%;
            height: 70px;
        }
    }
    @media(max-width:380px) {
        .btn-main .green-btn-img span {
            top: 21%;
            font-size: 13px;
            line-height: 18px;
        }
    }





    .debugging-content {
        line-height: 1em;
        margin-bottom: 0;
        margin-top: 0;
    }

    .debugging-title {
        font-weight: bold;
    }

    #details {
        color: #696969;
        margin: 45px 0 50px;
    }

    #details p:not(:first-of-type) {
        margin-top: 20px;
    }

    #error-code {
        color: black;
        opacity: .35;
        text-transform: uppercase;
    }

    #error-debugging-info {
        font-size: 0.8em;
    }

    .hidden {
        display: none;
    }

    .icon {
        background-repeat: no-repeat;
        background-size: 100%;
        height: 72px;
        margin: 0 0 40px;
        width: 72px;
    }

    input[type=checkbox] {
        visibility: hidden;
    }

    .interstitial-wrapper {
        box-sizing: border-box;
        font-size: 1em;
        line-height: 1.6em;
        margin: 50px auto 0;
        max-width: 600px;
        width: 100%;
        background: #fff;
        border: 1px solid #eceaea;
        position: relative;
    }

    #malware-opt-in {
        font-size: .875em;
        margin-top: 39px;
    }

    .nav-wrapper {
        margin-top: 51px;
    }

    .nav-wrapper::after {
        clear: both;
        content: '';
        display: table;
        width: 100%;
    }

    #opt-in-label {
        -webkit-margin-start: 32px;
    }

    .safe-browsing :-webkit-any(a, #details, #details-button, h1, h2, p, .small-link) {
        color: white;
    }

    .safe-browsing button {
        background-color: rgb(206, 52, 38);
        border: 1px solid white;
    }

    .safe-browsing button:active {
        background-color: rgb(206, 52, 38);
        border-color: rgba(255, 255, 255, .6);
    }

    .safe-browsing button:hover {
        box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
    }

    .safe-browsing .icon {
        background-image: -webkit-image-set(url(safebrowser2.png) 1x,
                url(safebrowser.png) 2x);
    }

    .small-link {
        color: #696969;
        font-size: .875em;
    }


    .styled-checkbox {
        float: left;
        height: 16px;
        margin-top: .36em;
        position: relative;
        width: 16px;
    }

    [dir='rtl'] .styled-checkbox {
        float: right;
    }

    .styled-checkbox label {
        background: transparent;
        border: white solid 1px;
        border-radius: 2px;
        height: 14px;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 14px;
    }

    .styled-checkbox label::after {
        background: transparent;
        border: 2px solid white;
        border-right-width: 0;
        border-top-width: 0;
        content: '';
        height: 4px;
        left: 2px;
        opacity: 0.3;
        position: absolute;
        top: 3px;
        transform: rotate(-45deg);
        width: 9px;
    }

    .styled-checkbox input[type=checkbox]:checked+label::after {
        opacity: 1;
    }

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

    @media (max-height: 600px) {
        .interstitial-wrapper {
            margin-top: 5px;
        }
        .show-board-text {
            font-size: 15px;
        }
    }

    @media (max-width: 400px) {

        button,
        [dir='rtl'] button {
            float: none;
            font-size: 1em;
            width: 100%;
        }

        #details {
            margin: 20px 0 20px 0;
        }

        #details p:not(:first-of-type) {
            margin-top: 10px;
        }

        #details-button {
            display: block;
            padding-top: 14px;
            text-align: center;
            width: 100%;
        }

        .interstitial-wrapper {
            padding: 0 5%;
        }

        #malware-opt-in {
            margin-top: 24px;
        }

        .nav-wrapper {
            margin-top: 30px;
        }

        .small-link {
            font-size: 1em;
        }
    }



    #diagnose-button {
        -webkit-margin-start: 0;
        float: none;
        margin-bottom: 10px;
        margin-top: 20px;
    }


    .icon {
        -webkit-user-select: none;
    }

    .icon-generic {
        /**
* Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted
* renderer process, so embed the resource manually.
*/
        content: -webkit-image-set(url('error.png') 1x,
                url('error2.png') 2x);
        height: 50px;
        padding-top: 20px;
        width: 41px;
    }

    .icon-offline {
        content: -webkit-image-set(url('offline.png') 1x,
                url('offline2.png') 2x);
        height: 47px;
        margin: 0 0 40px;
        position: relative;
        width: 44px;
    }

    #content-top {
        margin: 20px;
    }

    #help-box-outer {
        -webkit-transition: height ease-in 218ms;
        overflow: hidden;
    }

    #help-box-inner {
        background-color: #f9f9f9;
        border-top: 1px solid #EEE;
        color: #444;
        padding: 20px;
        text-align: start;
    }

    #suggestion {
        margin-top: 15px;
    }

    #short-suggestion {
        margin-top: 5px;
    }

    #sub-frame-error-details {
        color: #8F8F8F;
        /* Not done on mobile for performance reasons. */
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    [jscontent=failedUrl] {
        overflow-wrap: break-word;
    }

    #search-container {
        /* Prevents a space between controls. */
        display: flex;
        margin-top: 20px;
    }

    #search-box {
        border: 1px solid #cdcdcd;
        flex-grow: 1;
        font-size: 16px;
        height: 26px;
        margin-right: 0;
        padding: 1px 9px;
    }

    #search-box:focus {
        border: 1px solid rgb(93, 154, 255);
        outline: none;
    }

    #search-button {
        border: none;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        box-shadow: none;
        display: flex;
        height: 30px;
        margin: 0;
        padding: 0;
        width: 60px;
    }


    .hidden {
        display: none;
    }

    .suggestions {
        margin-top: 18px;
    }

    .suggestion-header {
        font-weight: bold;
        margin-bottom: 4px;
    }

    .suggestion-body {
        color: #777;
    }

    .error-code {
        color: #A0A0A0;
        margin-top: 15px;
    }

    /* Increase line height at higher resolutions. */
    @media (min-width: 641px) and (min-height: 641px) {
        #help-box-inner {
            line-height: 18px;
        }
    }

    /* Decrease padding at low sizes. */
    @media (max-width: 640px),
    (max-height: 640px) {

        #content-top {
            margin: 15px;
        }

        #help-box-inner {
            padding: 20px;
        }

        .suggestions {
            margin-top: 10px;
        }

        .suggestion-header {
            margin-bottom: 0;
        }

        .error-code {
            margin-top: 10px;
        }
    }

    /* 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;
        top: 0;
        width: 100%;
    }

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

    #sub-frame-error-details {
        margin: 0 10px;
        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;
        }
    }

    /* details-button is special; it's a <button> element that looks like a link. */
    #details-button {
        background-color: inherit;
        background-image: none;
        border: none;
        box-shadow: none;
        min-width: 0;
        padding: 0;
        text-decoration: underline;
    }

    /* Styles for platform dependent separation of controls and details button. */
    .suggested-left>#control-buttons,
    .suggested-right>#details-button {
        float: left;
    }

    .suggested-right>#control-buttons,
    .suggested-left>#details-button {
        float: right;
    }

    #details-button.singular {
        float: none;
    }

    #buttons::after {
        clear: both;
        content: '';
        display: block;
        width: 100%;
    }

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

    .offline .runner-container {
        height: 150px;
        max-width: 600px;
        overflow: hidden;
        position: absolute;
        top: 10px;
        width: 44px;
        z-index: 2;
    }

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

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

    #offline-resources {
        display: none;
    }

    @media (max-width: 400px) {

        .suggested-left>#control-buttons,
        .suggested-right>#control-buttons {
            float: none;
            margin: 50px 0 20px;
        }
    }

    @media (max-height: 350px) {


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

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

        .nav-wrapper {
            margin-top: 30px;
        }
    }