html, body {
    position: relative;
    padding: 0;
    margin: 0;
    min-width: 1042px;
    color: #b49e7f;
    font-family: "Lucida Sans Unicode", Arial, sans-serif;
    font-size: 12px;
    background: url(images/bg-top.png) center top no-repeat, url(images/bg-noise.png) 0 0, #0c0d0a;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
}

#page {
    display: flex;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    background: url(images/bg-bottom.png) center bottom no-repeat;
}

a {
    color: #7e7358;
    text-decoration: none;
    transition: color 150ms;
    text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
}

a:hover {
    color: #d1bf92;
}

.button-effects {
    transition: filter 100ms;
}

.button-effects:hover {
    filter: brightness(1.2);
}

.button-effects:active {
    filter: brightness(0.8);
}

#header {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 57px 0 0;
}

#logo {
    display: block;
    background: url(images/logo.png);
    width: 371px;
    height: 263px;
}

#main {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

#navbar {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 65px 47px 0 233px;
    background: url(images/navbar.png);
    width: 815px;
    height: 151px;
    position: absolute;
    top: -121px;
    left: -278px;
    z-index: 4;
}

#navbar > a {
    height: 20px;
    transition: filter 100ms;
}

#navbar > a:hover {
    filter: brightness(1.2);
}

#navbar > a:active {
    filter: brightness(0.8);
}

#navbar > a > span {
    font-size: 1.2rem;
    font-weight: bold;
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;

    background-image: linear-gradient(
        rgb(250, 211, 154) 0%, rgb(250, 211, 154) 35.7143%, rgb(255, 255, 213) 35.7243%, rgb(255, 255, 213) 41.0714%,
        rgb(255, 255, 205) 41.0814%, rgb(255, 255, 205) 46.4286%, rgb(255, 255, 185) 46.4386%, rgb(255, 255, 185) 51.7857%,
        rgb(255, 234, 158) 51.7957%, rgb(255, 234, 158) 57.1429%, rgb(255, 221, 145) 57.1529%, rgb(255, 221, 145) 62.5%,
        rgb(255, 255, 185) 62.51%, rgb(255, 255, 185) 67.8571%, rgb(255, 255, 218) 67.8671%, rgb(255, 255, 218) 73.2143%,
        rgb(255, 234, 158) 73.2243%, rgb(255, 234, 158) 100%
    );

    background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    color: transparent;

    filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 1px #2a320c) drop-shadow(0 0 1px #2a320c) drop-shadow(0 0 5px #000);
    text-shadow: none;
}

.navbar-separator {
    display: block;
    background: url(images/navbar-separaotr.png);
    width: 17px;
    height: 18px;
    margin: 1px 16px 0;
}

#download-button-wrapper {
    position: absolute;
    top: 6px;
    left: 77px;
}

#download-button {
    display: block;
    background: url(images/download-button.png);
    width: 132px;
    height: 133px;
    text-align: center;
    box-sizing: border-box;
    padding: 85px 0 0;
}

#download-button > span {
    font-size: 1.3rem;
    font-weight: bold;
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;

    background-image: linear-gradient(
            rgb(255, 255, 213) 0%, rgb(255, 255, 213) 34%, rgb(255, 255, 246) 34.01%, rgb(255, 255, 246) 39.5%,
            rgb(255, 255, 235) 39.51%, rgb(255, 255, 235) 45%, rgb(255, 255, 225) 45.01%, rgb(255, 255, 225) 50.5%,
            rgb(255, 255, 200) 50.51%, rgb(255, 255, 200) 56%, rgb(255, 255, 180) 56.01%, rgb(255, 255, 180) 61.5%,
            rgb(255, 235, 151) 61.51%, rgb(255, 235, 151) 67%, rgb(255, 255, 194) 67.01%, rgb(255, 255, 194) 72.5%,
            rgb(255, 255, 249) 72.51%, rgb(255, 255, 249) 100%
    );

    background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    color: transparent;

    filter: drop-shadow(0 0 5px #000);
    text-shadow: none;
}

.panel-header {
    text-align: center;
    height: 67px;
    padding: 23px 0 0;
    width: 288px;
    box-sizing: border-box;
}

