/* General styles and config */
:root {
    /* Font */

    /* Background */
    --background-light: #fff;
    --background-dark:#333;
    /* Brand */
    --color-brand: #008344;
    --color-border: #333;
    --color-dark: #222;    
    --color-light: #efefef;
    --color-warning: #cc0000;
    

    /* Config */
    --box-shadow: -1px 0px 14px 0px rgba(32, 32, 32, 0.596);
    
    /* By perceent */
    --height-m: 70%;
    --height-xl: 100%;
    --width-m: 70%;
    --width-xl: 100%;

    /* By viewport*/
    --height-vh-m: 70vh;
    --height-vh-xl: 100vh;
    --width-vw-m: 70vw;
    --width-vw-xl: 100vw;
    
}

* {
    box-sizing: border-box;
    margin: 0px;
    padding :0px;
}

a, li {
    text-decoration: none;
    list-style: none;    
    color: inherit;
    background-color: inherit;
}

/* Block main */

main { height: 100%; width: 100%; top: var(--header-height)}
main { display: flex; flex-direction: column; }

/* Main landscape sections */

.main__section-landscape,
.main__section-landscape--start {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main__section-landscape--start { align-items: start; }

/* Section display */

.section__div,
.section__div--reverse,
.section__div--column,
.section__div--column-between,
.section__div--column-reverse,
.section__div--between,
.section__div--around, 
.section__div-start,
.section__div--wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Testing */

}

.section__div--reverse { flex-direction: row-reverse; }

.section__div--column { flex-direction: column; }

.section__div--column-reverse { flex-direction: column-reverse; }

.section__div--between { justify-content: space-between; }

.section__div--around { justify-content: space-around; }

.section__div--start { justify-content: start; align-items: start; }

.section__div--wrap { flex-wrap: wrap; }

.section__div--column-between { flex-direction: column; justify-content: space-between; }

.section__div--box-shadow { box-shadow: var(--box-shadow); }


/* Generic divs */

/* Displays */
.div,
.div--blank,
.div--column,
.div--column-between,
.div--row,
.div--row-between,

.div--start,
.div--center,
.div--wrap,

/* Sizes */

/* By percent */
.div--height-m,
.div--height-xl,
.div--width-m,
.div--width-xl,
.div-max-size,

/* By viewport */
.div--height-vh-m,
.div--height-vh-xl,
.div--width-vh-m,
.div--width-vh-xl { display: flex; width: 100% }

/* Generic div displays */

/* Displays */
.div--blank { padding: 5px; width: 100%; }

.div--column { flex-direction: column; gap: 25px; }
.div--column-between { flex-direction: column; justify-content: space-between;  }

.div--row { flex-direction: row; gap: 25px; }
.div--row-between { flex-direction: row; justify-content: space-between; }

.div--start { align-items: start; justify-content: start;}
.div--center { align-items: center; justify-content: center; }
.div--wrap { flex-wrap: wrap; }

/* Sizes */

/* By percent */
.div--height-m { height: var(--height-vh-m) }
.div--height-xl { height: var(--height-xl) }
.div--width-m { min-width: var(--width-m) }
.div--width-xl { min-width: var(--width-xl) }
.div--max-size { height: var(--height-xl); width: var(--width-xl); }

/* By viewport */
.div--height-vh-m { height: var(--height-vh-m) }
.div--height-vh-xl { height: calc(var(--height-vh-xl) - var(--header-height)) }
.div--width-vw-m { width: var(--width-vw-m) }
.div--width-vw-xl { width: var(--width-vw-xl) }

/* Main components */

/* Action wrappper and buttons */

.action-wrapper,
.action-wrapper--between,
.action-wrapper--transparent,
.action-wrapper--wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 8px;
}

.action-wrapper--between { justify-content: space-between; }
.action-wrapper--transparent {
    background-color: transparent;
    color: inherit;
}
.action-wrapper--wrap { flex-wrap: wrap; }

.action-wrapper__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.action-wrapper__btn-auto {
    width: auto;
}

/* Boxes */

/* Inputs */

/* Block footer */