@font-face { font-family: 'Noto Sans'; src: url('/res/fonts/noto/NotoSans-Regular.ttf'); } 
/* @font-face { font-family: 'E1234'; src: url('/dist/res/fonts/E1234.ttf'); } */

:root {
    --nav-height: 70px;
    --font-small: calc( 12px + 2 * ((100vw - 320px) / 880));
    --font-smaller: calc(var(--font-small) * 0.9);
    --font-xsmaller: calc(var(--font-small) * 0.75);
    --font-2xsmaller: calc(var(--font-small) * 0.6);
    --font-normal-minus: calc(var(--font-small) * 1.1);
    --font-normal: calc(var(--font-small) * 1.2);
    --font-normal-plus: calc(var(--font-small) * 1.4);
    --font-medium: calc(var(--font-small) * 1.6);
    --font-large: calc(var(--font-small) * 2);
    --font-larger: calc(var(--font-small) * 3);
    --font-large4x: calc(var(--font-small) * 4);
    --font-large6x: calc(var(--font-small) * 6);
    --font-enormous1: calc(var(--font-small) * 10);
    --font-enormous2: calc(var(--font-small) * 20);
    --game-button-size: calc( 110px + (20 * (100vw - 320px) / 1600));
}

.w-small { width: var(--font-small); }
.w-smaller { width: var(--font-smaller); }
.w-xsmaller { width: var(--font-xsmaller); }
.w-2xsmaller { width: var(--font-2xsmaller); }
.w-normal-minus { width: var(--font-normal-minus); }
.w-normal { width: var(--font-normal); }
.w-normal-plus { width: var(--font-normal-plus); }
.w-medium { width: var(--font-medium); }
.w-large { width: var(--font-large); }
.w-larger { width: var(--font-larger); }
.w-large4x { width: var(--font-large4x); }
.w-large6x { width: var(--font-large6x); }
.w-enormous1 { width: var(--font-enormous2); }
.w-enormous2 { width: var(--font-enormous2); }

.h-small { height: var(--font-small); }
.h-smaller { height: var(--font-smaller); }
.h-xsmaller { height: var(--font-xsmaller); }
.h-2xsmaller { height: var(--font-2xsmaller); }
.h-normal-minus { height: var(--font-normal-minus); }
.h-normal { height: var(--font-normal); }
.h-normal-plus { height: var(--font-normal-plus); }
.h-medium { height: var(--font-medium); }
.h-large { height: var(--font-large); }
.h-larger { height: var(--font-larger); }
.h-large4x { height: var(--font-large4x); }
.h-large6x { height: var(--font-large6x); }
.h-enormous1 { height: var(--font-enormous2); }
.h-enormous2 { height: var(--font-enormous2); }

.fs-small { font-size: var(--font-small); }
.fs-smaller { font-size: var(--font-smaller); }
.fs-xsmaller { font-size: var(--font-xsmaller); }
.fs-2xsmaller { font-size: var(--font-2xsmaller); }
.fs-normal-minus { font-size: var(--font-normal-minus); }
.fs-normal { font-size: var(--font-normal); }
.fs-normal-plus { font-size: var(--font-normal-plus); }
.fs-medium { font-size: var(--font-medium); }
.fs-large { font-size: var(--font-large); }
.fs-larger { font-size: var(--font-larger); }
.fs-large4x { font-size: var(--font-large4x); }
.fs-large6x { font-size: var(--font-large6x); }
.fs-enormous1 { font-size: var(--font-enormous2); }
.fs-enormous2 { font-size: var(--font-enormous2); }

.game-font {
    font-family: 'E1234';
    font-weight: bold;
}

