@font-face {
    font-family: 'Dosis';
    src: url('fonts/Dosis-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Gestisce tutti i pesi se usi il font variabile */
    font-style: normal;
    font-display: swap;
}


html, 
body {width: 100%; height: 100%; margin: 0 auto; padding: 0; 
  background: linear-gradient(227deg, rgba(0,0,0,.7), rgba(0,0,0,.2)), url('bg1.jpg') no-repeat center center; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
      -ms-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  font-size: 16px;
  font-family: 'Dosis', sans-serif;
  font-weight: 600;
}

a { text-decoration: none; }

p { margin: 0px; padding: 2px; }

input { width: 100%; }

.border { border: 1px solid red; }   

.buttons {
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
      -ms-flex-direction: column;
      -o-flex-direction: column;
          flex-direction: column;
  justify-items: center; 
  align-items: center;   
  flex-wrap: nowrap;
  margin: 0 auto;
  padding: 10px;
  top: 0px;
  width: 100%;
  height: 100%;
  color: black;
  overflow: hidden;
  transition: all 1s cubic-bezier(.215,.610,.355, 1);
}

.buttons h2{
  padding: 10px;
  text-align: center;
  color: white;
  box-shadow: 1px 1px 4px #999797;
  border-radius: 12px; 
}

.button{
  justify-items: center;
  text-align: center;
  margin-bottom: 20px;
  padding: 40px 20px;
  background-color: rgb(240, 220, 194);
  border: 1px solid;
  border-radius: 10px;
  width: 100%;
  transition: all 0.7s ease-in-out;
}

.button_content{
  opacity: 1;
  color: antiquewhite;
  font-weight: bold;
}

.button-effect1{
  opacity: .8;
  box-shadow: 4px 4px 4px #999797; 
  background-color: yellow;
}

.button-effect2{
  opacity: .8;
  box-shadow: 3px 3px 3px #999797; 
}

/* Smartphone */
/* @media (max-width: 767px) {} */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;
}