@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&family=Quattrocento+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jim+Nightshade&display=swap');


body {
  background-image:url("img/sfondi-deco/flowers-3862320.jpg");
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  font-family:'Allura'; /*'Clicker Script'*/
}

#contenuto {
  background-color:rgba(255,255,255,0.4);
  margin:3vw;
  padding:4vw 0 1vw 0;
  border:0.3px solid transparent;
  border-image-source:url('img/icone/noun_decoration_1503924.png');
  border-image-slice:80;
  border-image-width:15px;
  border-image-repeat:round;
  border-image-outset:9px;
  outline:5px solid rgb(255,255,255,0.1);
  display:grid;
  grid-template-columns: 100%;
  grid-template-rows: 23vw 50vw auto auto auto auto 100px;
}


#titolo {
  grid-column-start:1;
  grid-column-end:span 1;
  grid-row:1 / span 1;
  justify-self:center;
  align-self:center;

}


#logo {
  height:27vw;
  width:65vw;
  transition:all 2s;
}

#logo:hover {
  height:31vw;
  width:70vw;
}

#heading {
  grid-column:1 / span 1;
  grid-row-start:2;
  grid-row-end:span 1;
  position:relative;
  margin-bottom:150px;
}

#ulmenu {
  margin:0;
  padding:0;
}



#home {
  list-style-type:none;
  position:absolute;
  top:30%;
  left:42.9%;
}

#home img {
  width:13vw;
  height:13vw;
  transition:all 1s;
}

#home img:hover {
  width:13vw;
  height:13vw;
}

.menu  {
  list-style-type:none;
}

.menu a {
  text-decoration:none;
  color:black;
  padding:3vw 2vw;
  font-size:2.7vw;
  font-weight:bold;
  transition:all 1s;
}

.menu a:hover {
  font-size:2.9vw;
}

#menuc {
  position:absolute;
  top:51%;
  left:0.2%;
  cursor:pointer;
}


#menua  {
  position:absolute;
  top:51%;
  left:19%;
}


#menus  {
  position:absolute;
  top:51%;
  right:19%;
  cursor:pointer;
}

#menuo  {
  position: absolute;
  top:51%;
  right:1%;
}

#candle1, #candle2, #candle3, #candle4 {
  width:4vw;
  height:4vw;
}

#bowC1, #bowC1_1, #bowC2, #bowC2_1, #bowS1, #bowS1_1, #bowS2, #bowS2_1, #bowCo, #bowCo1, #bowN1, #bowN1_1, #bowN2, #bowN2_1, #bowN3, #bowN3_1 {
  width:1.8vw;
  height:1.8vw;
}

.lucchetto {
  width:1vw;
  height:1vw;
}

#candele {
  display:none;
  position:absolute;
  top:90%;
  left:9%;
  list-style-type:none;
  padding:24px 0 26px 0;
  margin:1.9vw 0 0 0;
  border:1px solid transparent;
  border-image-source:url('img/icone/noun_Frame_1197744.png');
  border-image-slice: 60;
  border-image-repeat:stretch;
  border-image-width: 2vw;
  width:110%;
}

#candele li a {
  font-size: 2.5vw;
}


#speciali {
  display:none;
  position:absolute;
  top:90%;
  left:9.5%;
  list-style-type:none;
  padding:24px 0 26px 0;
  margin:1.9vw 0 0 0;
  border:1px solid transparent;
  border-image-source:url('img/icone/noun_Frame_1197744.png');
  border-image-slice: 60;
  border-image-repeat:stretch;
  border-image-width: 2vw;
  width:110%;
}


 #bottoneNatale a, #bottoneCompleanno a {
  font-size:2.5vw;
}

#natale {
  display:none;
  position:absolute;
  top:0.1%;
  left:-5%;
  list-style-type:none;
  width:110%;
  padding:10px 0 26px 0;
  border-bottom:2px solid transparent;
  border-image-source:url('img/icone/noun_Frame_1197744 - Copia.png');
  border-image-slice: 55;
  border-image-repeat:stretch;
  border-image-width: 2vw;
}


#natale li a {
  font-size:2vw;
}

#compleanno {
  display:none;
  position:absolute;
  top:0.1%;
  left:-5%;
  list-style-type:none;
  padding:10px 0 26px 0;
  width:110%;
  border-bottom:2px solid transparent;
  border-image-source:url('img/icone/noun_Frame_1197744 - Copia.png');
  border-image-slice: 55;
  border-image-repeat:stretch;
  border-image-width: 2vw;
}


#compleanno li a {
  font-size:2vw;
}



