@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Unna:wght@700&display=swap');

:root {
    --nero: #161616;
    --bianco: #ffffff;
    --principale: #d50736;
}

::selection {
    color: var(--bianco);
    background: var(--principale);
}

::placeholder {
    color: var(--nero);
    opacity: 1; /* firefox */
}

/* scrollbar */
::-webkit-scrollbar {
    background: var(--nero);
    width: 6px;
}

::-webkit-resizer {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--principale)
}

::-webkit-scrollbar-corner {
    display: none;
}

html {
    scrollbar-width: thin;
}

/* firefox */

/* tags */
body {
    width: 100%;
    position: relative;
    background-color: var(--bianco);
    color: var(--nero);
    overflow-x: hidden !important;
    font-family: 'Open Sans', sans-serif;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden !important;
    background-color: var(--bianco);
}

/* from standard mode to quirks mode */
html, body {
    min-height: 100%;
}

/* Body zoom */
@media (min-width:768px) {
    body {
        max-width: 1920px;
        display: table;
        margin: auto;
    }

}

h1, h2, h3 {
    font-weight: 700;
}

h1 > span {
    color: var(--principale);
    font-size: 2em;
    line-height: 40pt;
}

@media (max-width:991px) {
    h2 {
        font-size: 3em;
        color: var(--principale);
    }

}

@media (min-width:992px) {
    h2 {
        font-size: 4em;
        color: var(--principale);
    }

}

b {
    font-weight: 600;
}

.filter-grey {
    filter: grayscale(1);
}

.filter-grey:hover {
    filter: grayscale(0);
}

.elemento-gallery {
    cursor: pointer;
}

/* su smartphone e sopra i 2k non serve tutto quello spazio vuoto 100vh */
@media (min-width:768px) and (max-height:1920px) {
    section {
        min-height: 100vh;
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

}

a {
    color: var(--principale);
    transition: color 0.05s linear;
}

a:hover {
    color: var(--principale);
    transition: color 0.08s linear;
}

.link-footer {
    color: var(--bianco);
    transition: color 0.05s linear;
}

.link-footer:hover {
    color: var(--principale);
    transition: color 0.08s linear;
}

.unna {
    font-family: 'Unna', serif;
}

.principale {
    color: var(--principale) !important;
}

.pulsante {
    cursor: pointer;
    letter-spacing: 0.8pt;
    font-size: 18px;
    white-space: nowrap;
    border-radius: 10px;
    padding: 12px 34px;
    text-decoration: none;
    border: 2px solid var(--principale);
    transition: background-color 0.48s, color 0.48s;
    color: var(--bianco);
    background-color: var(--principale);
}

.pulsante:hover {
    transition: background-color 0.27s, color 0.27s;
    color: var(--principale);
    background-color: transparent;
}

.box-shadow {
    box-shadow: 0px 0px 10px 0px rgb(0, 0, 0, 0.2);
}

.box-shadow-inset {
    box-shadow: inset 0px 0px 6px 1px rgb(0, 0, 0, 0.2);
}

.pad_b80 {
    padding-bottom: 80px;
}

.pad_t80 {
    padding-top: 80px;
}

.pad_b50 {
    padding-bottom: 50px;
}

.pad_t50 {
    padding-top: 50px;
}

@media (min-width:768px) and (max-width:992px) {
    .padding_titolo {
        padding-top: 200px;
    }

}

@media (min-width:768px) {
    #introduzione {
        background: url('https://www.fioreria-ziliotto-bassano.it/img/introduzione.webp');
        background-position: 0% 20%; /* x y */
        background-size: auto 45%; /* width heigth */
        background-repeat: no-repeat;
    }

}

/* 1024 x 768 */
@media (min-width:992px) and (orientation:landscape) {
    #introduzione {
        background: url('https://www.fioreria-ziliotto-bassano.it/img/introduzione.webp');
        background-position: 0% 50%; /* x y */
        background-size: auto 67%; /* width heigth */
        background-repeat: no-repeat;
    }

}

/* 1200 x 1920 */
@media (min-width:992px) and (orientation:portrait) {
    #introduzione {
        background: url('https://www.fioreria-ziliotto-bassano.it/img/introduzione.webp');
        background-position: 0% 30%; /* x y */
        background-size: auto 50%; /* width heigth */
        background-repeat: no-repeat;
    }

}

@media (min-width:1200px) and (orientation:landscape) {
    #introduzione {
        background: url('https://www.fioreria-ziliotto-bassano.it/img/introduzione.webp');
        background-position: 0% 75%; /* x y */
        background-size: auto 80%; /* width heigth */
        background-repeat: no-repeat;
    }

}

#footer {
    background-color: #2e2d2c;
    color: var(--bianco);
}

.font-22 {
    font-size: 22px;
}

.font-20 {
    font-size: 20px;
}

.font-18 {
    font-size: 18px;
}

.footer-logo {
    max-height: 190px;
}