/*div.titolo{color:blue;text-align: center;font-size:40px}*/
body{
    margin: 0px;font-family: arial,helvetica,sans-serif;
    background-color: #181818; padding:3px;
    }

input[type="text"] {
        width:30%; padding:10px; border:5px solid rgb(187, 235, 191);
} 

input[type="submit"] {
  width:20%; padding:10px; border:5px solid rgb(187, 235, 191);
}

input[type="number"] {
  width:50%; padding:10px; border:5px solid rgb(187, 235, 191);
}

input:hover { width:22%; transition-property:width; transition-duration:0.3s;
} 

.header .logo {
  color:rgb(93, 222, 170);font-family: 'Mohave', sans-serif;font-size:44px;
  text-decoration:none; 
}
a { color: rgb(167, 162, 162); text-decoration: none; }

.header{
      background-color: #212121;
      box-shadow: 1px 1px 4px 0 rgb(0, 0, 0, .1);
      position:sticky;width: 100%;z-index: 1
 }
.header ul{
          margin:0;padding: 0;list-style-type: none;overflow: hidden;
          background-color: #212121
 }
.header ul a{
            display: block; border-right: 1px solid transparent; padding: 20px;
            text-decoration: none;
}
.header ul a:hover{ background-color: #3a3535 }

.foto { display: block;opacity: 0.8; border-radius: 10px 10px 10px 10px; }

h2    { color: rgb(205, 222, 222); border: 3px solid red; 
        border-radius: 20px; display: inline; padding: 2px; }

p     { color:rgb(165, 188, 188); font-family:sans-serif; font-size:19px;}

thead td { font-weight: bold; font-size: 16px; color:rgb(207, 207, 219);
  padding: 1em; background-color: rgb(167, 3, 3) 
}

tbody tr:nth-child(odd) { background-color:rgb(43, 95, 58) }

tbody tr:nth-child(even) { background-color:rgb(23, 62, 51) }

tbody td { padding: 6px; color:rgb(177, 205, 231); font-family: 'Mohave'; width:70px; font-size:17px; }

li { color: rgb(71, 211, 243);}

.header .menu{
  clear: both;/*se ne frega del float precedente*/
  max-height: 0px;/*cancella le scritte del menu a sinistra*/
  transition: max-height .2s;
}
.header .menu-icon{
  border: 1px solid red;
  padding: 20px 20px;
  position: relative;
  float: right;
  cursor: pointer;/*la freccetta diventa manina*/
}
.menu-btn:checked ~ .tmpp { background-color: aliceblue; }

/* CREAZIONE DISEGNO MENU NEI MOBILI con pseudo elementi */
.header .menu-icon .nav-icon{
          background-color: grey;
          display: block;
          width: 18px;
          height: 2px;
          position: relative;
          transition: background-color .2s esse-out;
}
.header .menu-icon .nav-icon::before{
        background-color: grey;
        content: "";/*contiene un testo */
        display:block;
        height: 100%;/*del nav-icon precedente*/
        width: 100%;/*del nav-icon precedente*/
        transition: all .2s;
        position: absolute;
        top: 5px
}
.header .menu-icon .nav-icon::after{
        background-color: grey;
        content: "";
        display:block;
        height: 100%;
        width: 100%;
        transition: all .2s;
        position: absolute;
        top: -5px
}
.header .menu-btn{display: none}
/* quando la checkbox è ceccata l'effetto lo dai a menu */
.menu-btn:checked ~ .menu{max-height: 340px}
.menu-btn:checked ~ .menu-icon .nav-icon{
  background-color: transparent
}

/*quando si cecca il simbolo menu diventa una x*/
.menu-btn:checked ~ .menu-icon .nav-icon::before{
  transform: rotate(-45deg);top: 0
}
.menu-btn:checked ~ .menu-icon .nav-icon::after{
  transform: rotate(45deg);top: 0
}
.foot {
  position:relative; padding:0px 0px 20px 20px; color:blanchedalmond; font-family:'mohave', sans-serif; font-size:42px;
} 
/* EFFETTO RUOTA FOTO */
.demo {
  position:relative;
  width:340px;
  height:200px;
  overflow:hidden;
  margin:0px 70px 50px;
  }
  
  .demo figure {
  margin:0;
  padding:0;
  cursor:pointer;
  }
  
  .demo figure img {
  display:block;
  z-index:10;
  margin:0;
  backface-visibility:hidden;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s
  }
  
  .demo figure figcaption {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:90%;
  z-index:5;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  padding:20px 35px;
  background:#9cf;
  text-align:center;
  backface-visibility:hidden;
  -webkit-transform:rotateY(-180deg);
  -moz-transform:rotateY(-180deg);
  transform:rotateY(-180deg);
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  }
  
  .demo figure:hover img {
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  transform:rotateY(180deg);
  }
  
  .demo figure:hover figcaption {
  -webkit-transform:rotateY(0);
  -moz-transform:rotateY(0);
  transform:rotateY(0)
  }

/* PC DESKTOP */
@media (min-width:48em){
  body {
    margin:100px;
  }

  .header li{float:left}
  .header li a {padding:20px 30px}
  .header .menu{
    clear:none;
    float:right;
    max-height:  240px
  }
  .header .menu-icon{
    display:none
  }
  .header ul a{
    display: block;border-right: 1px solid red;padding: 20px;
    text-decoration: none;

  }
  #foot {
    position:relative; left:00px; top:0px;background-color: #9cf;
  } 
}