body {
    display: block;
    background-color: #333/*#3c3a4a*/;
    color: #bababa;
    
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-weight: regular;
    font-size: var(--font-normal);

    caret-color: transparent;
    background-image: url("/res/northern-lights-2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 100vh;
}

button {
    font-family: 'Noto Sans', sans-serif;
    font-weight: lighter;
}

input {
    caret-color: auto;
}

.body-link {
    color: #f2f2f2;
    text-decoration: underline;
}

/* nav */
.topnav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    overflow: hidden;
    background-color: #333;
    align-items: 'center'
    /* vertical-align: bottom; */
    /* height: var(--nav-height); */
}

.topnav a,
.topnav-small {
    margin-top: auto;
    margin-bottom: auto;
    /* float: left; */
    color: #bababa;
    fill: #bababa;
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;

    /* height: 100%; */
}

.topnav-left {
    display: flex;
    justify-content: flex-start;
}

.topnav-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right:10px;
}

.nav-image {
    width: 22px;
    height: 22px;
}

.nav-image path {
    fill: inherit;
}

.nav-menu-image path {
    fill: inherit;
}

/* .topnav-small:after {
    content: '|';
    padding: 0 1rem;
} */

.topnav a:hover,
.topnav-small:hover,
.topnav-dropdown-pane div:hover,
.topbar-dropdown.hover .topbar-dropdownbtn,
.topbar-dropdownbtn:focus {
    /* background-color: #ddd;
    color: black; */
    color: #8272ed;
    fill: #8272ed;
    background-color: #3a3939;

    /* border-left: 2px solid red; */
}

.topnav a.active {
    background-color: #04AA6D;
    color: white;
}



.topnav-dropdown {
    /* float: left; */
    /* overflow: hidden; */
}

.topnav-dropdown .topnav-dropdownbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    text-align: center;
}

