/* Declarations */
body {
    --background: #AAAAAA;
    --bold: bold;
    --text: #111;
    --p-text: #1f1f1f;
    --shmeado-color: #2A3142;
    --shmeado-color-text: var(--shmeado-color);
    --anchor: #0200EC;

    --make-blue-light: #5555FF;
    --make-dark-blue-light: #0000AA;
    --make-dark-blue-dark-aqua: #0000AA;
    --make-dark-red-red: #AA0000;
    --make-dark-gray-white: #555555;
    --make-gray-white: #AAAAAA;
    --make-white-gray: #FFFFFF;
    --make-dark-aqua-light: #00AAAA;
    --make-dark-gray-light-gray: #555555;
    --make-dark-green-light-green: #00AA00;
    --make-light-green-dark-green: #55FF55;

    --header: var(--shmeado-color);
    --sidebar: #2A3142CC;
    --hover: var(--sidebar);
    --header-search-bar: #2A3142AA;
    --main-element: rgba(256, 256, 256, 0.85);
    --online-details-container: rgb(41, 41, 41, 0.85);

    --nav-game-general: linear-gradient(to right, rgba(170,170,170,0.1) 20%, rgba(170,170,170,0.1)), url("/static/skywars/main/images/navGameGeneral.9ea03092244b.png");
    --nav-game-modes: linear-gradient(to right, rgba(170,170,170,0.1) 20%, rgba(170,170,170,0.1)), url("/static/skywars/main/images/navGameModes.bb269cf11764.png");
    --nav-game-bedwars: linear-gradient(to right, rgba(170,170,170,0.1) 20%, rgba(170,170,170,0.1)), url("/static/skywars/main/images/navGameBedWars.bd65344e5670.png");
    --nav-game-skywars: linear-gradient(to right, rgba(170,170,170,0.1) 20%, rgba(170,170,170,0.1)), url("/static/skywars/main/images/navGameSkyWars.5231684561c9.png");
    --nav-game-duels: linear-gradient(to right, rgba(170,170,170,0.1) 20%, rgba(170,170,170,0.1)), url("/static/skywars/main/images/navGameDuels.9da840fbcada.png");

    --nav-tab-button-background: var(--shmeado-color);
    --nav-tab-button-selected-background: #FFF;
    --nav-tab-button-selected-text: var(--shmeado-color);

    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: var(--background);
    --scrollbar-thumb-hover: #555555;

    --placeholder-border: 3px;
    --placeholder-margin: 10px;
    --pill-selected-background: var(--shmeado-color);
    --pill-selected-text: #FFF;
    --scroll-row: 1px #AAAAAA solid;
    --skin-shadow: drop-shadow(0px 0px 6px);

    --divider-color: var(--shmeado-color);
    --table-th-background: var(--shmeado-color);
    --table-tr-background: #FFF;
    --table-text: #333;
    --table-hover: #D3D3D3;

    --home-search: linear-gradient(to right, rgba(255,255,255,0.75), rgba(255, 255, 255, 0.5)), url("/static/skywars/home/images/skywarsBackground.7779d5461917.png");
    --home-search-container: linear-gradient(to left, rgba(255,255,255,0.5), rgba(255,255,255,1));
    --home-search-navbar: var(--sidebar);

    --popular-profiles-title: var(--shmeado-color-text);

    --search-border: var(--shmeado-color);
    --search-term-text: #000000;
    --search-background: #FFF;
    --search-button-background: var(--shmeado-color);
    --search-button-border: 0px;
    --search-button-border-full: 0px;
    --search-button-color: #FFF;
    --select-items: #FFF;
    --select-items-hover: #D3D3D3;

    --leaderboard-select: var(--shmeado-color);
    --leaderboard-question: var(--shmeado-color);
    --selected-limit-text: #FFF;
    --unselected-limit-text: var(--shmeado-color);
    --leaderboard-bottom-line: #AAAAAA;

    --faqa: #FFF;
}

