@font-face {
    font-family: "tommy regular";
    src: url("./src/fonts/tommy/TommyLight.otf");
}

:root {
    --main: #c22626;
    --mainDarker: #760000;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    box-sizing: border-box;
    font-family: "tommy regular", Arial, Helvetica, sans-serif;
}

::selection {
    background: var(--mainDarker);
    color: white;
}


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

body{
    overflow-x: hidden;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

.topnav {
    position: fixed;
    bottom: 0;
    width: 110vw;
    margin: 0;
    padding: 0;
    height: 10vh;
    background-color: rgba(255, 255, 255,0.5);
    z-index: 10;
    display: flex;
    align-items: center;
}

#logo {
    height: 100%;
    max-width: 60vw;
    display: block;
    margin: auto;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    cursor: pointer;
    object-fit:contain;

}

.menuLink{
    text-decoration: none;
    width: 10vw;
    font-size: 1em;
    transform: translateX(-10vw);
    text-align: center;
    font-weight: bolder;
    height: fit-content;
    color: var(--mainDarker);
}
.menuLink:hover{
    color: black;
}

@media screen and (max-width: 480px) {
    .menuLink{
        position: fixed;
        top:0;
        right: 0;
        margin:2em;
        transform: translateX(0);

    }
    .topnav {

        width: 100vw;
        background-color: white;
    }
    .arrow{
        bottom: 6em !important;
    }
  }
.imageScreen {
    width: 100vw;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    -webkit-animation: fadeIn 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadeIn 2s; /* Firefox < 16 */
     -ms-animation: fadeIn 2s; /* Internet Explorer */
      -o-animation: fadeIn 2s; /* Opera < 12.1 */
         animation: fadeIn 2s;
}

.image {

    max-width: 100vw;
    max-height: 90vh;/*
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%) contrast(1.2);*/
}

#infoIcon {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 1em;
    font-size: 1.6em;
    display: flex;
    align-items: center;
    color: var(--main);

}

#infoIcon:hover {
    color: var(--mainDarker);
}


.tooltip #tooltiptext {
    text-align: right;
    font-size: 0.6em;
    visibility: hidden;
    background-color: rgba(255, 255, 255, 0.6);
    color: black;
    width: fit-content;
    padding: 0.5em;
    /* Position the tooltip */
    position: absolute;
    right: 105%;
    white-space: nowrap;
}

.tooltip:hover #tooltiptext {
    visibility: visible;
}

#carousel {
    scroll-snap-type: y mandatory;
    height: 90vh;
    width: 100vw;
    overflow: auto;
    scrollbar-width: none;
}

#carousel::-webkit-scrollbar {
    display: none;
}

.info{
    position:relative;
    bottom:0;
    display: block;
    transform: translateY(-3em);
    height: 3em;
    width: 100vw;
    z-index: 1;
    text-align: center;
    padding: 1em;
    animation: fadeIn ease 3s;
}

  
#credits{
    display: block;
    text-align: center;
    font-size: 0.8em;
    margin: 1.5em;
}

.arrow{
    font-size: 2em;
    text-align: center;
    position: relative;
    bottom: 2em;
    width: fit-content;
    margin: auto;
    z-index: 3;
    color: var(--mainDarker);
    cursor: pointer;
    font-weight: 900;
}
.arrow:hover{
    transform: scale(110%);
    color: var(--main);
}
/*-----------------------------------------------------------------------------------------------------------------*/

.hidden{
    visibility: hidden;
}
.infoContainer{
    text-align: center;
    align-items: center;

    display: block;
    margin-top: 2em;
    font-size: 1.5em;
    
}

.infoContainer a{
    text-decoration: none;
    color: var(--mainDarker);

}
form{
    font-size: 0.8em;
    margin: auto;
    min-width: 50vw;
}
#lavoraForm{
    text-align: center;
    margin: 4em;

}


#lavoraForm input, #lavoraForm textarea{
    width: 50vw;
    font-size: 1.2em;
    padding: 1.5em;
    
}

#lavoraForm textarea{
    border-top: 0;
    height: 10em;
}

#lavoraForm button{
    color: white;
    width: 50vw;
    padding: 1em;
    font-size: 1.5em;
    border: none;
    background-color: var(--main);
    transition: all 1s ease;
}
#lavoraForm button:hover{
    background-color: var(--mainDarker);
    transform: scale(1.05);
}

.map{
    display: block;
    margin: auto;
    margin-top: 1em;
}

#mainContatti{
    min-height: 90vh;
    padding: 2em;
    padding-top: 0;
    width: 100vw;
    flex-wrap: wrap;
    justify-content:space-evenly;
    align-items: center;
    margin: auto;
}

.infobox{
    margin: auto;
}

#topnaveContatti{
    height: 10vh;
    text-align: center;
    top:0;
    display: block;
    position:relative;
}

.sede{
    text-align: center;
    width:fit-content ;
    margin: auto;
    margin-top: 1em;
    
}

#sedi{
    margin:2em;
    text-align: center;
}

.sedeTitle{
    font-size: 1.2em;
}

#brochure{
    text-align: center;
    margin: 0.5em;
    color: var(--mainDarker);
    font-weight: bold;
}

#brochure a{
    word-break:break-all;
}

#formTitle{
    margin: 0.5em;
    color: var(--mainDarker);
    font-weight: bold;
    font-size: 1.5em;
}



#menuSocial a{
    font-size: 1.5em;
    max-width: 100vw;
    margin: 0.2em;
}

#menuSocial a:hover{
    color: black;
}