.panel-header span {
    font-size: 1.3rem;
    letter-spacing: -0.06rem;
    font-weight: bold;
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;

    background-image: linear-gradient(
        rgb(255, 228, 166) 0%, rgb(255, 228, 166) 33.2667%, rgb(255, 255, 209) 33.2767%, rgb(255, 255, 209) 38.4%,
        rgb(255, 255, 202) 38.41%, rgb(255, 255, 202) 43.5333%, rgb(255, 255, 192) 43.5433%, rgb(255, 255, 192) 48.6667%,
        rgb(255, 254, 171) 48.6767%, rgb(255, 254, 171) 53.8%, rgb(255, 227, 150) 53.81%, rgb(255, 227, 150) 58.9333%,
        rgb(241, 194, 125) 58.9433%, rgb(241, 194, 125) 64.0667%, rgb(227, 184, 115) 64.0767%, rgb(227, 184, 115) 69.2%,
        rgb(235, 189, 114) 69.21%, rgb(235, 189, 114) 74.3333%, rgb(141, 118, 64) 74.3433%, rgb(141, 118, 64) 100%
    );

    background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    color: transparent;

    filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #2a320c) drop-shadow(0 0 1px #2a320c) drop-shadow(0 2px 3px #0009);
}

.panel {
    position: relative;
    flex: 0 0 373px;
    display: flex;
    z-index: 3;
}

.panel::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    z-index: 2;
    pointer-events: none;
}

.panel::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    background: url(images/panel-bg.png);
    width: 319px;
    height: 307px;
    opacity: 0.71;
}

#left {
    justify-content: flex-end;
    margin: 154px 0 0;
    height: 734px;
}

#left::after {
    background: url(images/panel-left.png);
    width: 373px;
    height: 734px;
    right: 0;
}

#left::before {
    right: 16px;
    bottom: -94px;
}

#right {
    justify-content: flex-start;
    margin: 49px 0 0;
    height: 941px;
}

#right::after {
    background: url(images/panel-right.png);
    width: 361px;
    height: 941px;
    left: -2px;
}

#right::before {
    left: 16px;
    transform: scaleX(-1);
    bottom: -87px;
}

.panel-content {
    position: relative;
    z-index: 3;
}

#content-wrapper {
    position: relative;
    margin: 145px -16px 0;
    z-index: 1;
}

#content-bg {
    background: url(images/content-top.png) 0 top no-repeat;
    position: absolute;
    top: -1px;
    bottom: 24px;
    left: 2px;
    right: 0;
    z-index: 1;
}

#content-bg::before {
    content: '';
    display: block;
    background: url(images/content-repeat.png) 0 top;
    width: 514px;
    position: absolute;
    top: 483px;
    bottom: 270px;
    left: 0;
    z-index: 1;
}

#content-bg::after {
    content: '';
    display: block;
    background: url(images/content-bottom.png) 0 bottom no-repeat;
    width: 514px;
    height: 446px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}

#content-frame-outer {
    background: url(images/outer-frame-top.png) 0 0 no-repeat;
    width: 562px;
    position: absolute;
    top: 616px;
    bottom: 0;
    left: -21px;
    right: 0;
    z-index: 2;
}

#content-frame-outer::before {
    content: '';
    display: block;
    background: url(images/outer-frame-repeat.png) 0 top repeat-y;
    width: 532px;
    position: absolute;
    top: 150px;
    bottom: 130px;
    left: 15px;
    z-index: 1;
}

#content-frame {
    background: url(images/frame-top.png) 0 0 no-repeat;
    width: 520px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
}

#content-frame::before {
    content: '';
    display: block;
    background: url(images/frame-repeat.png) 0 top repeat-y;
    width: 520px;
    position: absolute;
    top: 117px;
    bottom: 140px;
    left: 0;
    z-index: 1;
}

#content-frame::after {
    content: '';
    display: block;
    background: url(images/frame-bottom.png) 0 top no-repeat;
    width: 562px;
    height: 177px;
    position: absolute;
    bottom: 0;
    left: -21px;
    z-index: 2;
}

#content {
    position: relative;
    min-height: 780px;
    width: 520px;
    padding: 27px 27px 54px;
    box-sizing: border-box;
    z-index: 5;
}

#container::after {
    content: '';
    display: block;
    height: 265px;
}

.pagination-container-wrapper {
    padding: 40px 0 0;
}

