:root {
    --colorMain: #dbcead;
    --colorMainTitle: #784d0f;
    --colorSection: #f1e3c7;
    --colorSectionHover: #d9ccb3;
    --colorSectionTitle: #c3ac7e;
    --colorSectionTitleHover: #a89369;
    --colorTableLine2: #e9d5af;
    --colorEditZone: #f5ebd8;
    --colorQuote: #e4d9bd;
    --colorPseudo: #055b27;
    --colorAttack: #e71313;
    --colorDefense: #1381e7;
    --colorVelocity: #47bb11;
    --colorEndurance: #ff810d;
    --colorPrimaryButton: var(--colorMainTitle);
    --colorPrimaryButtonHover: #593a0c;
    --colorImportantButton: #77920e;
    --colorImportantButtonHover: #5c710b;
    --colorWarningButton: #b00000;
    --colorWarningButtonHover: #900000;
    --colorActiveButton: #F2EEE3;
    --colorOnlineStatus: #576b0a;
    --colorOfflineStatus: #900000;
    --colorWhiteText: white;
    --colorBlackText: black;

    --bold: 450;
    --fontTitle: var(--bold) 1.75rem/1 "Josefin Sans";
    --fontSubtitle: 350 1.5rem/1 "Josefin Sans";
    --fontTableTitle: var(--bold) 1.375rem/1 "Josefin Sans";
    --fontText: 350 1rem/1 "Josefin Sans";
    --fontBoldText: var(--bold) 1rem/1 "Josefin Sans";
    --fontTextWithIcons: 350 1rem/1.5 "Josefin Sans";
    --fontBoldTextWithIcons: var(--bold) 1rem/1.5 "Josefin Sans";

    --radius: 15px;

    font: var(--fontText);
}

@font-face {
    font-family: "Josefin Sans";
    src: url("/static/font/JosefinSans.ttf") format(truetype) tech(variations);
    font-weight: 100 700;
}

@font-face {
    font-family: "Josefin Sans";
    src: url("/static/font/JosefinSansItalic.ttf") format(truetype) tech(variations);
    font-weight: 100 700;
    font-style: italic;
}

strong, b {
    font-weight: var(--bold);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: url("/static/img/background.png") center top fixed no-repeat;
    background-size: cover;
}

/* HEADER */

header {
    width: 100%;
}

#banner {
    padding: 5px;
    overflow-x: hidden;
    background-color: var(--colorQuote);
    border-top: solid var(--colorMainTitle) 2px;
    border-bottom: solid var(--colorMainTitle) 2px;
}

#banner > span {
    display: inline-block;
    white-space: nowrap;
}

#banner > span > span {
    display: inline-block;
    padding-right: 250px;
}

#header-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 20px 0 20px;
}

#header-items-offline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    margin: 20px 20px 0 20px;
}

#header-items-offline > div {
    grid-column: 3;
    justify-self: end;
    background-color: var(--colorQuote);
    padding: 20px;
    border-radius: var(--radius);
}

#header-left {
    display: flex;
    align-items: center;
}

#header-open-menu {
    height: 26px;
    margin-right: 15px;
    cursor: pointer;
}

#header-maintenanceMessage {
    display: flex;
    align-items: center;
    padding: 15px;
    gap: 10px;
    z-index: 100;
    background-color: #8f2424;
    border-radius: var(--radius);
}

#header-maintenanceMessage > img {
    height: 2em;
}

#header-maintenanceMessage > span {
    font-size: 1.4em;
    color: white;
}

@media screen and (min-width: 1410px) {
    #header-maintenanceMessage > span > br {
        display: none;
    }
}

#header-logo {
    position: absolute;
    left: calc(50% - 120px);
    width: 240px;
}

#header-logo-offline {
    position: inherit;
    grid-column: 2;
    justify-self: center;
    width: 240px;
}

@media screen and (max-width: 1150px) {
    #header-logo {
        display: none;
    }
}

#header-currencies {
    display: flex;
    column-gap: 20px;
}

#header-currencies > a {
    display: flex;
    justify-content: end;
    align-items: center;
    min-width: 80px;
    padding: 3px 10px;
    background-color: var(--colorQuote);
    font: var(--fontBoldText);
    color: var(--colorBlackText);
    border-radius: 17px;
    text-decoration: none;
}

#header-currencies > a > img {
    height: 1.75em;
    margin-left: 10px;
}