.blink {
  text-align:center;
  padding:0;
}

.blink a {
  font-size:1.3vw;
  padding:0;
}


#freccia1, #freccia2 {
  width:5vw;
  height:1vw;
  transition:all 0.5s;
}

#freccia1:hover, #freccia2:hover {
  width:5.5vw;
  height:1.5vw;
}

#search-form {
  position:absolute;
  bottom: 20%;
  left:50%;
  transform: translateX(-50%);
}

#search-input {
  width:13.5vw;
  background-color: transparent;
  border-left:1px dotted black;
  border-right:1px dotted black;
  border-bottom:1px dotted black;
  border-top:none;
  border-radius: 15%;
  font-family: "Quattrocento Sans", sans-serif;
  font-size:20px;
  font-weight: normal;
}



#search-button {
  color:black;
  font-family: "Quattrocento Sans", sans-serif;
  font-size:20px;
  font-weight:bold;
  border:none;
  border-bottom-left-radius:30%;
  border-bottom-right-radius:30%;
  background-color:rgba(129,33,33,0.03);
  margin:1px 0;
  width:97%;
  transition:all 0.6s;
}

#search-button:hover {
  background-color:rgba(129,33,33,0.8);
  color:white;
  border-radius:50%;
  cursor:pointer;
}




#prodotto {
  grid-column-start:1 / span 1;
  grid-row-start:3;
  grid-row-end:span 1;
  margin-bottom: 10vw;
  padding:1vw 4vw 6vw 4vw;
  background-color:rgba(129,33,33,0.5);
  border-top: 1px solid rgba(0,0,0,0.9);
  border-bottom: 1px solid rgba(0,0,0,0.9);
  border-radius:0.8%;

}

#prodotto h1{
  font-size:6.5vw;
  margin:0 auto 6vw 2vw;
  padding:1vw 4vw 0 4vw;
  transition:all 0.7s;
}

#caption {
  float:right;
  box-sizing:border-box;
  margin:2vw 2vw 0 3vw;
  font-size:2.5vw;
  float:right;
  text-align:left;
  width:40%;
  background-color:rgba(255,255,255,0.4);
  border-top-left-radius: 50%;
  border-bottom-left-radius: 19%;
  border-top-right-radius: 60%;
  border-bottom-right-radius: 90%;
  padding:30px 15px 5px 20px;
}


#fotoProdotto {
  grid-column-start:1 / span 1;
  grid-row-start:4;
  grid-row-end:span 1;
  box-sizing:border-box;
  width:36vw;
  height:auto;
  border:2px solid transparent;
  border-image-source:url('img/icone/noun_Frame_655752.png');
  border-image-slice:100;
  border-image-repeat:round;
  border-image-width: 40px;
  border-image-outset:45px;
  transition:all 0.7s;
  float:left;
  outline:2px solid rgba(0,0,0,0.4);
  outline-offset: -3px;
}



#divOfferta {
  float:right;
  width:36vw;
  margin:3vw 2vw 0.1vw 2vw;
  box-sizing:border-box;
  font-size:2vw;

}

#divOfferta a {
  text-decoration:none;
  color:white;
  transition:all 0.7s;
}

#divOfferta a:hover {
  color:rgb(210, 166, 190);
}


.portafogli {
  width:50px;
  height:50px;
}

#Pcompleanno {
  clear:right;
  float:right;
}

#Pcompleanno button {
  border:1px solid transparent;
  border-radius:50%;
  padding:9.5px 10px;
  text-align:center;
  margin:3px;
  font-size:15px;
  font-family:'Allura';
  font-weight:bold;
  cursor:pointer;
  transition:all 0.4s;
}

#Pcompleanno button:hover {
  box-shadow: 0px 0px 15px 0px white;
  border-style: ridge;
  border-color:rgba(0,0,0,0.8);
}




#compleannoA {
  background-color:orange;
}

#compleannoL {
  background-color:rgb(141,123,195);
}

#compleannoV {
  background-color:rgb(108,164,149);
}







#acquista {
  clear:right;
  float:right;
  text-decoration: none;
  font-size:7vw;
  font-family: 'Cookie';
  color:rgba(255,255,255,0.9);
  background-color:rgba(73,28,28,0.8);
  border-width:2px 0 2px 0;
  border-style: solid;
  border-color: transparent;
  border-radius:3%;
  border-image:url('img/icone/noun_decoration_1503881.png');
  border-image-width: 29px 0 29px 0;
  border-image-slice: 110;
  border-image-repeat:round;
  border-image-outset:19px;
  padding:20px;
  margin:9vw 8vw 0 0.5vw;
  transition:all 0.6s;
}