#page .pagination_active {
    display: block;
    line-height: 34px;
    background: url(images/page.png);
    width: 82px;
    height: 35px;
    color: inherit;
    text-shadow: none;
    margin: 0 auto;
    text-align: center;
}

.pagination_page, .pagination_last, .pagination_first {
    display: none;
}

.pagination-container {
    position: relative;
}

.pagination_next, .pagination_prev, .pagination-container::before, .pagination-container::after {
    content: '';
    color: transparent !important;
    user-select: none;
    display: block;
    background: url(images/arrow.png) 0 0;
    width: 44px;
    height: 36px;
    position: absolute;
    top: 0;
    z-index: 2;
    text-shadow: none;
}

.pagination_next, .pagination-container::after {
    transform: scaleX(-1);
}

.pagination-container::before, .pagination-container::after {
    filter: saturate(0);
    z-index: 1;
}

.pagination_prev, .pagination-container::before {
    left: 144px;
}

.pagination_next, .pagination-container::after {
    right: 144px;
}

.pagination_next, .pagination_prev {
    transition: 150ms filter;
}

.pagination_prev:hover, .pagination_next:hover {
    filter: brightness(1.14);
}

.pagination_prev:active, .pagination_next:active {
    filter: brightness(0.84) contrast(1.1);
}

#social-buttons {
    padding: 18px 0 7px 25px;
}

.button-social {
    display: block;
    width: 234px;
    height: 44px;
    padding: 12px 0 0 56px;
    box-sizing: border-box;
}

.button-social {
    transition: filter 100ms;
}

.button-social:hover {
    filter: brightness(1.2);
}

.button-social:active {
    filter: brightness(0.8);
}

.button-social-presentation {
    background: url(images/button-presentation.png);
    margin: 0 0 8px;
    padding: 11px 0 0 70px;
}

.button-social-discord {
    background: url(images/button-discord.png);
}

.button-social-fb {
    background: url(images/button-fb.png);
    margin: 0 0 6px;
}

.button-social span {
    font-size: 1.29rem;
    font-weight: bold;
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;

    background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    color: transparent;

    text-shadow: none;
    letter-spacing: -0.05rem;
}

.button-social-presentation span {
    background-image: linear-gradient(
        rgb(255, 255, 205) 0%, rgb(255, 255, 205) 38.4667%, rgb(255, 255, 192) 38.4767%, rgb(255, 255, 192) 43.2%,
        rgb(255, 254, 180) 43.21%, rgb(255, 254, 180) 47.9333%, rgb(255, 255, 183) 47.9433%, rgb(255, 255, 183) 52.6667%,
        rgb(255, 255, 172) 52.6767%, rgb(255, 255, 172) 57.4%, rgb(255, 215, 143) 57.41%, rgb(255, 215, 143) 62.1333%,
        rgb(224, 181, 116) 62.1433%, rgb(224, 181, 116) 66.8667%, rgb(236, 191, 120) 66.8767%, rgb(236, 191, 120) 71.6%,
        rgb(220, 177, 107) 71.61%, rgb(220, 177, 107) 100%
    );

    filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #2a320c) drop-shadow(0 0 1px #2a320c) drop-shadow(0 2px 3px #0009);
}

.button-social-fb span {
    background-image: linear-gradient(
        rgb(255, 255, 255) 0%, rgb(255, 255, 255) 39.0769%, rgb(249, 255, 255) 39.0869%, rgb(249, 255, 255) 44.6154%,
        rgb(210, 223, 247) 44.6254%, rgb(210, 223, 247) 50.1538%, rgb(236, 254, 255) 50.1638%, rgb(236, 254, 255) 55.6923%,
        rgb(237, 255, 255) 55.7023%, rgb(237, 255, 255) 61.2308%, rgb(189, 215, 255) 61.2408%, rgb(189, 215, 255) 66.7692%,
        rgb(146, 170, 208) 66.7792%, rgb(146, 170, 208) 72.3077%, rgb(122, 148, 187) 72.3177%, rgb(122, 148, 187) 100%
    );

    filter: drop-shadow(0 2px 1px #0007) drop-shadow(0 2px 3px #000);
}

.button-social-discord span {
    background-image: linear-gradient(
        rgb(255, 255, 255) 0%, rgb(255, 255, 255) 38.2857%, rgb(255, 255, 255) 38.2957%, rgb(255, 255, 255) 43.4286%,
        rgb(255, 255, 255) 43.4386%, rgb(255, 255, 255) 48.5714%, rgb(255, 255, 255) 48.5814%, rgb(255, 255, 255) 53.7143%,
        rgb(255, 255, 255) 53.7243%, rgb(255, 255, 255) 58.8571%, rgb(255, 255, 255) 58.8671%, rgb(255, 255, 255) 64%,
        rgb(225, 201, 254) 64.01%, rgb(225, 201, 254) 69.1429%, rgb(197, 171, 228) 69.1529%, rgb(197, 171, 228) 74.2857%,
        rgb(174, 146, 206) 74.2957%, rgb(174, 146, 206) 100%
    );

    filter: drop-shadow(0 2px 1px #0007) drop-shadow(0 2px 3px #000);
}

#callendar-header {
    background: url(images/month.png) center no-repeat;
    text-align: center;
    height: 34px;
    line-height: 28px;
    margin: 9px 0 3px;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
    color: #d1bf92;
}

#calendar-wrapper {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 0;
    width: fit-content;
    margin: auto;
}

