body 
{
margin: 0px 36px 36px 36px;
background-color:black;
color:#77aa89;
padding:0px;
}

h1
{
font-size:250%;
font-family:Questrial;
font-weight:normal;
text-align: left;
display:block;
margin-bottom:10px;
}

/*Cover*/
.numeridisplay
{
font-size:1600%;
font-family:monogram;
font-weight:500;
color:black;
text-align:center;
border-radius:10px;
margin-top:15px;
width:100%;
height:100%;
background-color:#77aa89;
white-space:pre;
}

.luce:hover
{
animation:mymove 1s;
animation-iteration-count: infinite;
}

@keyframes mymove 
{
  from {background-color:#77aa89;}
  to {background-color:black;}
}

.vibrazione:hover
{
animation: shake 0.5s;
animation-iteration-count: infinite;
}

@keyframes shake
{
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }	
}

.ibrido:hover
{
animation:mymove 1s;
animation-iteration-count: infinite;
}

/*NAV*/
.border_radius
{
display:block;
margin:0px;
float:right;
border-radius:10px;
padding-top:5px;
width:130px;
height:50px; 
background-color:black;	
color:#77aa89;
}

#nav:hover
{
background-color:#77aa89;
color:black;

}

.flex
{
display: flex;
justify-content: space-between;  
}

#nav
{
display:block;
float: right;
color:#77aa89;
background: black;
text-decoration:none;
border:1px solid #77aa89;  
margin:0px;
font-size:250%;
font-family:Questrial;
text-align:center;
}

/*Finestra-freccia*/
.arrow
{
display: flex;
justify-content: space-between; 
align-content: flex-end;  
}

.accordion 
{
font-size:250%;
font-family:Questrial;
font-weight:normal;
cursor: pointer;
border: none;
text-align: left;
outline:none;
transition: 0.4s;
background-color:black;
color:#77aa89;
border-bottom:2px solid #77aa89;
padding-top:10px;
padding-bottom:4px; 
width:100%;
}

.accordion:hover .arrow,
.arrow:hover
{
  filter:brightness(0%);
}

.active  .arrow,
.arrow:hover
{
  filter:brightness(0%);
}

.active, .accordion:hover 
{
background-color:#77aa89;
color:black; 
}

.panel 
{
  margin-top:30px;
  margin-bottom:30px;
  display: none;
  background-color:black;
  overflow: hidden;
}


/*Layout interno*/
.griglia
{
max-width:auto;
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-column-gap:25px;
grid-row-gap:10px;
margin-bottom:10px;
}

.colonna_1
{
grid-column:span 1;
min-height:10px;
}
		
.colonna_2 
{
grid-column: span 6;
}

.colonna_3 
{
grid-column: span 4;
}
		
.colonna_4 
{
grid-column: span 5;
}

.span_1
{
grid-column: span 1;
}

.span_2
{
grid-column: span 2;
}

.span_3
{
grid-column: span 3;
}

.span_12
{
grid-column: span 12;
}


p 
{
margin:0;
}

.paragrafointro
{
font-size:200%;
font-family:Questrial;
font-weight:350;
line-height:1;
text-align:left;
word-spacing:auto;
font-size-adjust: 0.5;
}

.paragrafobase
{
font-size:150%;
font-family:Questrial;
font-weight:350;
line-height:1;
text-align:left;
word-spacing:auto;
font-size-adjust: 0.5;
}
	
.img1
{
width:82%;
border-radius:10px;	
}

.dida
{
font-size:120%;
font-family:Questrial;
font-weight:350;
line-height:1;
white-space:pre;		
}

.imgstatistica
{
width:90%;
margin-left:-20px;
}

.numeri
{
font-size:250%;
font-family:Questrial;
font-weight:350;
line-height:1;
margin-top:75px;
display:block;	
}

.img2
{
width:130%;
margin-top:60px;
margin-left:-150px;
}

h3 
{
font-size:200%;
font-family:Questrial;
font-weight:500;
margin-top:70px;
margin-bottom:30px;
}

.annulla
{
color:black;  
}

a
{
color:#77aa89;
}

/*Codice*/

    .box {
      display: block;
      width:100%;
      min-height:2em;
      font-size:800%;
      font-family:monogram;
      margin-top:30px;
      border-radius:10px;
    }

    input {
      width:100%;
      height:150px;
      background-color: #77aa89;
      padding: 0px;
      font-size:800%;
      font-family:monogram;
      font-weight:500;
      color:black; 
      border-radius:10px;
    }   

/*
.space
{
white-space: pre;
}
*/
.alfabeto
{
font-size: 500%;
font-family:monogram;
}

/*Footer*/
.colophon
{
margin-top:50px;  
}

.testocolophon {
  font-family: Questrial;
  font-weight: 500;
  font-size: 120%;
  line-height: 1;
  text-align:left;
  }


@font-face {
    font-family: 'monogram';
    src: url('monogram.eot');
    src: url('monogram.eot?#iefix') format('embedded-opentype'),
        url('monogram.woff2') format('woff2'),
        url('monogram.woff') format('woff'),
        url('monogram.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Questrial';
    src: url('Questrial-Regular.woff2') format('woff2'),
        url('Questrial-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



@media (max-width:600px) 
{

.numeridisplay
{
font-size:100px;  
height:100%;
width:100%;
}  

.griglia {
max-width: initial;
display: block;
}

.colonna_1 
{
margin-bottom: 1em;
}

}