@import "fonts.css";

/* Accent colors from catppuccin */

html {
    background-color: #24252d;
    min-height: 100vh + 8px;
}

body {
    width: 800px;
    min-height: 100vh;
    margin: auto;
    color: white;
    font-family: "CTMKF", "Rubik", monospace;
}

@media only screen and (max-width: 800px) {
    body {
        width: 100%;
    }

    .scroll {
        overflow: hidden;
        overflow-x: scroll;
    }

    #backwards {
        margin-left: 2ch;
    }

    #forwards {
        margin-right: 2ch;
    }
}

h1 {
    font-size: 64px;
}

hr {
    color: white;
}

.no-margin-top {
    margin-top: 0;
}

.title {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 20px;
    text-align: center;
}

#player-count-header {
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    text-align: center;
}

#fetch-info {
    text-align: center;
    margin-top: 8px;
    margin-bottom: 0;
    font-weight: 400;
}

#fetch-timestamp {
    float: none;
}

.cycle-button {
    background: none;
    border: none;
    font-weight: 900;
    color: #45475a;
}

.cycle-button.active {
    color: #f2cdcd;
}

.cycle-button.active:hover {
    text-decoration: underline;
}

#mega-backwards,
#backwards {
    float: left;
}

#backwards {
    margin-left: 1ch;
}

#mega-forwards,
#forwards {
    float: right;
}

#forwards {
    margin-right: 1ch;
}

#no-data {
    text-align: center;
    margin-top: 24px;
    margin-bottom: 24px;
    font-weight: 400;
}

.upspan {
    font-variant-numeric: tabular-nums;
}

.excited {
    animation-name: excited;
    animation-delay: 0s;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
    animation-iteration-count: infinite;
}

@keyframes excited {
    0% {
        color: #cba6f7;
    }

    17% {
        color: #f38ba8;
    }

    33% {
        color: #fab387;
    }

    50% {
        color: #f9e2af;
    }

    67% {
        color: #a6e3a1;
    }

    83% {
        color: #89b4fa;
    }

    100% {
        color: #cba6f7;
    }
}

.count-text {
    color: #cba6f7;
}

.room-info {
    font-size: 24px;
    font-weight: 400;
    text-align: center;
}

.room-id {
    text-decoration: underline;
}

.joinable {
    color: #a6e3a1;
}

.not-joinable {
    color: #f38ba8;
}

.public {
    color: #89dceb;
}

.private {
    color: #b4befe
}

.players {
    color: #f2cdcd;
}

.avg-vr {
    color: #f5c2e7;
}

.oh-true {
    color: #a6e3a1;
}

.oh-false {
    color: #f38ba8;
}

.connmap {
    color: #a6e3a1;
}

.connmap-warning {
    color: #f38ba8;
}

table {
    width: 100%;
    max-width: 100%;
    margin: auto;
    border-collapse: collapse;
}

tbody tr:nth-child(odd) {
    background-color: #1f2028;
}

th {
    border-bottom: 1px solid white;
    font-style: normal;
    font-weight: 1000;
}

td {
    text-align: center;
    padding: 5px 10px 5px 10px;
}

img.mii {
    max-width: 32px;
    max-height: 32px;
}

#rooms-list>thead>tr,
#rooms-list>tbody>tr {
    font-size: 18px;
}

tr.player-row {
    height: 46px;
    min-height: 46px;
}

td.mii {
    width: 32px;
    min-width: 32px;
}

tr.closed {
    display: none;
}

.scroll {
    max-width: 100%;
}

.footer {
    padding: 4px;
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
    font-weight: 400;
}

.footer>ul {
    padding: 0;
    padding-top: 10px;
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

a.footer-link {
    margin-left: 10px;
    margin-right: 10px;
}

a.footer-link:link {
    text-decoration: none;
    color: #f2cdcd;
}

a.footer-link:visited {
    color: #f2cdcd;
}

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

div.center {
    text-align: center;
}