#header-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

#header-buttons > a {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: var(--colorImportantButton);
    border: solid transparent 1px;
    border-radius: 50%;
    color: var(--colorWhiteText);
    cursor: pointer;
    text-decoration: none;
}

#header-buttons > a:hover {
    background-color: var(--colorImportantButtonHover);
}

#header-buttons > a:active {
    background-color: var(--colorActiveButton);
    border: solid var(--colorImportantButton) 1px;
    color: var(--colorImportantButton);
}

#header-buttons > a > svg {
    width: 60%;
    height: 60%;
    margin: 20%;
}

#unreadConversationMessages {
    position: absolute;
    top: -5px;
    left: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    box-sizing: border-box;
    z-index: 10;
    background-color: var(--colorWarningButton);
    color: var(--colorWhiteText);
}

#alertZone {
    position: absolute;
    top: 100px;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.alertMessage {
    position: relative;
    width: fit-content;
    padding: 20px 50px;
    text-align: center;
    border-radius: 10px;
}

.alertMessage > img {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    cursor: pointer;
}

/* MENU */

#menu-blackscreen {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: #00000080
}

#menu-group {
    display: flex;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 0;
}

#menu {
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: fit-content;
    max-height: 100%;
    box-sizing: border-box;
    overflow-y: scroll;
    row-gap: 20px;
    padding: 20px 20px 20px 0;
    background-color: var(--colorMainTitle);
    border-radius: 0 15px 15px 0;
}

#menu-player {
    display: flex;
    justify-content: space-between;
    column-gap: 20px;
    padding: 15px;
    background-color: var(--colorSection);
    border-radius: 0 var(--radius) var(--radius) 0;
}

#avatar {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

#avatar > a {
    display: none;
}

#avatar:hover > a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00000080;
    border-radius: 50%;
    color: var(--colorWhiteText);
    text-decoration: none;
}

#menu-player-infos {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    font-weight: var(--bold);
}

#menu-player-infos > :first-child {
    font-size: 26px;
    margin-bottom: 15px;
}

#menu-player-buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#menu-player-buttons > a > img {
    width: 25px;
}

.menu-liste {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.menu-liste > h1 {
    margin: 0;
    padding: 5px 0;
    background-color: var(--colorMainTitle);
    border-top-right-radius: var(--radius);
    border-top: solid var(--colorSection) 1px;
    border-right: solid var(--colorSection) 1px;
    font: var(--fontBoldText);
    color: var(--colorWhiteText);
}

.menu-liste > div {
    display: flex;
    flex-direction: column;
}

.menu-liste > div > a {
    padding: 15px;
    background-color: var(--colorSection);
    border-bottom: solid var(--colorMainTitle) 1px;
    color: var(--colorBlackText);
    font: var(--fontBoldText);
    text-decoration: none;
    cursor: pointer;
}

.menu-liste > div > a:hover {
    background-color: var(--colorSectionHover);
}

.menu-liste > div > div {
    display: flex;
    flex-direction: column;
    padding: 15px;
    row-gap: 10px;
    background-color: var(--colorEditZone);
    border-bottom: solid var(--colorMainTitle) 1px;
    text-align: left;
}

.menu-liste > div:last-child {
    overflow: clip;
    border-bottom-right-radius: var(--radius);
}

.menu-liste > div:last-child > a {
    border-bottom: none;
}

.menu-liste > div:last-child > div {
    border-top: solid var(--colorMainTitle) 1px;
    border-bottom: none;
}

#menu-close-button {
    height: 50px;
    margin-left: 10px;
    cursor: pointer;
}

/* FOOTER */

footer {
    background-color: var(--colorMainTitle);
    color: var(--colorSection);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    line-height: 1.4;
}

footer > span:not(:last-child)::after {
    content: " - ";
}

footer a {
    color: inherit;
    text-decoration: none;
}

footer img {
    height: 1.4em;
    vertical-align: bottom;
}

/* COMPONENTS */

main > h2:not(:first-child),
section:not(:first-child),
section > h3:not(:first-child),
.tabs:not(:first-child),
table:not(:first-child),
textarea.classicTextarea:not(:first-child),
.outerPaging:not(:first-child) {
    margin-top: 20px;
}

main > h2:not(:last-child),
section:not(:last-child),
section > h3:not(:last-child),
.tabs:not(:last-child),
table:not(:last-child),
textarea.classicTextarea:not(:last-child),
.outerPaging:not(:last-child) {
    margin-bottom: 20px;
}