.topnav-dropdown-content {
    /* display: none; - controlled by react */
    position: absolute;
    background-color: #333;
    color: #f2f2f2;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.topnav-dropdown-content a {
    float: none;
    /* color: black; */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav-dropdown-pane {
    position: absolute;
    background-color: #333;
    color: #bababa;
    fill: #bababa;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    z-index: 1; 

    display: flex;
    flex-direction: column;
    padding: 20px;
}

.topnav-dropdown-pane-no-hover {
    position: absolute;
    background-color: #333;
    color: #bababa;
    fill: #bababa;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    z-index: 1; 

    display: flex;
    flex-direction: column;
    padding: 20px;
}

/* .topnav-dropdown-content a:hover {
    background-color: #ddd;
} 
*/

.page-title {
    font-size: var(--font-larger);
    font-weight: 500;
}

.heading-title {
    font-size: var(--font-large);
    font-weight: 300;
}

.vertical-page {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.settings-tabs {
    width: fit-content;
}

.settings-tabs button {
    color: #bababa;
}

.settings-tabs button[aria-selected='true'] {
    color: #8272ed;
    background-color: #3a3939;
}


.settings-multiplayer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.settings-section-title {
    width: fit-content;
    font-size: var(--font-normal-plus);
    font-weight: bold;
    padding: 20px;
}


/* END of nav */

/* Game bar */


.score-pane {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    justify-content: flex-start;
    align-items: center;
}

.game-bar-delta {
    font-weight: 400;
    width: 65px;
}

.game-bar-delta-win {
    color: #139c37
}

.game-bar-delta-lost {
    color: #ed6d6d;
}

.game-bar-delta-draw {
    color: #76767a
}

.overlay {
    position: fixed; /* Sit on top of the page content */
    /* display: none; */ /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

/* tooltip */
.overlay-tooltip {
  width: fit-content;
  background-color: #444;
  color: #ddd;
  text-align: center;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 6px;
  border: 1px solid #aaa;
  
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 2;
}

.tooltip-pane { /* tooltip with complex content*/
    background-color: #444;
    color: #ddd;
    padding: 15px 15px 15px 15px;
    margin-right: -10px;

    border-radius: 25px;
    border: 1px solid #aaa;
}

.centered-overlay-pane {
    text-align: center;
    position: absolute;
    
    left:0;
    right:0;
    
    margin-left:auto;
    margin-right:auto;
  
    top: 50%;
    transform: translateY(-50%);
    
    width: fit-content;
    background-color: #333;
    color: #EEE;

    border-radius: 20px;
    border: 2px solid #bababa;
    z-index: 100;
}

.game-result-overlay-button {
    width: 95%;
    height: 30px;
    margin-bottom: 7px;
}


.game-result-overlay-score-table {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
}

.invisible-overlay-pane {
    text-align: center;
    position: absolute;
    
    left:0;
    right:0;
    
    margin-left:auto;
    margin-right:auto;
  
    top: 50%;
    transform: translateY(-50%);
    
    width: fit-content;
    background-color: transparent;
    color: #EEE;

    z-index: 101;
}

.start-countdown {
    font-size: var(--font-enormous2);
}

/* form layout */
.form-static-row {
    padding-bottom: 10px;
}

.form-input-group {
    display: flex;
    flex-direction: column;
    align-content: left;
    text-align: left;
    padding-bottom: 30px;
}

.form-input-group input {
    background: #333;
    color: #bababa;
    padding: 5px;
    font-weight: bold;
    border: 1px solid #606060;
}

.form-input-group a {
    color: #f2f2f2;
}

.form-input-group a:hover {
    color: #8272ed;
    background-color: #222;
}

.form-button {
    background-color: #3692e7;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 50px;
}

.form-button-neutral {
    background-color: #344b61;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 10px;
    border-color: #999;
    padding-left: 6px;
    padding-right: 6px;
}

.form-button-neutral:focus {
    border-color: #FFF !important;
}


.form-button-neutral:disabled {
    color:#7c7c7c !important;
    border-color: #7c7c7c !important;;
}

.fake-button {
    cursor: pointer;
    padding: 1px;
    border-radius: 3px;
}

.fake-button:hover {
    background-color: #444;
}

.form-error {
    color:crimson;
}

.form-success {
    color:#04AA6D;
}

.form-horizontal {
    /* margin-top: 20px; */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.form-horizontal-fields {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.form-horizontal-fields a {
    color: #f2f2f2;
    text-align: center;
    padding: 14px 25px;
    text-decoration: none;
    font-size: 17px;
}

.form-horizontal-fields a:hover {
    color: #8272ed;
    background-color: #222;
}

.form-field-validation-fail {
    border: 1px solid crimson !important;
}

.form-validation-error {
    color: crimson !important;
    font-weight: normal !important;
}

.form-bottom-fine-print {
    font-size: var(--font-smaller);
    font-weight: normal !important;

    padding-top: 20px;
}

.form-bottom-fine-print a {
    color: #f2f2f2;
}

.form-bottom-fine-print a:hover {
    color: #8272ed;
    background-color: #222;
}


/* front page */

.front-page-top-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 50px;
}

.help-page-top-content {
    max-width: 1300px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    padding-top: 20px;
}

.help-page-pane-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 10px;
    font-size: var(--font-normal);
    text-transform: uppercase;
    padding-top:5px;
    padding-bottom:3px;
    margin-bottom: 15px;
    margin-left: 5px;
    margin-right: 5px;

    border-bottom: 1px solid #bababa;;
}

.bg-white {
    background-color: #bababa;
    border-radius: 3px;
}

.front-page-pane {
    display: flex;
    flex-direction: column;
    
    width: fit-content;
    background-color: #3d3b3b;
    
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 10px;

    margin-left: 5px;
    margin-right: 5px;
    margin-top: 15px;

    border-radius: 10px;
    border: 1px solid #444;
    cursor: default;
}

.front-page-pane-title {
    text-align: center;
    font-size: var(--font-normal);
    text-transform: uppercase;
    padding-top:5px;
    padding-bottom:3px;
    margin-bottom: 15px;
    margin-left: 5px;
    margin-right: 5px;

    border-bottom: 1px solid #bababa;;
}

.goof-pane {
    position:sticky;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 40px;
}

.goof-pane-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #444;

    padding: 10px;
    border-radius: 7px;
    height: 100%;
    max-width: 235px;
}

.goof-pane-image {
    width: 15px;
    height: 15px;
    margin-right: 10px;
}

.social-pane-content {
    background-color: #444;
    column-gap: 10px;
    height: 100%;
}

.social-pane-line {
    display: flex;
    flex-direction: row;
    border-radius: 3px;
    padding: 4px;
    margin-bottom: 6px;
    justify-content:left;

    width: 245px;
}

.social-pane-content a {
    color: #bababa;
}
    .social-descr {
        width: 80px;
    }

.front-page-pane-content {
    width: 250px;
}

.front-page-pane-content-flex-top-bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.leaderboard-pane-content {
    width: 250px;
}

.leaderboard-table {
    font-size: var(--font-small);
    border-spacing: 0px;
    width: fit-content;
}

.leaderboard-table td {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #555;
}

.leaderboard-table-cell-with-img {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    /* display: flex;
    flex-direction: row; */
}

.leaderboard-row {
    background-color: #333;
}

.leaderboard-row-odd {
    background-color: #444444;
}

.leaderboard-row:hover {
    background-color: #555555;
}


.leaderboard-img {
    height: var(--font-small) !important;
    width: var(--font-small) !important;
    margin: 2px;
}

.leaderboard-img-stretched {
    width: var(--font-large) !important;
    height: var(--font-normal) !important;
    margin-right: 3px;
    padding: 1px;
}

.leaderboard-name-cell {
    margin-left: 5px;
    width: 170px;
}

.leaderboard-score-cell {
    width: 60px;
}

.competitions-table {
    border-spacing: 0px;
}

.competitions-table tr:nth-child(odd){
    background-color: #444444;
    
}

.competitions-table td {
    border-bottom: 1px solid #555;
    padding-top: 5px;
    padding-bottom: 5px;
}

.small-button {
    background-color: #139c37;
    color: #f2f2f2;
    font-size: var(--font-smaller);
    border-radius: 4px;
    padding-right: 4px !important;
    padding-left: 4px !important;
    border-radius: 20px;
}

.medium-button {
    background-color: #139c37;
    color: #f2f2f2;
    font-size: var(--font-small);
    border-radius: 30px;
    padding: 5px;
}

.medium-button:disabled {
    background-color: #797b79;
    color: #c9c9c9;
}

.toast-button {
    border-radius: 4px;
    border: 1px solid #555;
}

.toast-button:hover {
    background-color: #eee;
}

.svg-button {
    border-radius: 4px;
    border: 1px solid #555;
}

.svg-button:hover {
 background-color: #666;   
}

.front-page-new-game-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
}

.front-page-new-game-buttons-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: fit-content;
    align-items: center;
    margin-top: auto;
}

