:root{
    --text-color: #253163;
    --menu-bg: #253163;
    --site-bg: white;

    --header-height: 134px;
    --footer-height: 428.594px;
}

/* STILI PAGINA */
@font-face {
    font-family: GillSans;
    src:url(font/gill-sans/Gill\ Sans.otf)
}

body{
    font-family:'Gill Sans';
    background-color: var(--site-bg);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1{
    font-size: xxx-large;
    text-align: center;
    text-transform: uppercase;
}

h2{
    font-size: xx-large;
    text-align: center;
    text-transform: uppercase;
}

h3{
    font-size: x-large;
    text-align: center;
}

h4{
    font-size: larger;
    text-align: center;
}

p{
    font-size: large;
}

a{
    color: white;
}

blockquote{
    font-style: italic;
}

/* STILI HEADER */
header{
    height: 10%;
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: var(--menu-bg);
    height: 104px;
    z-index: 9999;
}

#img-logo-header{
    width: 100px;
    transition: 400ms;
    margin-left: 15px;
}

#img-logo-header:hover{
    transition: 400ms;
    scale: 105%;
}

.menu{
    display: inline-block;
}

.menu-element{
    display: inline-block;
    list-style: none;
    margin: 0 2px;
    font-weight: bold;
    position: relative;
}

.menu-element a{
    text-decoration: none;
    padding: 20px;
    border-radius: 30px;
    transition: 400ms;
}

.menu-element a:hover{
    transition: 400ms;
    background-color: var(--site-bg);
    color: var(--text-color);
}

#selected-item{
    background-color: var(--site-bg);
    color: var(--text-color);
}

.menu-element ul{
    text-align: center;
    display: none;
    list-style-type: none;
    color: var(--site-bg);
    position: absolute;
    top: calc(100% + 20px);
    right: 2px;
    z-index: 999;
}

.menu-element ul li:first-child a {
    border-radius: 20px 20px 0 0;
}

.menu-element ul li:last-child a {
    border-radius: 0 0 20px 20px;
}

.menu-element ul li a{
    display: block;
    background-color: var(--menu-bg);
    border-radius: 0;
    width: 150px;
    border-bottom: solid 0.5px white;
    border-top: solid 0.5px white;
}

.menu-element:hover ul{
    display: block;
}

.menu-element.first-element ul li:hover > a {
    background-color: var(--site-bg);
    color: var(--text-color);
}

@media(max-width: 1100px){
    nav{
        display: inline-block;
    }
    
    #img-logo-header{
        margin: 0;
    }
    
    .menu{
        padding: 10px;
    }

    .menu-element{
        display: inline-block;
        list-style: none;
        margin: 0 5px;
        font-weight: bold;
        font-size: small;
    }

    .menu-element ul{
        top: calc(100% + 20px);
        right: 2px;
        z-index: 999;
    }

    .menu-element ul li a{
        width: 120px;
    }
}

@media(max-width: 970px){
    .menu{
        display: none;
    }

    .menu li{
        display: block;
        top: 100px;
    }
}


/* STILI PAGINA GENERALE */
main{
    margin: 0 4%;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
}



/* STILI FOOTER */

footer{
    width: 100%;
    background-color: var(--menu-bg);
    color: var(--site-bg);
    bottom: 0px;
    margin-top: 50px;
}

.colonne-in-3{
    display: inline-flex;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.colonna-footer{
    width: 33.3%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* logo - footer - COLONNA 1 */
.colonna-1 img{
    transition: 400ms;
    width: 150px;
}

.colonna-1 img:hover{
    transition: 400ms;
    scale: 110%;
}

/* menu-footer */
.colonna-2{
    justify-content: flex-start;
}

.footer-menu-element{
    margin: 10px;
    font-weight: bold;
}

.footer-menu-element a{
    text-decoration: none;
}

.footer-menu-element a:hover{
    text-decoration: underline;
}


/* form - footer */
legend,
fieldset label{
    color: var(--site-bg);
}

fieldset label{
    display: inline-block;
    width: 70px;
    text-align: right;
    margin: 5px 0;
    font-weight: bold;
}

fieldset input,
fieldset textarea{
    width: 70%;
    margin: 5px 0;
    font-family: inherit;
}

fieldset input[type="submit"]{
    width: 100px;
}

fieldset label[for="object"]{
    align-self: start;
    margin-right: 5px;
}

fieldset div{
    display: inline-block;
    width: 100%;
}

fieldset input[type="submit"]{
    background-color: var(--site-bg);
    border: 0;
    font-weight: bolder;
    font-size: large;
    color: var(--text-color);
    border-radius: 20px;
    width: 300px;
    height: 50px;
    cursor: pointer;
    transition: 400ms;
}

fieldset input[type="submit"]:hover{
    transition: 400ms;
    scale: 105%;
}

#contenitore-object{
    display: flex;
}

/* end - footer*/
.copyright{
    display: block;
    text-align: center;
    padding-bottom: 5px;
}

.copyright p{
    margin: 9px 0;
}

@media(max-width: 878px){
    .colonna-1{
        display: none;
    }

    .colonna-2{
        text-align: center;
        width: 100%;
        justify-content: center;
        padding-right: 0px;
        padding-left: 0px;
    }

    .colonna-2 li{
        list-style-type: none;
    }

    .colonna-2 ul{
        list-style-type: none;
        padding: 0;
    }

    .colonna-2 a{
        text-decoration: underline;
    }

    .colonne-in-3{
        display: flex;
        flex-direction: column;
    }
}