#acquista:hover {
  color:rgba(255,255,255,1);
  font-size:8.5vw;
  margin:13vw 7vw 0 0;
  background-color:rgb(73,28,28);
  cursor:pointer;
}

#buyForm {
  display: none;
  clear:left;
  float:left;
  margin:7vw 0 2vw 0;
  font-size:38px;
  border-top:1px solid black;
  width:89%;
  padding:5vw;
}

#buyForm legend {
  font-family:inherit;
  color:black;
}


.campoAcquisto:invalid {
  border:1px solid rgb(97,2,2);
  border-radius:5%;
  background-color:rgba(255,255,255,0.6);
  font-size:30px;
  font-family:inherit;
  width:60vw;
}

.campoAcquisto:valid {
  border:1px dotted black;
  border-radius:5%;
  background-color:rgba(255,255,255,0.6);
  font-size:30px;
  font-family:inherit;
  width:60vw;
}





#buyForm img {
  height:35px;
  width:40px;
}

#prezzoConsegna {
  display:none;
  font-size:23px;
  color: maroon;
  margin:0 20px;
}

#prezzoFinaleDiv {
  font-size:50px;
  font-weight:bold;
}

#bottoneCompletaAcquisto {
  text-align:center;
  text-decoration: none;
  font-size:7vw;
  font-family: 'Cookie';
  color:rgba(255,255,255,0.9);
  background-color:rgba(73,28,28,0.8);
  border-width:2px 0 2px 0;
  border-style: solid;
  border-color: transparent;
  border-radius:3%;
  border-image:url('img/icone/noun_decoration_1503881.png');
  border-image-width: 29px 0 29px 0;
  border-image-slice: 110;
  border-image-repeat:round;
  border-image-outset:19px;
  padding:20px;
  margin:6vw 8vw 0 0.5vw;
  transition:all 0.6s;
}

#bottoneCompletaAcquisto:hover {
  color:rgba(255,255,255,1);
  font-size:8.5vw;
  margin:5vw 7vw 0 0;
  background-color:rgb(73,28,28);
  cursor:pointer;
}


#commenti {
  grid-column-start:1 / span 1;
  grid-row-start:5;
  grid-row-end:span 1;
  margin:30px 30px 10vw 30px;
}

#commenti h2 {
  font-size:55px;
}

#commenti p {
  font-size:25px;
  font-weight:bold;
}

textarea {
  width:65vw;
  border:1px solid transparent;
  background-color:rgba(255,255,255,0.4);
  border-image-source:url('');
  padding:15px;
  font-family:inherit;
  font-size:22px;
  transition:all 0.6s;
}

textarea:hover {
  background-color:rgba(255,255,255,0.8);
}

#submit {
  border:1px solid transparent;
  background-color:inherit;
  padding:10px;
  font-family:inherit;
  font-weight:bold;
  font-size:40px;
  cursor:pointer;
  transition:all 0.6s;
}

#submit:hover {
  color:rgb(163,80,80);
}




#frecciaSu {
  position:fixed;
  bottom:0;
  right:0;
  transition:all 0.7s;
  padding:0.4px 0;
  opacity:0.6;
}

#frecciaSu:hover {
  padding:0 0 10px 0;
  opacity:1;
}

#frecciaSu img {
  width:48px;
  height:48px;
}


#info {
  background-color:rgba(88,46,46,0.5);
  grid-column-start:1;
  grid-column-end:span 1;
  grid-row-start:6;
  grid-row-end:span 1;
  border:1px solid transparent;
  border-image-source:url('img/icone/noun_Frame_655752.png');
  border-image-slice: 90;
  border-image-width: 20px;
  border-image-repeat: round;
  border-image-outset: 20px;
  border-radius:2%;
  margin:3vw;
  font-size:29px;
  transition:all 1s;
}

#info:hover {
  background-color:rgba(114,23,23,0.6);
}






#raggiungerci {
float:left;
margin:20px;
transition:all 0.7s;
}

#raggiungerci:hover {
  font-size:29px;
  margin:20px 0px 20px 30px;
}

#raggiungerci a {
  text-decoration:none;
  border:2px solid transparent;
  color:black;
  border-image-source:url('img/icone/noun_Frame_1197744 - Copia - Copia.png');
  border-image-slice: 80;
  border-image-width: 25px;
  border-image-repeat:stretch;
  transition:all 0.4s;
}

#raggiungerci a:hover {
  border:2px solid transparent;
  border-image-source:url('img/icone/noun_decoration_332540.png');
  border-image-slice: 160;
  border-image-width: 19px;
  border-image-repeat:round;
  padding:8px;
}