.front-page-new-game-button {
    background-color: #363442;
    color: #f2f2f2d5;
    text-align: center;
    height: var(--game-button-size);
    width: var(--game-button-size);
    border-radius:10px;
    font-size: var(--font-small);
}

.button-lift-hover:hover {
    transform: translateY(-5px);
}

.button-right-hover:hover {
    transform: translateX(5px);
}

.button-select-translate {
    transform: translateX(10px) !important;
}

.link-underline-hover:hover {
    text-decoration: underline;
}

.front-page-new-game-button-image {
    width: 70px;
    height: 50px;
    margin-top: 7px;
    margin-bottom: 13px;
}

.front-page-new-game-button-image-squared {
    width: 70px;
    height: 70px;
    margin-top: 0px;
    margin-bottom: 7px;
}

.button-red {
    background-color: darkred;
}

.button-yellow {
    background-color: goldenrod;
}

.button-blue {
    background-color: darkblue
}

.button-purple {
    background-color: rebeccapurple;
}

.button-orange {
    background-color: darkorange;
}

.help-pane-content {
    width: 350px;
     /* max-width: 300px; */
}

.help-pane-image {
    width: 50px;
    height: 50px;
    padding-right: 10px;
    float: left;
}

.help-pane-image-small {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    float: left;
}

