:root {
  --pageBg:#f5f5f5;
  --cardBg:#fff;
  --pageTxt:#000;
  --theme:#2F6F6B;
  --themeAlt:#AEE6E2;
  --themeLight:#DBEEED;/*#D5E2E1;*/
  --alert:#C94900;
  --error:#C10D00;
  --errorBg:#FFEBEE;
  --success:#2E7D32;
  --successBg:#DCEDC8;
  --line: 1px solid #ddd;
  --lineAlt: 1px solid #aaa;
  --linePopup: none;
  --txt:#333;
  --txtAlt:#888;
  --bg:#333;
  --bgAlt:#eee;
  --spacing:15px;
  --coverBase:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 90%); /*pageBg*/
  --coverBaseAlt:linear-gradient(to bottom, rgba(238,238,238,0), rgba(238,238,238,1) 90%); /*bgAlt*/
  --coverLink:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1) 90%);
  --coverLinkAlt:linear-gradient(to right, rgba(238,238,238,0), rgba(238,238,238,1) 90%);
  --coverLinkTheme:linear-gradient(to right, rgba(219,238,237,0), rgba(219,238,237,1) 90%);
  --cardShadow: 0 2px 10px 0 rgba(0,0,0,.1);
  --shadowPopup:10px 10px 20px 0 rgba(0,0,0,.3);
  --shadow-1: inset 1px 1px 2px 0 rgba(0,0,0,.1);
  --transition: cubic-bezier(0.7,0,.3,1);
}
.rank_0::before, .rank_1::before, .rank_2::before, .rank_3::before, .rank_4::before, .rank_5::before, .rank_6::before, .rank_7::before, .rank_8::before, .rank_9::before, .rank_10::before, .rank_11::before, .rank_12::before, .rank_13::before {display:block; position:absolute; top:0; right:0; left:0; bottom:0; content:''; background: url("img/ranks/rank_00.png") bottom center no-repeat; background-size:contain; z-index:10; pointer-events:none;}
.spec_gray::after, .spec_red::after, .spec_blue::after, .spec_gold::after, .spec_purple::after, .spec_none::after {display:block; position:absolute; top:0; right:0; left:0; bottom:0; content:''; background: url("img/profiles/avatar_spec_light_black.png") center no-repeat; background-size:cover; z-index:5; pointer-events:none;}
.spec_gray::after {background-image: url("img/profiles/avatar_spec_light_gray.png");}
.spec_red::after {background-image: url("img/profiles/avatar_spec_light_red.png");}
.spec_blue::after {background-image: url("img/profiles/avatar_spec_light_blue.png");}
.spec_gold::after {background-image: url("img/profiles/avatar_spec_light_gold.png");}
.spec_purple::after {background-image: url("img/profiles/avatar_spec_light_purple.png");}
.rank_1::before {background-image: url("img/ranks/rank_01.png");}
.rank_2::before {background-image: url("img/ranks/rank_02.png");}
.rank_3::before {background-image: url("img/ranks/rank_03.png");}
.rank_4::before {background-image: url("img/ranks/rank_04.png");}
.rank_5::before {background-image: url("img/ranks/rank_05.png");}
.rank_6::before {background-image: url("img/ranks/rank_06.png");}
.rank_7::before {background-image: url("img/ranks/rank_07.png");}
.rank_8::before {background-image: url("img/ranks/rank_08.png");}
.rank_9::before {background-image: url("img/ranks/rank_light_09.png");}
.rank_10::before {background-image: url("img/ranks/rank_light_10.png");}
.rank_11::before {background-image: url("img/ranks/rank_light_11.png");}
.rank_12::before {background-image: url("img/ranks/rank_light_12.png");}
.rank_13::before {background-image: url("img/ranks/rank_light_13.png");}
/* DARK MODE */
@media (prefers-color-scheme: dark) {
  :root {
    --pageBg:#121212;
    --cardBg:#212121;
    --pageTxt:#fff;
    --theme:#6DB7B2;
    --themeAlt:#3F6461;
    --themeLight:#002D29;/*#00524C;*/
    --alert:#C97800;
    --error:#2B0000;
    --errorBg:#BE5E6F;
    --success:#E8F5E9;
    --successBg:#004D40;
    --line: 1px solid #333;
    --lineAlt: 1px solid #333;
    --linePopup: 1px solid #333;
    --txt:#ccc;
    --txtAlt:#777;
    --bg:#999;
    --bgAlt:#333;
    --coverBase:linear-gradient(to bottom, rgba(33,33,33,0), rgba(33,33,33,1) 90%); /*pageBg*/
    --coverBaseAlt:linear-gradient(to bottom, rgba(51,51,51,0), rgba(51,51,51,1) 90%); /*bgAlt*/
    --coverLink:linear-gradient(to right, rgba(33,33,33,0), rgba(33,33,33,1) 90%);
    --coverLinkAlt:linear-gradient(to right, rgba(51,51,51,0), rgba(51,51,51,1) 90%); /*bgAlt*/
    --coverLinkTheme:linear-gradient(to right, rgba(0,45,41,0), rgba(0,45,41,1) 90%);
    --cardShadow: 0 5px 15px 0 rgba(0,0,0,.2);
    --shadowPopup: 0 0 20px 0 rgba(0,0,0,.8);
  }
  .rank_9::before {background-image: url("img/ranks/rank_dark_09.png");}
  .rank_10::before {background-image: url("img/ranks/rank_dark_10.png");}
  .rank_11::before {background-image: url("img/ranks/rank_dark_11.png");}
  .rank_12::before {background-image: url("img/ranks/rank_dark_12.png");}
  .rank_13::before {background-image: url("img/ranks/rank_dark_13.png");}
  .spec_none::after {background-image: url("img/profiles/avatar_spec_dark_black.png");}
  .spec_gray::after {background-image: url("img/profiles/avatar_spec_dark_gray.png");}
  .spec_red::after {background-image: url("img/profiles/avatar_spec_dark_red.png");}
  .spec_blue::after {background-image: url("img/profiles/avatar_spec_dark_blue.png");}
  .spec_gold::after {background-image: url("img/profiles/avatar_spec_dark_gold.png");}
  .spec_purple::after {background-image: url("img/profiles/avatar_spec_dark_purple.png");}
}