.callendar-cell {
    position: relative;
    background: url(images/callendar-cell.png);
    width: 32px;
    height: 31px;
    margin: 0 1px 3px 0;
    padding: 0 0 0 5px;
    line-height: 16px;
    box-sizing: border-box;
}

.callendar-cell > span {
    position: relative;
    font-size: 0.8rem;
    font-weight: bold;

    background-image: linear-gradient(
        rgb(255, 224, 177) 0%, rgb(255, 224, 177) 35.8333%, rgb(255, 246, 189) 35.8433%, rgb(255, 246, 189) 42.25%,
        rgb(255, 255, 200) 42.26%, rgb(255, 255, 200) 48.6667%, rgb(255, 255, 221) 48.6767%, rgb(255, 255, 221) 55.0833%,
        rgb(255, 255, 207) 55.0933%, rgb(255, 255, 207) 61.5%, rgb(255, 255, 161) 61.51%, rgb(255, 255, 161) 67.9167%,
        rgb(255, 242, 104) 67.9267%, rgb(255, 242, 104) 100%
    );

    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    z-index: 1;
}

.callendar-cell:has(:last-child.callendar-event-wrapper)::before {
    content: '';
    display: block;
    position: absolute;
    background: url(images/callendar-event.png);
    width: 31px;
    height: 26px;
    top: 6px;
    left: 4px;
    z-index: 2;
}

.callendar-event-title {
    color: #e3d1ac;
}

.callendar-event-wrapper {
    display: none;
    position: absolute;
    left: 0;
    bottom: 40px;
    z-index: 3;
    width: 230px;
    background: url(images/panel-right.png) -30px -402px;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #302b20;
    box-shadow:  0 0 10px 5px #000, inset 0 0 0 1px #aa915c, inset 0 0 5px 1px #000;
    text-shadow: 0 0 5px #000, 0 0 5px #000;
}

.callendar-cell:hover .callendar-event-wrapper {
    display: block;
}

.button, button, .download-button {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
    text-transform: uppercase;
    height: 29px;
    line-height: 28px;
    text-decoration: none;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-shadow: none;
    background: transparent;
    transition: filter 100ms;
    padding: 0 29px 2px;
    min-width: 116px;
    margin: 1px;
}

.button span, button span, .download-button span {
    position: relative;
    z-index: 3;
    font-weight: bold;
    font-size: 1.05rem;

    background-image: linear-gradient(
        rgb(255, 235, 170) 0%, rgb(255, 235, 170) 35.8333%, rgb(255, 255, 195) 35.8433%, rgb(255, 255, 195) 42.25%,
        rgb(255, 255, 180) 42.26%, rgb(255, 255, 180) 48.6667%, rgb(255, 238, 162) 48.6767%, rgb(255, 238, 162) 55.0833%,
        rgb(227, 186, 123) 55.0933%, rgb(227, 186, 123) 61.5%, rgb(209, 170, 108) 61.51%, rgb(209, 170, 108) 67.9167%,
        rgb(229, 184, 114) 67.9267%, rgb(229, 184, 114) 74.3333%, rgb(197, 157, 94) 74.3433%, rgb(197, 157, 94) 100%
    );

    background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    color: transparent;

    filter: drop-shadow(0 0 2px #2a320c) drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000) saturate(1.06);
}

.button:hover, button:hover {
    filter: brightness(1.2);
}

.button:active, button:active {
    filter: brightness(0.8);
}

.button.active {
    filter: brightness(0.6);
}

.button::before, button::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    background: url(images/button-repeat.png) center;
    height: 29px;
    z-index: 1;
}