.help-pane-image-smaller {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    float: left;
}
/* watch */
.front-page-watch {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

.front-page-games-title {
    text-align: center;
    font-size: var(--font-normal);
    padding-top:5px;
    padding-bottom:5px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.watch-pane-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid grey;
    border-radius: 10px;
}

.watch-game-title {
    text-align: center;
    font-size: large;
    /* border: 2px solid grey;
    border-radius: 6px; */
    margin-bottom: 20px;
    padding-top:5px;
    padding-bottom:5px;
    background-color: #363442;
}

.watch-pane {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: flex-start;
    
}

.watch-player-pane {
    display: flex;
    flex-direction: column;
    flex-wrap: none;
}

.watch-game-bar {
    color:#cac9d4;
    /* height: 30px;
    vertical-align: text-top; */
    display: flex; 
    flex-direction: row;
    justify-content:  space-between;
    align-items: center;
    padding-bottom: 5px;
}

.watch-pane-pad-right {
    padding-right: 5px;
}

.watch-pane-pad-left {
    padding-left: 5px;
}

.watch-game-bar-name {
    font-size: var(--font-smaller);
    font-weight: normal;
    padding-left: 7px;
    padding-right: 2px;
    
    overflow: hidden;
    white-space: nowrap;
    max-width: 100px;

    /* transform: translateY(5px); */
}

.game-icon-square {
    width: var(--font-large) !important;
    height: var(--font-large) !important;
    padding: 2px;
}

.game-icon-square-large {
    width: var(--font-larger) !important;
    height: var(--font-larger) !important;
    padding: 2px;
}

.in-game-icon {
    margin: 4px;
    border-radius: 5px;
}

.hit-the-top-icon {
    background-color: darkblue;
    margin: 4px;
    border-radius: 5px;
}

.pursuit-icon {
    background-color: darkred;
    margin: 4px;
    border-radius: 5px;
}

.watch-score-pane-pursuit {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: fit-content;
    font-size: var(--font-large);
}

/* end watch */

/* end front page */

/* terms and conditions */
.terms-page {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;

    margin-left: auto;
    margin-right: auto;

    margin-top: 40px;

    max-width: 640px;
}

.terms-page h3 {
    margin-block-start: 0;
    margin-block-end: 0;
}
/* end of terms and conditions */


/* spacing*/

/* end spacing */

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

.grecaptcha-badge { 
    visibility: hidden;
}

/* game button effects */

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0);
    }
}
    
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }
    40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
    }
    70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
    }
    90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0);
    }
}


@keyframes slidecenter {
    0% {
        transform: translateZ(400px); 
        -webkit-transform: translateZ(400px);
        opacity: 1;
        filter: blur(0);
        -webkit-filter: blur(0);
        transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715);
        -webkit-transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715);
    }
    100% {
        transform: translateZ(-400px);
        -webkit-transform: translateZ(-400px);
        filter: blur(3px);
        -webkit-filter: blur(3px);
        opacity: 0.05;
    }
}

.slidecenter {
    animation-name: slidecenter;
    -webkit-animation-name: slidecenter;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}
/* end game buttons effect */


/* gamepad  things */

.gamepad-selected {
    box-shadow:0px 0px 0px 4px orange inset;
    border-radius: 4px !important;
}

.gamepad-selected-small {
    box-shadow:0px 0px 0px 2px orange inset;
    border-radius: 3px !important;
}


/* markdown styling */
.md-content table {
    width: 300px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.md-content td {
    text-align: center;
    padding: 4px;
}

.md-content thead {
    background-color: #444;
}

.md-content th {
    padding: 2px;
    text-align: center;
}

:target {
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 30px;
    padding: 10px;
    background-color: #444;
    border-radius: 20px;
    font-style: italic;
}

/* for separators */

.separator {
    width: 100%;
    height: 1px;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #ccc;
}