/**
 *
 * Copyright (c) 2020 Alexander Bazhanov
 * https://github.com/bazhanius/
 *
 */

@import url('https://fonts.googleapis.com/css?family=Exo+2:400,600,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');

@font-face{
    font-family: 'JetBrains Mono';
    src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/web/eot/JetBrainsMono-Regular.eot') format('embedded-opentype'),
    url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/web/woff2/JetBrainsMono-Regular.woff2') format('woff2'),
    url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/web/woff/JetBrainsMono-Regular.woff') format('woff'),
    url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/ttf/JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@media only screen and (orientation : landscape) {
    body {
        --tile-width: 10vh;
    }
}

@media only screen and (orientation : portrait) {
    body {
        --tile-width: 15vw;
    }
}

body {
    --black: #1d1d1f;
    --yellow: #FEF102;
    --yellow-lite: #fbf87a;
    --blue: #06c;
    --blue-btn: #0077ED;
    --red: #EF1D26;
    --white: #ece5da;
    --gray: #24292e;
    --gray-lite: #6a737d;
    --gray-super-lite: #eee;
    --green: #3bd53e;
    width: calc(100% - 0.5px);
    height: calc(100% - 0.5px);
    margin: 0;
    padding: 0;
    font-family: "Exo 2", sans-serif;
    color: var(--black);
    box-sizing: border-box;
    /*box-shadow: inset 0 0 var(--tile-width) calc(var(--tile-width) / 3) rgba(3, 6, 23, 0.1);*/
}

a {
    color: var(--gray-lite);
    text-decoration: none;
}
a:hover, a:focus {
    color: var(--gray);
}

.hidden {
    opacity: 0;
}

canvas {
    pointer-events: none;
}

.grabbing-cursor {
    cursor: grabbing;
}

.pointer-cursor {
    cursor: pointer;
}

.x-close {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(var(--tile-width) * .45) 0;
    padding: 0;
}

/* Not used */
.shake-effect {
    animation: shake-effect 1s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0) rotateX(10deg);
    backface-visibility: hidden;
    /*perspective: 1000px;*/
}

@keyframes shake-effect {
    10%, 90% {
        transform: translate3d(-1vw, 0, 0) rotateX(10deg);
    }
    20%, 80% {
        transform: translate3d(2vw, 0, 0) rotateX(-40deg);
    }
    30%, 50%, 70% {
        transform: translate3d(-4vw, 0, 0) rotateX(40deg);
    }
    40%, 60% {
        transform: translate3d(4vw, 0, 0) rotateX(10deg);
    }
}

kbd {
    display: inline-block;
    padding: 3px 5px;
    font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    line-height: normal;
    line-height: 10px;
    color: #444d56;
    vertical-align: middle;
    background-color: #fafbfc;
    border: 1px solid #d1d5da;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 #d1d5da;
}