/* root */
:root  {
        /*navigation */
    --primecolor-nav: #60463B;
    --secondarycolor-nav: #7e6152;
    --accentcolor-nav: #CCC9E7;
    --accentoncolor-nav: #b5b3cc;
        /* main */
    --primarycolor-main: #c5bca8;
    --secondarycolor-main:  #BFB5A8;
    --accentoncolor-main: #665a49;
        /* footers */
    --primarycolor-footer: #60463B;
    --secondarycolor-footer: #7e6152;
    --accentcolor-footer: #CCC9E7;
    /*      sizes       */
        /* margins/paddings */
    --margins-body: 0 5vw;
    --min-width-main: 95vh;
    --radius-body-bottom: 50px;
        /* navigation */
    --font-size-nav: 30px;
    --height-nav: 5vh;
    --width-nav: 100vw;
        /* footer */
    --height-footer: 30vh;
}

/* Overall */
* {
    margin: 0;
}

html {
    scroll-behavior: smooth;
    background-color: var(--secondarycolor-main);
    display: flex;
    flex-direction: column;
}

/* body */
.main  {
    height: auto;
    min-height: var(--min-width-main);
    width: auto;
    overflow: hidden;
    background-color: var(--primarycolor-main);
    margin: var(--margins-body);
    padding-top: var(--height-nav);
}