/*
Styles globaux de l'application

Auteur: Nathan Cerisara
*/


/* /-----/ KeyFrames pour les animations \-----\ */





/* /-----/ Paramètres globaux de styles \-----\ */



/* Styles appliqués à toutes les balises html */
html * {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-optical-sizing: auto;
    font-size: var(--font_size_normal);
    color: var(--palette_cl_1);

    /* Toutes les animations fluides */
    transition-duration: 350ms;
    transition-timing-function: ease;
}


/* /-----/ On gère l'affichage par défaut de certaines balises HTML \-----\ */


body{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

h1{
    font-size: var(--font_size_extra_large);
}

h2{
    font-size: var(--font_size_large);
}

h3{
    font-size: var(--font_size_larger);
}

h4{
    font-size: var(--font_size_normal);
}

h5{
    font-size: var(--font_size_smaller);
}

h6{
    font-size: var(--font_size_small);
}

i, i *{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 300;
    font-style: italic;
}

b, b *{
    font-weight: 500;
}

button{
    user-select: none;
    font-size: var(--font_size_normal);
    padding: var(--size_tiny);
    margin: var(--size_tiny);
    border: none;
    border-radius: var(--size_tiny);
    background-color: var(--palette_cl_5);
    color: var(--palette_cl_1);
    box-shadow: var(--palette_cl_5) 0 0 1px 1px;
}
button:hover{
    cursor: pointer;
    font-size: calc(var(--font_size_normal) * 1.05);
    padding: calc(var(--size_tiny) * 1.05);
    box-shadow: var(--palette_cl_5) 0 0 var(--size_extra_tiny) var(--size_extra_tiny);
}
button:active{
    font-size: calc(var(--font_size_normal) * 0.95);
    padding: calc(var(--size_tiny) * 0.95);
    box-shadow: var(--palette_cl_5) 0 0 0 0;
}


.no_style{
    text-decoration: none;
    font-style: none;
}


.clickable:hover{
    color:  var(--palette_cl_2);
    cursor: pointer;
}
.clickable *:hover{
    color: var(--palette_cl_2);
    cursor: pointer;
}


/* /-----/ Classes de base pour gérer les petits éléments de la page \-----\ */

img{
    user-select: none;
}
img *{
    user-select: none;
}

.no_select{
    user-select: none;
}
.no_select *{
    user-select: none;
}

#header{
    margin: 0;
    margin-bottom: auto;
}

.progress_bar_background{
    border: 1px solid black;
    border-radius: var(--size_tiny);
    background: none;
}

.progress_bar_foreground{
    background-color: var(--palette_cl_3);
}


/* /-----/ Autre, non trié pour l'instant \-----\ */