body.dark-theme {
    --background: #222222;
    --bold: normal;
    --text: #EEE;
    --p-text: var(--text);
    --shmeado-color: #181818;
    --shmeado-color-text: var(--text);
    --anchor: #5555FF;

    --make-blue-light: var(--text);
    --make-dark-blue-light: var(--text);
    --make-dark-blue-dark-aqua: #00AAAA;
    --make-dark-red-red: #FF5555;
    --make-dark-gray-white: var(--text);
    --make-gray-white: var(--text);
    --make-white-gray: #AAAAAA;
    --make-dark-aqua-light: #55FFFF;
    --make-dark-gray-light-gray: #AAAAAA;
    --make-dark-green-light-green: #55FF55;
    --make-light-green-dark-green: #00AA00;

    --header: #292929;
    --sidebar: #181818AA;
    --hover: #29292980;
    --header-search-bar: var(--sidebar);
    --main-element: var(--shmeado-color);
    --online-details-container: var(--background);

    --nav-game-background: var(--shmeado-color);
    --nav-game-general: var(--nav-game-background);
    --nav-game-modes: var(--nav-game-background);
    --nav-game-bedwars: var(--nav-game-background);
    --nav-game-skywars: var(--nav-game-background);
    --nav-game-duels: var(--nav-game-background);

    --nav-tab-button-background: var(--header);
    --nav-tab-button-selected-background: var(--shmeado-color);
    --nav-tab-button-selected-text: var(--text);

    --scrollbar-track: var(--background);
    --scrollbar-thumb: var(--header);
    --scrollbar-thumb-hover: #AAAAAA;

    --placeholder-border: 1px;
    --placeholder-margin: 14.2px;
    --pill-selected-background: var(--header);
    --pill-selected-text: var(--text);
    --scroll-row: 1px var(--header) solid;
    --skin-shadow: none;

    --divider-color: var(--header);
    --table-th-background: var(--header);
    --table-tr-background: none;
    --table-text: var(--text);
    --table-hover: var(--background);

    --home-search: linear-gradient(to right, rgba(27,27,27,1), rgba(27,27,27,0.75)), url("/static/skywars/home/images/skywarsBackground_dark.d8df077550fc.png");
    --home-search-container: linear-gradient(to left, rgba(27,27,27,0.5), rgba(27,27,27,1));
    --home-search-navbar: #29292988;

    --popular-profiles-title: var(--shmeado-color-text);

    --search-border: var(--background);
    --search-term-text: var(--text);
    --search-background: var(--header);
    --search-button-background: var(--header);
    --search-button-border: 3px 3px 3px 0px;
    --search-button-border-full: 3px;
    --search-button-color: #AAAAAA;
    --select-items: var(--header);
    --select-items-hover: var(--background);

    --leaderboard-select: var(--text);
    --leaderboard-question: #AAAAAA;
    --selected-limit-text: var(--text);
    --unselected-limit-text: var(--text);
    --leaderboard-bottom-line: var(--header);

    --faqa: var(--hover);
}

/**** main ****************************/
body, h2, h5, h6 {color: var(--text)}
p, #twitter {color: var(--p-text)}
p b {font-weight: var(--bold)}
a, a:visited {color: var(--anchor)}

.makeThin {
    font-weight: var(--bold);
}

.makeTextLight {
    color: var(--text);
}

.makeBlueLight {
    color: var(--make-blue-light);
}

.makeDarkBlueLight {
    color: var(--make-dark-blue-light);
}

.makeDarkBlueDarkAqua {
    color: var(--make-dark-blue-dark-aqua);
}

.makeDarkRedRed {
    color: var(--make-dark-red-red);
}

.makeDarkGrayWhite {
    color: var(--make-dark-gray-white);
}

.makeGrayWhite {
    color: var(--make--white);
}

.makeWhiteGray {
    color: var(--make-white-gray);
}

.makeDarkAquaAqua {
    color: var(--make-dark-aqua-light);
}

.makeDarkGrayLightGray {
    color: var(--make-dark-gray-light-gray);
}

.makeDarkGreenLightGreen {
    color: var(--make-dark-green-light-green);
}

.makeLightGreenDarkGreen {
    color: var(--make-light-green-dark-green);
}

.mainElement {
    background: var(--main-element);
}

.shmeadoColor {
    color: var(--shmeado-color-text);
}

.adBox1, .adBox2 {
    background-color: var(--shmeado-color);
    background-size: cover;
    cursor: pointer;
}

#onlineDetailsContainer, .onlineDetails {
    background: var(--online-details-container);
}

.navGameName {
    text-shadow: 2px 2px var(--header);
}

#navGameGeneral {
    background: var(--nav-game-general);
    background-size: cover;
}

#navGameModes {
    background: var(--nav-game-modes);
    background-size: cover;
    background-position: 50%;
}

#navGameBedWars {
    background: var(--nav-game-bedwars);
    background-size: cover;
    background-position: 50%;
}

#navGameSkyWars {
    background: var(--nav-game-skywars);
    background-size: cover;
    background-position: 50%;
}

#navGameDuels {
    background: var(--nav-game-duels);
    background-size: cover;
    background-position: 50%;
}

#header::before, .mainHeader, .navTabBar {
    background: var(--header);
}

#headerSearchBar, #headerSearchButton {
    border-color: var(--header);
    background-color: var(--header-search-bar);
}

