@layer theme {
    #hero {
        padding:0px;
        background-attachment: fixed;
        background-size: 100% 100%;
        background-image: linear-gradient(    to bottom,    rgb(255 255 255 / 50%),    rgb(0 0 50/ 70%)  ),
        url("../../assets/ian-battaglia-9drS5E_Rguc-unsplash.webp");
        background-blend-mode: luminosity;

    }

    #herotitle{
        color:white;
        padding: 4rem;
    }

    #herobox{
        box-shadow: var(--global-box-shadow);
    > .companylogo {
        display: grid;
        margin: auto;
        opacity: 80%;
        background-color: white;
        padding: 2rem;
        }
    }
}

@layer layout {
    #hero {

    }

    #herotitle{
        margin:auto;
        text-align: center;
    }

    #herobox{
        text-align: center;
        border-radius: 5px;
        border: none var(--palette-color-3) 3px;
        padding: 15rem 10rem;

    }
}




.bottone{
  background-color: var(--palette-color-4);
  border: 2px solid var(--palette-color-3);
  border-radius: .2em;
  color: black;
  width: fit-content;
  text-decoration: none;
  margin:auto;
  font-size: var(--font-size);
  cursor: pointer;
  padding: 0.5rem;

}
.bottone:hover {
  background-color: var(--palette-color-3);
  border: 2px solid var(--palette-color-4);
  transition: ease-in-out 0.3s;
    scale: 1.2;
    animation: none;
}

@keyframes backgroundcolor {
  from {
    filter: brightness(80%);
  }
  to {
  }
}