/* GENERALE */
* { box-sizing: border-box; } 

body {
  margin: 0em 0em;
  text-align: center;
  font-family: arial;
}
a {
  display: block;
  font-size: 1em;
  text-decoration: none;
  color: midnightblue;
  background-color: white;
  border: 1px solid black;
  border-radius: 0.3em;
  margin: 0.2em;
  padding: 0.1em 0.3em;
}
a:hover {
  background-color: midnightblue;
  color: white;
}
/* INTESTAZIONE */
#int h1 {
  margin: 0.3em;
}
/* TABELLONE */
#tabellone{
  /*border: 2px solid blue;*/
  margin: 0em auto;
  width: 100%;
  padding: 4%;
}
#tabellone img {
  max-height: 10em;
  /*max-width: 60%;*/
}
#gioco { 
  /*font-size: 1.2em; 
  line-height: 1.2em;*/
}
#gioco p {
  display: inline-block;
  margin: 0.1em 0em;
  padding: 0em 0em;
}
#gioco p.lettera, #gioco p.cifra {
  width: 1.6em;
  line-height: 1.6em;
  margin: 0.1em;
}
#gioco p.parola {
  padding: 0em 0.4em;
}
#soluzione p {
  display: none;
}
#vittoria {
  display: none;
  padding: 0.5em 0em;
}
#vittoria input{
  font-size: 1.5em;
  line-height: 2em;
}
/* STRUMENTI */
#strumenti {
  position: fixed;
  bottom:0;
  left: 0;
  padding: 2% 2% 2%;
  width: 100%;
  margin: auto;
  /*margin-top: 1em;*/
  line-height: 1.5em;
  background-color: #DDDDDD;
}
#strumenti p {
  display: inline-block;
  padding: 0em 0em;
  border: 2px solid black;
  margin: 0.1em 0.01em;
}
#strumenti p:hover {
  cursor: pointer;
  background-color: black;
  color: white;
}
#strumenti p.lettera, #strumenti p.cifra {
  width: 2em;
}
#strumenti p.parola {
  padding: 0em 0.2em;;
}
#maiuscole, #minuscole {
  /*border: 2px solid red;*/
  margin: 0em 0em;
}
#minuscole {
  display: none;
}
.bordo {
  border: 2px solid black;
}
.start {
  /*width: 30%;
  height: 10em;*/
  background-color: midnightblue;
  border: 1px solid midnightblue;
  border-radius: 0.5em;
  margin: auto;
  /*display: inline-block;*/
  padding: 0.5em;
  margin: 0.2em;
  font-size: 1.5em;
  color: midnightblue;
}
.start i {
  color: white;
}
#startsx,#startdx {
  display: inline-block;
  vertical-align: top;
}
#startsx {
  /*width: 20%;*/
}
#startdx {
  /*width: 70%;*/
}
/* TABLET - DESKTOP */
@media only screen and (min-width: 601px) {
  body {
    /*background-color: #FFFFCC;*/
  }
  #tabellone {
    display: inline-block;
    width: 79%;
    vertical-align: top;
  }
  #tabellone img {
    max-height: 25em;
    /*max-width: 60%;*/
  }
  #gioco {
    line-height: 1.5em;
    font-size: 1.5em;
  }
  #strumenti {
    display: inline-block;
    position: static;
    width: 20%;
    vertical-align: top;
    padding: 1%;
    /*top: 5%;
    right: 0;*/
    font-size: 1.5em;
  }
  textarea {
    width: 40em;
    height: 10em;
    font-size: 1.3em;
  }

}

@media only screen and (max-width: 601px) {
	.sottotitolo{
    margin-top: -20px;
    margin-bottom: -20px;
  }
  #intestazione{
    margin-top: -15px;
  }
}
@media only screen and (max-height: 280px) {
	#tabellone img {
 		max-height: 8em;
	}
	#gioco{
 		margin-top: -2em;	
	}	
}