@font-face {
    font-family: "Lexend";
    src: url(../font/Lexend-VariableFont_wght.ttf);
}

:root {
    --primary : #151922 ;
    --primary100 : #32363E ;
    --primary200 : #505359 ;
    --primary300 : #505359 ;
    --primary400 : #8A8C91 ;

    --secondary : #FFB433 ;
    --secondary100 : #FFBD4D ;
    --secondary200 : #FFC766 ;
    --secondary300 : #FFD080 ;
    --secondary400 : #FFDA99 ;

    --tertiary : #202E46 ;
    --tertiary100 : #3C485D ;
    --tertiary200 : #586274 ;
    --tertiary300 : #747C8B ;
    --tertiary400 : #9096A3 ;

    --accent : #CFCFCF ;
    --succes : #29E330 ;
    --danger : #FD003F ;


    --transition-03 : .3s;
}

* {
    all:unset; /* Compatible partout I guess. */
}

head, script {
    display: none;
}

/* * * * * * * * * * *\
|*      GENERAL      *|
\* * * * * * * * * * */

body {
    background-color: var(--primary);
    color: var(--accent);

    font-family: "Lexend", sans-serif;
    font-weight: normal;

    overflow-x: clip;
}


/**
* Hover
*/

a, button {
    cursor: pointer;
}


/**
* div
*/
div {
    display: block;
}


/**
* H1.2.3
*/

h1, h2, h3 {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 5px;
    text-decoration-color: var(--secondary);
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.17em;
}


/**
* selection
*/
::selection {
    color: var(--tertiary);
    background-color: var(--accent);
}

/* * * * * * * * * * *\
|*      NAVBAR       *|
\* * * * * * * * * * */

nav {
    z-index: 1;
    top: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    padding: 10px 5px;
    margin-bottom: 25px;

    background-color: var(--primary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}

nav ul {
    font-size: 24px;    
    font-weight: 400;
}

/*Gauche*/

nav ul#navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-around ;
    align-content: center;

    margin-left: 10px;
}

/*Droite*/
nav ul#userbar {
    display: flex;
    flex-direction: row;
    justify-content: space-around ;
    align-content: center;

    margin-right: 10px;
}

/* On cache les boutons profil & admin par default. on gèrera ça dans le JS. */
nav ul li.profil {
    display: none;
}

nav ul li.pfp, nav ul li img {
    padding: 0;

    max-height: 45px;
    max-width: 45px;

    overflow: clip;
}

nav ul li.login {
    margin-right: 10px;
}

/* pseudo */
nav ul li.username {
    border: none;
    cursor: text;
}
nav ul li.username:hover {
    background: none;
    color: var(--accent);
}

/* general */

nav li {
    background-color: var(--primary);

    margin: 0 3px;
    
    border-radius: 32px;
    border: 3px solid var(--accent);
    
    align-self: center;

    transition: var(--transition-03) ;
}

nav li a {
    padding: 3px 25px;
}


nav li:hover {
    transition: var(--transition-03);
}

nav li.active, nav li:hover {
    background-color: var(--accent);
    color: var(--tertiary);
}


nav li.admin {
    border: 3px solid var(--danger);
}

nav li.admin:hover {
    background-color: var(--danger);
}


/**
* style boutons couleurs
*/

/* neutre */
.neutre {
    border: 3px solid var(--accent);
}

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

/* warn */
.warn {
    border: 3px solid var(--secondary);
}

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

/* succes */
.succes {
    border: 3px solid var(--succes);
}

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

/* danger */
.danger {
    border: 3px solid var(--danger);
}

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


/* ---------------------------------------------- */
/*              Gears d'arrière plan              */
/* ---------------------------------------------- */

.gear {
    position: fixed;
    z-index: -100;
    animation: spin 20s linear infinite;
    pointer-events: none;
    user-select: none;

    filter: opacity(.5);
}

.no_bc {
    mix-blend-mode: color-burn;
    filter: opacity(0.5);
}

/* * * * * * * *\
|* Gears style *|
\* * * * * * * */

.gear2 {
    bottom: -700px;
    right: -1000px;
    width: 3000px;
    animation-direction: reverse;
}

.gear3 {
    top: -250px;
    right: -350px;
    width: 1000px;
}

.gear4 {
    top: 250px;
    left: -200px;
    width: 500px;
}

/* * * * * * * *\
|* Gears style *|
\* * * * * * * */


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}