main {
    width: calc(100% - 40px);
    max-width: 1920px;
    margin: 20px;
    padding: 20px;
    overflow: clip;
    box-sizing: border-box;
    border-radius: var(--radius);
    background-color: var(--colorMain);
}

main > h1 {
    margin: -20px -20px 20px -20px;
    padding: 10px;
    background-color: var(--colorMainTitle);
    font: var(--fontTitle);
    color: var(--colorWhiteText);
    text-align: center;
}

main > h2 {
    font: var(--fontSubtitle);
}

section {
    padding: 20px;
    overflow: clip;
    background-color: var(--colorSection);
    border-radius: var(--radius);
}

section > h2 {
    margin: -20px -20px 20px -20px;
    padding: 10px;
    background-color: var(--colorSectionTitle);
    font: var(--fontTitle);
    text-align: center;
}

section > h3 {
    font: var(--fontSubtitle);
}

h1, h2, h3 {
    word-break: break-word;
}

main > :first-child:not(h1), section > :first-child:not(h2) {
    margin-top: 0;
}

main > :last-child, section > :last-child {
    margin-bottom: 0;
}

.document {
    max-width: 70em;
    margin: 0 auto;
    text-align: justify;
}

.document > h2 {
    font-weight: 600;
}

.document > p:not(:last-child) {
    margin-bottom: 50px;
}

p {
    font: var(--fontTextWithIcons);
}

.icon {
    height: 1.25em;
    vertical-align: text-bottom;
}

.tabsBar {
    display: flex;
    column-gap: 3px;
    overflow-x: auto;
}

.tabsBar::-webkit-scrollbar {
    background-color: white;
    height: 6px;
}

.tabsBar::-webkit-scrollbar-thumb {
    background-color: #808080;
    border-radius: 3px;
}

.tabsBar > span {
    background-color: var(--colorSectionTitle);
    padding: 5px 25px;
    border-radius: var(--radius) var(--radius) 0 0;
    font: var(--fontText);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.tabsBar > span:hover {
    background-color: var(--colorSectionTitleHover);
}

.tabsBar > span.activeTab {
    background-color: var(--colorSection);
}

.tabs > div:not(.tabsBar) {
    padding: 20px;
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    background-color: var(--colorSection);
}

table {
    border-radius: var(--radius);
    overflow: clip;
    border-collapse: collapse;
    height: fit-content;
}

th {
    padding: 10px;
    background-color: var(--colorMainTitle);
    font: var(--fontBoldText);
    color: var(--colorWhiteText);
    text-align: left;
}

td {
    padding: 8px;
    font: var(--fontTextWithIcons);
    text-align: left;
}

th:only-child {
    padding: 10px;
    font: var(--fontTableTitle);
    text-align: center;
}

tr:nth-child(even) > td {
    background-color: var(--colorSectionTitle);
}

tr:nth-child(odd):not(:first-child) > td {
    background-color: var(--colorTableLine2);
}

tr.active > td {
    background-color: var(--colorImportantButton) !important;
    color: var(--colorWhiteText);
}

th.vertical {
    position: relative;
    width: 1em;
}

th.vertical > span {
    position: absolute;
    transform: translateX(-50%) rotate(-90deg);
    left: calc(10px + 0.5em);
    width: max-content;
    bottom: calc(50% - 0.5em);
}

a.internal {
    font: var(--fontBoldText);
    color: var(--colorBlackText);
    text-decoration: none;
}

a.pseudo {
    font-weight: var(--bold);
    color: var(--colorPseudo);
    text-decoration: none;
    white-space: nowrap;
}

a.internal:hover, a.pseudo:hover {
    text-decoration: underline;
}

a.pseudo > img {
    width: 0.75em;
    height: 0.75em;
}

span.unknown {
    font-weight: var(--bold);
    color: var(--colorPseudo);
    text-decoration: none;
}

button {
    width: fit-content;
    height: fit-content;
    padding: 4px 19px;
    border-radius: 5px;
    border: solid transparent 1px;
    background-color: var(--colorPrimaryButton);
    font: var(--fontText);
    color: var(--colorWhiteText);
    cursor: pointer;
}

button:hover {
    background-color: var(--colorPrimaryButtonHover);
}

button:active {
    background-color: var(--colorActiveButton) !important;
    color: var(--colorPrimaryButton);
    border: solid var(--colorPrimaryButton) 1px;
}

button.important {
    background-color: var(--colorImportantButton);
}

button.important:hover {
    background-color: var(--colorImportantButtonHover);
}

button.important:active {
    color: var(--colorImportantButton);
    border: solid var(--colorImportantButton) 1px;
}

button.warning {
    background-color: var(--colorWarningButton);
}

button.warning:hover {
    background-color: var(--colorWarningButtonHover);
}

button.warning:active {
    color: var(--colorWarningButton);
    border: solid var(--colorWarningButton) 1px;
}

button:disabled {
    background-color: #909090 !important;
    cursor: initial;
}

button:disabled:active {
    color: var(--colorWhiteText);
    border: solid transparent 1px;
}

input:not([type]), input[type=text], input[type=password], input[type=email], input[type=search], input[type=number], input[type=date], select {
    width: 200px;
    height: calc(1rem + 10px);
    padding: 0 10px;
    box-sizing: border-box;
    background-color: white;
    border-radius: 5px;
    border: solid black 1px;
    font: var(--fontText);
}

input[type=number] {
    width: 100px;
}

textarea.classicTextarea {
    display: block;
    width: 100%;
    min-height: 100px;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    border-radius: var(--radius);
    font: var(--fontText);
    border: none;
    resize: none;
}

input[type=radio], input[type=checkbox] {
    width: 20px;
    height: 20px;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--colorMainTitle);
}

