@font-face {
    font-family: grotesk;
    src: url("fonts/Px Grotesk-Regular.ttf");
    font-family: myArial;
    src: url("fonts/arial.ttf");
}

html, body{
    background: black;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    cursor:default;
    position: fixed;
    height: 100%;

}

body{
/* utile in part per safari ma no su iphone -> vedi js
  /*transform-style: preserve-3d;*/

}

*{
  padding: 0;
  margin: 0;
  user-select: none;

}

#svgBox{
  position: fixed;
  transform: translateZ(0);
  z-index: 1;
  width: 100%;
  height: 100%;

}
.nomiDiv{
    position:absolute;
    transform: translateZ(0);


    background: rgba(200,0,0,0.95);
    outline: 2px solid #0f0;
    outline-offset: -3px;


}
.nomiPar
{
  position: absolute;
  display: inline-block;

  cursor: pointer;

  white-space: nowrap;
  font-family: myArial, sans-serif;
  font-weight: normal;


  transform: translateX(100vw);
/*
  background: rgba(200,200,0,1);
  outline: 1px dashed #f00;
  outline-offset: -4px;
*/
}
.trans{
  transition-timing-function: linear;
  transition-property: transform;
  transform: translateX(-100%);
}

.hideDiv {
  display: none;
}

.immagine{
  position: fixed;
  transform: translateZ(0);
  z-index: 2;
}

.titoloNome{
  color: white;
  position: absolute;
  display: block;
  white-space: nowrap;
  font-family: myArial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  background: rgba(0,0,0,0.5);
}


.titoloNomeMobile{
  color: white;
  display: inline-block;
  font-family: myArial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  background: rgba(0,0,0,0.5);
  margin: 15px;
}

.testoNomeMobile{
  color: white;
  position: relative;

  display: inline-block;
  font-family: myArial, sans-serif;
  font-weight: normal;
  font-size: 4vmin;
  background: rgba(0,0,0,0.5);
  outline: 1px solid #fff;
  margin: 1vmin;
  padding:1vmin;
}