body {
    margin : 0; 
    padding : 0; 
}
.title-section {
    background-color: dimgray;
    color : crimson;
    padding : 1.5rem;  
}
.ul-content {
    margin : 0; 
    padding : 0; 
}
.list-title {
    background-color: darkgray;
    padding: 0.3em 0.1em;
    font-weight: 600;
}
.list-line {
    display : grid; 
}
.weapon-division > .ul-content > .list-line {
    grid-template-columns: repeat(5, 1fr) 5fr;
}
.armor-division > .ul-content > .list-line {
    grid-template-columns: 1fr 2fr repeat(4, 1fr);
}
.spell-division > .ul-content > .list-line {
    grid-template-columns: 2fr 1fr 1fr 2fr 1fr 4fr; 
}
/********************
    Nouveaux styles
********************/
.full-page {
    height: 100vh;
    max-width: 100vw;
}
.style-window {
    display : grid; 
    grid-template-rows: 3fr 20fr 1fr;
}
.main {
    display : grid; 
    grid-template-columns: 3fr 7fr;
}
.main-header {
    width : 100%; 
    height : 100%; 
    display : grid; 
    grid-template-rows: 5fr 2fr;
}
.nav-bar {
    background-color : dimgray; 
    display : flex; 
    justify-content: left;
}
.nav-button {
    height : 100%; 
    width : 12rem; 
    background-color: grey;
    border : none; 
    color : white; 
    font-size: 1rem;
    text-transform: capitalize;
}
.nav-button:hover{
    background-color: rgb(46, 59, 71);
}
.website-title-section {
    color : #2a0209; 
    font-size : 2rem; 
}
.app-title-section {
    color : #2a0209; 
    font-size : 1.2rem;
    text-transform: capitalize; 
}
.footer-section {
    background-color: dimgray;
}
.form-section {
    display : grid; 
    grid-template-rows: 1fr 20fr 2fr;
}
.form-title {
    display : flex; 
    align-items: center;
    padding-left: 0.5rem;
}
.form-main-section {
    display : flex; 
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.input-line {
    width : 95%; 
    margin-left : 0.2rem;
}   
.textarea-style {
    display : grid; 
}
.textarea-style > textarea {
    resize:  none;
    height: 10rem;
}
.input-style {
    display : grid; 
    grid-template-columns: 1fr 4fr;
}
.input-style > label {
    text-align: right;
    margin-right : 0.2rem;
}
.input-style > input {
    text-align: left;
    margin-left : 0.2rem; 
}
.button-editor-section {
    display: grid;
    grid-template-columns: repeat(10,1fr);
    padding: 0.5rem;
    justify-items: center;
}
.button-section {
    display : flex; 
    padding : 0.2rem; 
    justify-content: space-around;
}
/* Tailles */
.btn-large {

}
.btn-medium {
    width : 7rem; 
    font-size: 0.9rem;
    height: 2.5rem;
}
.btn-small {
    width: 4.2rem;
    font-size: 0.9rem;
    height: 2rem;
}
/* Couleurs */
.btn-grey {
    color: white;
    background-color: grey;
}
.btn-grey:hover {
    background-color: dimgray;
}
.btn-grey:active {

}
/* Styles */
.btn-normal {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    border-radius: 0.5rem;
}
.list-section {
    display : grid; 
    grid-template-rows: 1fr 8fr;
}
.filter-style-normal {
    display : grid; 
    grid-template-columns: repeat(4,1fr);
    align-items: center;
}
.list-editor-section {
    padding : 0.2rem; 
    max-height: 70vh;
    overflow-y: scroll;
}
.division-title {
    font-size: 1.2rem;
    font-weight: 800;
    text-decoration: underline;
}
.list-ul > li {
    display : grid; 
    list-style: none;
    align-items: center;
}
.list-ul > li:hover {
    background-color: lightgray;
}
.division-sourcedocument {
    grid-template-columns: 1fr 18fr 2fr 2fr;
}
.division-magicalschool {
    grid-template-columns: 1fr 20fr;
}
.division-magicalitem {
    grid-template-columns: 1fr 6fr 6fr 4fr 4fr;
}
.division-feature {
    grid-template-columns : 1fr 3fr; 
}
.header-section {
    display : grid; 
    font-size: 1.1rem;
    background-color: grey;
}
.list-image {
    width : 2rem; 
}
.cell-image {
    display : flex; 
    align-items: center;
    justify-content: center;
}