input[type=radio] ~ label, input[type=checkbox] ~ label {
    padding-left: 20px;
    vertical-align: middle;
    font: var(--fontText);
}

details {
    background-color: var(--colorSectionHover);
    margin: 20px 0;
    padding: 10px;
    border-radius: var(--radius);
}

details > summary {
    list-style: none;
    cursor: pointer;
}

details > summary > img {
    transition: transform 0.25s;
}

details[open] > summary {
    margin-bottom: 1em;
}

details[open] > summary > img {
    transform: rotate(-180deg);
}

details details {
    border: solid black 1px;
}

.outerPaging {
    display: flex;
    justify-content: center;
    width: 100%;
}

.paging {
    width: fit-content;
    padding: 5px 10px;
    border-radius: var(--radius);
    background-color: var(--colorEditZone);
    font: var(--fontBoldText);
    color: var(--colorMainTitle);
}

.paging > a {
    color: var(--colorMainTitle);
    text-decoration: none;
}

.paging > .current {
    color: var(--colorImportantButton);
}

.player {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 5px;
}

.player > img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

.editor {
    --border: solid white 3px;

    display: flex;
    border: var(--border);
    border-radius: var(--radius);
    overflow: clip;
}

.editor-main {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1;
    border-right: var(--border);
}

.editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: var(--colorSectionTitle);
    border-bottom: var(--border);
}

.editor-toolbar > div {
    display: flex;
    column-gap: 20px;
}

.editor-toolbar > div > img {
    height: 25px;
    cursor: pointer;
}

.editor-main > textarea {
    width: 100%;
    flex-grow: 1;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--colorEditZone);
    font: var(--fontText);
    border: none;
    resize: none;
    outline: none;
}

.editor-main > button {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.editor-previewButton {
    margin-right: 20px;
    color: black;
    text-decoration: underline;
    cursor: pointer;
}

.editor-emotes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    background-color: var(--colorSectionTitle);
}

.editor-emotes > div {
    display: grid;
    grid-template-columns: repeat(5, 1fr);;
    gap: 15px;
}

.editor-emotes > div > img {
    height: 1.75em;
    cursor: pointer;
}

.popupBackground {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #00000050;
}

.popup {
    position: relative;
    background-color: var(--colorMain);
    max-width: 70em;
    max-height: calc(100vh - 40px);
    margin: 20px;
    padding: 30px 45px;
    box-sizing: border-box;
    border-radius: var(--radius);
    overflow-y: scroll;
    display: none;
}

.popupClose {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    cursor: pointer;
}

.animalBackground {
    display: flex;
    justify-content: center;
    background-image: url("/static/img/animalBackground.png");
    background-size: auto calc(3100% / 15);
    background-position: center;
}

.animalBackground > div {
    height: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
}

.animalBackground.small {
    aspect-ratio: 4 / 3;
}

.competencyColor {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}