/* 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. */

:root {
    --background: #181d32;
    --color: #ffffff;
    --primary: #ff5a40;
    --secondary: #00758c;
    --secondary-rgb: 0, 117, 140;
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    color: var(--color);
    background: var(--background);
}

body {
    background-color: transparent;
    padding: 2rem 0 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.logo {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: -42;
}

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

.icon-offline {
    content: -webkit-image-set(url(assets/default_100_percent/100-error-offline.png) 1x, url(assets/default_200_percent/200-error-offline.png) 2x);
    position: relative;
}

.hidden {
    display: none;
}


/* Offline page */
.dino-wrapper {
    margin: 2rem auto 4rem;
    max-width: 600px;
}

.runner-container {
    position: relative;
    top: 0;
    height: 150px;
    width: 44px;
    overflow: hidden;
}

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

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

#offline-resources {
    display: none;
}

.score-block {
    background: rgba(var(--secondary-rgb), .5);
    border: 2px solid var(--color);
    border-radius: 8px;
}

.score-block .btn-primary {
    border-color: var(--color);
}

.table th, .table td {
    background: transparent;
    color: var(--color);
}

.table thead th {
    background: var(--secondary);
}

.table tr.new th, .table tr.new td {
    background: var(--primary);
}

.btn-primary {
    background: var(--secondary);
    border: 2px solid var(--secondary);
}

.btn-primary:focus, .btn-primary:hover {
    background: var(--primary);
    border-color: var(--color);
}

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

.footer {
    flex-grow: 1000;
    width: 100vw;
    display: flex;
    justify-content: center;
    height: 100%;
}

.meta-nav {
    align-self: flex-end;
}

.meta-nav a {
    color: var(--secondary);
    display: inline-block;
    text-decoration: none;
}

.meta-nav a:not(:first-of-type) {
    margin-left: 2rem;
}

/* Cyber Animation */
.cyber-animation {
    position: absolute;
    bottom: 15%;
    right: 15%;
    color: var(--secondary);
    width: 30%;
    height: auto;
    max-height: 25vh;
}

@media (max-height: 480px) {
    .cyber-animation {
        opacity: .3;
    }
}

.cyber-animation rect {
    stroke: var(--color);
    stroke-width: 6px
}

.cyber-animation rect:first-of-type {
    animation: .33s ease-in-out .12s forwards to-x2-y1, .33s ease-in-out .84s forwards to-x1-y1, .33s ease-in-out 1.41s forwards to-x1-y4, .33s ease-in-out 2.07s forwards to-x3-y4;
    transform: translate(125px, 62.5px)
}

.cyber-animation rect:nth-of-type(2) {
    animation: .33s ease-in-out forwards to-x3-y1, .33s ease-in-out 1.74s forwards to-x2-y1;
    transform: translate(250px, 62.5px)
}

.cyber-animation rect:nth-of-type(3) {
    animation: .33s ease-in-out .36s forwards to-x2-y3, .33s ease-in-out 2.52s forwards to-x1-y3;
    transform: translate(125px, 187.5px)
}

.cyber-animation rect:nth-of-type(4) {
    animation: .33s ease-in-out .24s forwards to-x3-y2, .33s ease-in-out .72s forwards to-x2-y2, .33s ease-in-out 2.52s forwards to-x1-y2;
    transform: translate(250px, 187.5px)
}

.cyber-animation rect:nth-of-type(5) {
    animation: .33s ease-in-out .6s forwards to-x2-y4, .33s ease-in-out 1.08s forwards to-x3-y4, .33s ease-in-out 1.74s forwards to-x3-y1;
    transform: translate(125px, 312.5px)
}

.cyber-animation rect:nth-of-type(6) {
    animation: .33s ease-in-out .48s forwards to-x3-y4, .33s ease-in-out .96s forwards to-x3-y1, .33s ease-in-out 1.41s forwards to-x1-y1, .33s ease-in-out 2.07s forwards to-x1-y4, .33s ease-in-out 2.4s forwards to-x2-y4;
    transform: translate(250px, 312.5px)
}

@keyframes to-x1-y1 {
    to {
        transform: translate(0)
    }
}

@keyframes to-x1-y2 {
    to {
        transform: translateY(125px)
    }
}

@keyframes to-x1-y3 {
    to {
        transform: translateY(250px)
    }
}

@keyframes to-x1-y4 {
    to {
        transform: translateY(375px)
    }
}

@keyframes to-x2-y1 {
    to {
        transform: translate(125px)
    }
}

@keyframes to-x2-y2 {
    to {
        transform: translate(125px, 125px)
    }
}

@keyframes to-x2-y3 {
    to {
        transform: translate(125px, 250px)
    }
}

@keyframes to-x2-y4 {
    to {
        transform: translate(125px, 375px)
    }
}

@keyframes to-x3-y1 {
    to {
        transform: translate(250px)
    }
}

@keyframes to-x3-y2 {
    to {
        transform: translate(250px, 125px)
    }
}

@keyframes to-x3-y3 {
    to {
        transform: translate(250px, 250px)
    }
}

@keyframes to-x3-y4 {
    to {
        transform: translate(250px, 375px)
    }
}