.navTabButtonSelected {
    background: var(--nav-tab-button-selected-background);
    color: var(--nav-tab-button-selected-text);
    font-weight: var(--bold);
}

.navTabButtonSelected:hover {
    color: var(--nav-tab-button-selected-text);
}

.placeHolder, .placeHolderLive {
    font-weight: var(--bold);
    border-width: var(--placeholder-border);
    margin-bottom: var(--placeholder-margin);
}

.placeHolderLive {
    border-color: var(--placeholder-live-border);
}

.placeHolderText {
    font-weight: var(--bold);
}

.table {
    border-color: var(--table-th-background);
    color: var(--table-text);
}

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

.table tr {
    background-color: var(--table-tr-background);
}

#leaderboard tr {
    background-color:rgba(0, 0, 0, 0);
}

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

#leaderboard td {
    border-bottom: 1px solid var(--leaderboard-bottom-line);
    font-weight: var(--bold);
}

.table tr:hover, #leaderboard tr:hover {
    background-color: var(--table-hover);
}

.tableButton {
    background-color: var(--nav-tab-button-background);
}

/**** base ****************************/
#sidebar, #leaderboardsHeaderContainer {
    background: var(--sidebar);
}

/**** stats ****************************/
::-webkit-scrollbar-track {background: var(--scrollbar-track)}
::-webkit-scrollbar-thumb {background: var(--scrollbar-thumb)}
::-webkit-scrollbar-thumb:hover {background: var(--scrollbar-thumb-hover)}

.popularTile, .showMoreButton, #showKitsButton {
    background-color: var(--header);
}

.popularTile:hover, .showMoreButton:hover, #showKitsButton:hover {
    background-color: var(--hover);
}

.pillSelected {
    background: var(--pill-selected-background);
    color: var(--pill-selected-text);
    font-weight: var(--bold);
}

.pill {
    color: var(--shmeado-color-text);
    font-weight: var(--bold);
}

.achievementExtra {
    color: var(--text);
}

.scrollRow {
    border-top: var(--scroll-row);
}

.scrollRowContainer:last-child {
    border-bottom: var(--scroll-row);
}

#generalHistorySkin, .compareSkin {
    filter: var(--skin-shadow);
}

.divider:before, .divider:after{
    border-color: var(--divider-color);
}

#kitPrestigeHeaderRow {
    background-color: var(--nav-tab-button-background)
}

.searchTerm, .searchCalcTerm, .searchTermRatio {
  border-color: var(--search-border);
  color: var(--search-term-text);
  background: var(--search-background);
}

/**** calc ****************************/

.searchTerm:focus, .searchCalcTerm:focus, .searchTermRatio:focus{
  color: var(--search-term-text);
}

.searchButton, .searchCalcButton, .searchRefreshButton, .ratioCalcButton, .searchButtonRatio, .searchButtonRatio2 {
  border-width: var(--search-button-border);
  border-color: var(--search-border);
  background: var(--search-button-background);
}

.searchRefreshButton {
    border-width: var(--search-button-border-full);
}

#homeSearchTabInputCompare, .select-selected, .select-items {
    border-color: var(--search-border);
}

.ratioCalcButton, .searchButtonRatio, .searchButtonRatio2 {
    background-color: var(--search-border);
}

.select-items div, .select-selected {
    color: var(--text);
}

.select-selected:after {
    border-color: var(--search-border) transparent transparent transparent;
}

.select-selected.select-arrow-active:after {
    border-color: transparent transparent var(--search-border) transparent;
}

.select-items, .select-selected {
    background-color: var(--select-items);
}

.select-items div:hover, .same-as-selected {
    background-color: var(--select-items-hover);
}

/* Home */
#homeSearch {
    background: var(--home-search);
    background-position: center center;
    background-size: cover;
}

#homeSearchContainer {
    background-image: var(--home-search-container);
}

.homeSearchNavbar {
    background-color: var(--home-search-navbar);
}

#popularProfilesTitle {
    color: var(--popular-profiles-title)
}

.promoBody {
    background-image: var(--promo-body);
}

/* Leaderboards */

.leaderboardSelect {
    color: var(--leaderboard-select);
    font-weight: var(--bold);
}

.leaderboardQuestion {
    color: var(--leaderboard-question);
}

.selectedLimit {
    background-color: var(--header);
    color: var(--selected-limit-text);
}

.unselectedLimit {
    color: var(--unselected-limit-text);
}

/* About */
.q {
    background-color: var(--header);
}

.q:hover {
    background-color: var(--hover);
}

.a {
    background-color: var(--faqa);
}