body {

    background-color:rgb(46, 32, 32);

    background-image: linear-gradient(180deg, rgb(118, 14, 14), rgb(66, 0, 0)); ;

    font-family:Arial, Helvetica, sans-serif;

    color:white;

    font-size:11pt;

    display:flex;

    margin:0 0 0 0;

    flex-direction: column;

}



a:link {

    color:white;

}



::-webkit-scrollbar {

    width: 10px;

}



::-webkit-scrollbar-track {

    background: #663f3f;

}



::-webkit-scrollbar-thumb {

    background: #888;

}



::-webkit-scrollbar-thumb:hover {

    background: #555;

  }



div.paragraph {

    border: solid #c0c0c0 2px;

    border-radius: 18px;

    margin:2%;

    padding: 20px 20px;

    background-color: #e5e5f7;

    background-image: radial-gradient(#8e6d6d 0.6px, #a03f3f 0.6px);

    background-size: 12px 12px;

    display: block;

}



div.container {

    display:flex;

}



h1 {

    padding-left:20px;

    font-size:500%;

    margin:0 0 0 10vh;

    padding:10px;

    text-shadow: 1px 1px 2px #663f3f;

    -webkit-transform:scale(1.2,1); /* Safari and Chrome */

    -moz-transform:scale(1.2,1); /* Firefox */

    -ms-transform:scale(1.2,1); /* IE 9 */

    -o-transform:scale(1.2,1); /* Opera */

    transform:scale(1.2,1); /* W3C */

}



h1 span{

    font-size:25%;

}



h2 {

    margin:20px;

    font-size:28pt;

    text-shadow: 1px 1px 2px rgb(41, 41, 41);

}



h3:first-child {

    margin-top:10px;

}



h3 {

    margin-top:60px;

    font-size:20pt;

    text-shadow: 1px 1px 2px rgb(41, 41, 41);

}



table {

  border: 2px solid rgb(181, 181, 181);

  border-radius:8px;

  border-collapse:separate;

  color: black;

  padding:2px;

  margin:6px 0px;

  width:50%;

}



td {

  border: 1px solid rgb(160 160 160);

  background-color:rgb(231, 231, 231);

  color:rgb(166, 166, 166);

}



td.sera {

    background-color: rgb(54, 107, 221);

    color:white;

}



td.mattino {

    background-color: rgb(246, 115, 15);

    color:rgb(255, 255, 255);   

}



thead {

    background-color:cadetblue;

}





div.hero {

    max-height:200px;

    border-radius: 0 0 0 200px;

    border-left: solid #c0c0c0 2px;

    border-bottom: solid #c0c0c0 2px;

    background-image: url(../images/placeholder2.jpg);

    background-position:center;

    display:flex;

    flex-direction:row;

    justify-content: space-between;

}



div.hero img{

 width:20%;

 float:right;

 margin:10px 10px 10px 10px;

}



div.menu {

    display:flex;

    flex-direction: row;

    flex-wrap: wrap;

    padding: 0px 5px 0px 5px;

    justify-content:space-around;

    background-image: linear-gradient(180deg, rgb(225, 62, 62),rgb(139, 0, 0),rgb(37, 0, 0), rgb(62, 90, 58));

    border-bottom:solid 1px rgb(67, 67, 67);

}



div.menu a{

    padding:5px 0px 5px 0px;

    color:rgb(243, 228, 228);

    font-size:14px;

    text-decoration:none;

    letter-spacing: 0.05rem;

    text-shadow: 0px 1px 1px #875353;



}





div.menu span{

    margin:0 0 0 0;

    font-size:15pt;

    opacity:50%;

    user-select: none;

}



footer {

    background-color: rgb(46, 32, 32);

    background-position:center;

    text-align:center;

    font-size:9pt;

    padding:10px;

    position:static;

    margin:0 0 0 0;

    border-top: solid #888 2px;

    width:inherit;

}



footer img{

    width:30px;

    padding:10px;

}



footer span{

    user-select:none;

}