#mail {
  cursor:pointer;
}

#mailForm {
  display:none;
}

#mailForm legend {
  font-family: inherit;
  font-size:20px;
}

.mailInput {
  border:1px dotted black;
  border-radius:5%;
  background-color:rgba(255,255,255,0.6);
  font-family:inherit;
  font-size:25px;
}

#mailTextarea {
  width:30vw;
  height:10vw;
}

.mailBottone {
  border:none;
  color:black;
  font-family: inherit;
  font-size:20px;
  font-weight:bold;
  border:none;
  border-bottom-left-radius:30%;
  border-bottom-right-radius:30%;
  background-color:rgba(129,33,33,0.03);
  transition:all 0.6s;
  padding:5px;
}

.mailBottone:hover {
  background-color:rgba(129,33,33,0.8);
  color:white;
  border-radius:50%;
  cursor:pointer;
}





#orari {
float:right;
background-image:url('img/icone/noun_Pocket Watch_1416189.png');
background-repeat: no-repeat;
background-size: 389px 250px;
margin:20px 0 20px 20px;
padding:0 20px 0 0;
transition:all 0.7s;
}

#orari:hover {
  font-size:29px;
  margin:20px 0 20px 0;
  padding:0 30px 0 0;
}

#orari ul {
  list-style-type:none;
  margin-left:0;
}

#orari img {
  width:40px;
  height:40px;
}


footer {
  grid-column-start:1;
  grid-column-end:span 1;
  grid-row-start:7;
  grid-row-end: span 1;
  align-self:end;
  justify-self:start;
  font-family:'Jim Nightshade';
  font-size:19px;
  margin:0 20px;
}

#piede {
  font-family:'Jim Nightshade';
  font-size:0.01px;
  transition:all 1.5s;
  padding:50px 1px;
}

#piede:hover {
  font-size:19px;
  height:0.1vw;
  width:0.1vw;
}

.iconCreators {
  text-decoration: none;
  color:black;
  font-weight: bold;
}

#like {
  height:2vw;
  width:2vw;
}

#arrowHome {
  height:1.6vw;
  width:2vw;
}




@media only screen and (max-width:800px) {



  #logo {
    height:29vw;
    width:68vw;
    transition:all 2s;

  }

  #logo:hover {
    height:32vw;
    width:70vw;
  }


  .menu a {
    font-size:4vw;
    font-weight:bold;
    transition:all 1s;
  }

  .menu a:hover {
    font-size:4.4vw;
  }

  #home {
    top:20%;
    left:42.5%;
  }

  #home img {
    width:17vw;
    height:17vw;
    transition:all 1s;
  }

  #home img:hover {
    width:17vw;
    height:17vw;
  }



  #menuc {
    top:99%;
    left:0.2%;
    cursor:pointer;
  }


  #menua  {
    top:99%;
    left:23%;
  }


  #menus  {
    top:99%;
    right:25%;
    cursor:pointer;
  }

  #menuo  {
    top:99%;
    right:1%;
  }

  #candle1, #candle2, #candle3, #candle4 {
    width:6vw;
    height:6vw;
  }

  #bowC1, #bowC1_1, #bowC2, #bowC2_1, #bowS1, #bowS1_1, #bowS2, #bowS2_1, #bowCo, #bowCo1, #bowN1, #bowN1_1, #bowN2, #bowN2_1, #bowN3, #bowN3_1 {
    width:4vw;
    height:4vw;
  }

  .lucchetto {
    width:3.3vw;
    height:3.3vw;
  }

  #candele {
    top:100%;
    left:3%;
    border-image-width: 3vw;
    width:127%;
  }

  #candele li a {
    font-size: 3.5vw;
  }

  #speciali {
    top:100%;
    left:8%;
    border-image-width: 3.2vw;
    width:115%;
  }

   #bottoneNatale a, #bottoneCompleanno a {
    font-size:3.5vw;
  }

  #natale {
    top:0.1%;
    left:-7%;
    width:115%;
    border-image-width: 3vw;
  }


  #natale li a {
    font-size:3vw;
  }

  #compleanno {
    top:0.1%;
    left:-7%;
    border-image-width: 3vw;
    width:115%;
  }


  #compleanno li a {
    font-size:3vw;
  }




  #freccia1, #freccia2 {
    width:8vw;
    height:2vw;
    transition:all 0.5s;
  }

  #freccia1:hover, #freccia2:hover {
    width:8.5vw;
    height:2.5vw;
  }

  #prodotto  {
    margin-top:13vw;
  }



}