.button::after, button::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: url(images/button-terminator.png) 0 0 no-repeat, url(images/button-terminator.png) right -30px no-repeat;
    height: 29px;

    z-index: 2;
}

.full-button {
    display: block;
    width: 146px;
    margin: 24px auto 0;
    padding-left: 0;
    padding-right: 0;
}

.full-ranking-button {
    margin: 17px auto 0;
}

.user-buttons .button {
    width: 100%;
    margin: 0 0 3px;
}

input[type="password"], input[type="text"], input[type="email"], select {
    height: 35px;
    box-sizing: border-box;
    border-image-slice: 17 24 17 24 fill;
    border-image-width: 17px 24px 17px 24px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url(images/input.png);
    background: none;
    padding: 0 23px 0;
    color: #c8b085;
    outline: none;
    margin: 0;
    transition: background-color 2147483647s ease-in, background-image 2147483647s ease-in, color 2147483647s ease-in;
    min-width: 58px;
}

select {
    border-image-slice: 15 32 19 24;
    border-image-width: 15px 32px 19px 24px;
    border-image-source: url(images/select.png);
}

select option {
    background: #000;
}

textarea {
    padding: 8px;
    border-radius: 5px;
    box-sizing: border-box;
    color: #c8b085;
    border: 1px solid #302b20;
    box-shadow:  0 0 0 1px #000, inset 0 0 0 1px #aa915c, inset 0 0 5px 1px #000;
    background: rgba(0, 0, 0, 0.7);
}

.user-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 237px;
    height: 234px;
    padding: 0 0 0 49px;
    box-sizing: border-box;
    margin: 0 0 7px;
}

#session-button, .download-button {
    display: block;
    margin: 6px auto;
    background: url(images/button-large.png);
    height: 37px;
    width: 162px;
}

#session-button::before, #session-button::after {
    display: none;
}

.form-control {
    width: 188px;
    margin: 0 0 4px !important;
}

.form-links a {
    position: relative;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0 0 0 12px;
}

.form-links a::before {
    content: '';
    display: block;
    background: url(images/bull.png);
    width: 13px;
    height: 14px;
    position: absolute;
    top: 0;
    left: -6px;
}

.form-links a:hover::before {
    filter: brightness(1.2);
}

#ranking-wrapper {
    padding: 4px 0 0 19px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.92rem;
    height: 340px;
}

.ranking-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    background: url(images/ranking-row.png);
    width: 248px;
    height: 39px;
    margin: 0 0 -6px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 38px;
    padding: 0 24px;
    box-sizing: border-box;
    color: #bcab8c;
    text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
}

.ranking-row:nth-child(2n) {
    background-position-y: -40px;
}

.ranking-row a {
    color: #bcab8c;
}

.ranking-row:nth-child(1), .ranking-row:nth-child(1) a {
    color: #ffcc73 !important;
}

.ranking-row:nth-child(2), .ranking-row:nth-child(2) a {
    color: #b2bcc7;
}

.ranking-row:nth-child(3), .ranking-row:nth-child(3) a {
    color: #bb5a38;
}

.ranking-row-1::before {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    right: 78px;
    background: url(images/flags.png) 0 0;
    width: 55px;
    height: 29px;
    z-index: 1;
}

.ranking-row-2::before {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    right: 78px;
    background: url(images/flags.png) 0 -30px;
    width: 55px;
    height: 29px;
    z-index: 1;
}

.ranking-row-3::before {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    right: 78px;
    background: url(images/flags.png) 0 -60px;
    width: 55px;
    height: 29px;
    z-index: 1;
}

.ranking-name {
    position: relative;
    flex: 0 0 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    z-index: 2;
    width: 90px;
}

.ranking-name a {
    text-decoration: none;
    transition: filter 100ms;
}

.ranking-name a:hover {
    filter: brightness(1.2);
}

.ranking-name a:active {
    filter: brightness(0.8);
}

.ranking-value {
    position: relative;
    z-index: 2;
}