@import url("fields.css");
@import url("widget/bottone.css");
@layer theme {
    :root{
        --global-element-box-shadow: 20px 8px 16px 0px var(--palette-color-1);
        --brand-palette-color-1: #2b7e62;
        --brand-palette-color-2: #bdbcbc;
        --palette-color-1: #939393;
        --palette-color-2: #d5d4d0;
        --palette-color-3: #dadada;
        --palette-color-4: #fff;
        --global-box-shadow: 0px 0px 0px 0.5px rgb(50 50 93 / 10%),
                             0px 2px 5px 0px rgb(50 50 93 / 10%),
                             0px 1px 1.5px 0px rgb(0 0 0 / 7%);
        --global-border: solid var(--palette-color-3) 1px;
        --global-border-radius: 10px;
        --buttons-border-radius: .2em;
        --buttons-text-color: #696969;
        --font-family: "Lato", "Open Sans", Helvetica, Arial, sans-serif;
        --font-size-interactive: calc(6px + 1vw);
        --font-size: calc(5px + 1vw);
        --font-size-vw: 2vw;
        --icon-size:2em;
        --login-background:linear-gradient(to bottom, rgb(255 255 255 / 30%),
                        rgb(0 0 50 / 0%)),
                        url("../../sitebase/assets/engin-akyurt-A9_IsUtjHm4-unsplash.webp");

        @media (max-width: 768px) {
            --font-size-interactive: calc(1rem + 10vw);
            --font-size: calc(1rem + 5vw);
        }

    }
    :root button, :root input[type=submit] {
        --button-size: 15px;
        --buttons-border-radius: .2em;
    }
    :root nav {
        --nav-text-color: black;
        --nav-background-color: var(--palette-color-4);
        --nav-border-color: var(--palette-color-3);
        --nav-border-radius-bottom: 0 0 10px 10px;
        --nav-box-shadow: var(--global-box-shadow);
        --nav-fixed-height: 0.5in;
        --nav-fixed-width: 7rem;
        --nav-lateral-padding: 2%;
        --nav-lateral-margin: 0%;
        font-size:calc(var(--font-size)+1.1vw);
    }
    input, select, datalist {
        --palette-color-input-required: none;
        --palette-color-input-valid: none;
        --palette-color-input-invalid: none;
    }
}

@layer default{
    nav#sitemainbar{width: 100%;}
    main {
        display: grid;
        > section {padding: 3rem;}
    }
    header {
        > small {
            display: block;
        }
        > .imgpreview{
            max-width:200px;
        }
    }
    a {text-decoration: none;font-family: inherit;color: inherit;}
    p {font-size : calc(var(--font-size)*0.8);}
    h1 {font-size: calc(var(--font-size)*1.5);}
    h2 {font-size: calc(var(--font-size)*1.4);margin: auto;}
    h3 {font-size: calc(var(--font-size)*1.3);margin: auto;}
    h4 {font-size: calc(var(--font-size)*1);margin: auto;}
}

/*Custom*/
body {
    color:#545454bd;
    width: auto;
    font-family:var(--font-family);
    > header {
    flex-direction: column;
    margin: 3vh 0 0 0;
    display: flex;
        > h1{
        margin:0 1vw;
        background-color: var(--palette-color-2);
        padding: 1vw;
        }
    }
}

/*Custom Sezione Contattaci*/
#contattaci {
    fieldset {
        border:none;
        text-align: left;
    }
    legend {
        display:none;
    }
}