@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: normal;
    src: local("Titillium Web"), local("TitilliumWeb-Regular"), url(./TitilliumWeb-Regular-QRHAIATA.ttf) format("truetype")
}

.settings-page {
    height: 80%;
    justify-content: flex-start;
    display: flex;
    flex-flow: column nowrap;
    align-items: center
}

.settings-page .title {
    font-size: 3em
}

.settings {
    display: flex;
    flex-flow: column nowrap;
    font-size: 1.6em;
    margin-top: 3em
}

.settings .setting-item {
    display: flex;
    flex-flow: row nowrap;
    margin: 1em
}

.setting-item .name {
    margin-right: 2em;
    width: 6em
}

.setting-item .select-group {
    display: flex;
    flex-flow: row nowrap
}

.setting-item .select-item {
    opacity: .6;
    margin: 0 1em;
    transition: all .3s;
    cursor: pointer
}

.setting-item .select-item.selected {
    opacity: 1
}

.settings-page .actions {
    margin-top: 2em;
    font-size: 1.6em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center
}

.settings-page .button {
    padding: .5em
}

@media screen and (max-width: 1280px) {
    .settings {
        margin-top: 1em
    }

    .settings .setting-item {
        margin: .5em
    }

    .settings-page .actions {
        margin-top: 1em
    }
}

@media screen and (max-width: 800px) {
    .settings .setting-item {
        flex-flow: column nowrap
    }
}

@media screen and (max-width: 600px) {
    .settings {
        font-size: 1.2em
    }

    .settings-page .title {
        font-size: 2em
    }
}

@media screen and (max-width: 450px) {
    .settings {
        font-size: 1em
    }
}

.rank {
    height: 80%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    user-select: none;
    max-width: 100%
}

.rank .title {
    font-size: 3em
}

.rank .self-score {
    font-size: 1.6em
}

.rank .rank-table {
    margin-top: 3em;
    font-size: 1.2em;
    border-spacing: 0;
    display: block;
    max-height: 60%;
    max-width: 100%;
    overflow-y: scroll;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask: linear-gradient(to bottom, black, black calc(100% - 2.5em), transparent 100%);
    mask: linear-gradient(to bottom, black, black calc(100% - 2.5em), transparent 100%)
}

.rank .rank-table::-webkit-scrollbar {
    display: none
}

.rank .rank-table col {
    border-left: solid 1px white;
    border-right: solid 1px white
}

.rank .col-rank {
    width: 10em
}

.rank .col-score {
    width: 10em
}

.rank .col-name {
    width: 20em
}

.rank .rank-table td {
    padding: .2em 2em
}

.rank .rank-table tbody td:nth-child(4) {
    font-size: .8em;
    color: #aaa;
    white-space: nowrap
}

.rank .rank-table tbody td:nth-child(1):before {
    content: "#";
    margin-right: .2em
}

.rank .rank-table th {
    font-size: 1em;
    font-weight: bolder;
    padding: .5em 2em;
    background-color: #444;
    position: sticky;
    top: 0
}

.rank .rank-table tbody tr {
    transition: all .1s
}

.rank .rank-table tbody tr:hover {
    background-color: #ffffff1a;
    transition: all 0
}

.rank .rank-table td, th {
    border-left: solid 1px rgba(255, 255, 255, .1);
    border-right: solid 1px rgba(255, 255, 255, .1)
}

.rank .rank-table td:first-child, th:first-child {
    border-left: none 0
}

.rank .rank-table td:last-child, th:last-child {
    border-right: none 0
}

.rank .rank-table tfoot td {
    padding: 1em
}

.rank .actions {
    margin-top: 3em;
    font-size: 1.6em
}

.rank .rank-table td {
    white-space: nowrap
}

@media screen and (max-width: 1280px) {
    .rank .actions {
        margin-top: 1em
    }

    .rank .rank-table {
        margin-top: 1em
    }
}

@media screen and (max-width: 600px) {
    .rank .rank-table {
        font-size: 1em
    }
}

@media screen and (max-width: 400px) {
    .rank .title {
        font-size: 2em
    }

    .rank .self-score {
        font-size: 1em
    }

    .button {
        margin-left: 0;
        margin-right: 0
    }
}

.game-over {
    width: 80%;
    height: 80%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center
}

.game-over .title {
    font-size: 3em;
    margin-bottom: .5em;
    text-align: center;
    user-select: none
}

.game-over .score {
    font-size: 1.6em;
    text-align: center;
    user-select: none
}

.game-over .score .value {
    margin-left: 1em
}

.game-over .submit {
    margin-top: 10%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center
}

.game-over .error {
    margin-top: .5em;
    user-select: none
}

.game-over .input-name {
    background-color: transparent;
    font-size: 1.2em;
    color: #eee;
    border: solid 2px rgba(255, 255, 255, .3);
    padding: .3em 1em;
    display: flex;
    width: 100%;
    transition: all .3s
}

.game-over .input-name:hover {
    border: solid 2px rgba(255, 255, 255, .6)
}

.game-over .input-name:focus {
    border: solid 2px rgba(255, 255, 255, .8)
}

.game-over .actions {
    margin-top: 10%;
    font-size: 1.6em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center
}

.game-over .button {
    padding: .5em
}

.game-over .skip {
    opacity: .4
}

.game-over .skip:hover {
    opacity: .7
}

@media screen and (max-width: 400px) {
    .game-over .title {
        font-size: 2em
    }

    .game-over .input-name {
        width: 100%;
        box-sizing: border-box
    }
}

body {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #000;
    color: #eee;
    font-family: "Titillium Web", "Open Sans", Roboto, Segoe UI, Microsoft YaHei UI, Tahoma, Geneva, Verdana, sans-serif;
    overflow-y: hidden;
    overflow-x: hidden;
    user-select: none
}

* {
    outline: none;
    -webkit-tap-highlight-color: transparent
}

#root {
    position: absolute;
    width: 100%;
    height: 80%
}

#canvas {
    height: 100%;
    width: 100%
}

input {
    font-size: 1em
}

.page {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    transition: all 1s
}

ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.button {
    padding: .5em 2em;
    margin: .5em;
    text-align: center;
    user-select: none;
    cursor: pointer;
    opacity: .6;
    transition: all .3s;
    color: #fff
}

.button:hover {
    opacity: 1
}

.button:before {
    font-size: 1em;
    content: ">";
    margin-right: .5em;
    opacity: 0;
    transition: all .3s
}

.button:after {
    font-size: 1em;
    content: "<";
    margin-left: .5em;
    opacity: 0;
    transition: all .3s
}

.button:hover:before {
    opacity: 1
}

.button:hover:after {
    opacity: 1
}

.main-menu {
    font-size: 1.6em
}

.page.ease-out {
    opacity: 0;
    transition: opacity .2s ease-out
}

.page.ease-in {
    opacity: 0
}

.page.present {
    opacity: 1;
    transition: opacity .2s ease-in
}

.page.hidden {
    opacity: 0
}

.page.inactive {
    pointer-events: none
}

@media screen and (max-width: 400px) {
    .button {
        margin-left: 0;
        margin-right: 0
    }
}