/*
colore scuro: #393739
colore chiaro: #EDEDEE
arancio: #F15B22 
var(--primary-color-scuro);
var(--secondary-color-chiaro);
var(--accent-color-arancio);
var(--success-color);
*/

:root {
    --primary-color-scuro: #393739;
    --secondary-color-chiaro: #EDEDEE;
    --accent-color-arancio: #F15B22;

    --text-color: #333;
    --background-color: #F15B22;
    --card-background: #fff;
    --lightning-color: #f39c12;
    --success-color: #2ecc71;
    --comment-bg: #f1f1f1;
}


@font-face {
font-family: jcFont;
src: url(https://www.metalab.it/dev/font/Jc-web-01.woff);
}

a {
    color: var(--accent-color-arancio);
  }

body {
/* font-family: 'Roboto', sans-serif; */
/* font-weight: 300; */
font-family: 'jcfont';
background: var(--primary-color-scuro);
color: #EDEDEE ;
font-size: 12pt;
letter-spacing: 1px;
}
.lite-mode {
background-color: #EDEDEE;
color: #393739;
}
.switch {
background-color: #F15B22;
border: none;
padding: 30px;
margin-top: 15px;
border-radius: 50%;
float: right;
}
#logo {
font-style: normal;
text-align: left ;
font-size: 72pt;
letter-spacing: 5px;
}
#hrlogo {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
#logo_sub {
font-style: normal;
text-align: left ;
font-size: 18pt;
}


#menu {
  /* border: 1px solid var(--success-color); */
  border-radius: 5px;
  padding: 0px;
  /* margin: 10px; */
  text-align: left;
  float: right;
  margin-top: -40px;
  }




h1 {
font-style: normal;
text-align: left ;
font-size: 22pt;
}
h2 {
font-style: normal;
text-align: left ;
font-size: 18pt;
}
img {
max-width: 100% ;
border-radius: 30px;
margin-bottom: 40px;
}
hr {
margin-top: -16px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
.hrlist {
margin-top: -16px;
margin-bottom: 17px;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
#container {
max-width: 1280px ;
/* border: 1px solid var(--success-color); */
border-radius: 5px;
padding: 10px;
/* margin: 10px; */
text-align: center;
margin: auto;
}

#header {
/* border: 1px solid var(--success-color); */
border-radius: 5px;
padding: 40px;
padding-top: 0px;
/*  margin: 10px; */
text-align: left;
}

.content {
 /* border: 1px solid var(--success-color); */
border-radius: 5px;
padding: 40px;
/* margin: 10px; */
text-align: justify;
}
.list {
/* border: 1px solid var(--success-color); */
border-radius: 5px;
padding: 10px;
margin: 10px;
text-align: left;
}

#footer {
 /* border: 1px solid var(--success-color); */
border-radius: 5px;
padding: 40px;
/* margin: 10px; */
text-align: left ;
clear: both ;
}
#hrfooter {
margin-top: -16px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
#footer-right{
float: right;
margin-top: -20px;
}



/* --------------------------------------------- */
/* Responsive layout - when the screen is less than 600px wide, */
@media (max-width: 600px) {
#logo {
font-style: normal;
text-align: left ;
font-size: 40pt;
/* font-weight: bold; */
}
#logo_sub {
font-style: normal;
text-align: left ;
font-size: 14pt;
}
.switch {
background-color: #F15B22;
border: none;
padding: 20px;
margin-top: 5px;
border-radius: 50%;
float: right;
}
#footer-right{
float: left;
padding-top: 17px;
}
}
/* --------------------------------------------- */
/* Responsive layout - when the screen is less than 420px wide, */
@media (max-width: 420px) {
#logo {
font-style: normal;
text-align: left ;
font-size: 40pt;
/* font-weight: bold; */
}
#logo_sub {
font-style: normal;
text-align: left ;
font-size: 14pt;
}
.switch {
background-color: #F15B22;
border: none;
padding: 20px;
margin-top: 5px;
border-radius: 50%;
float: right;
}
#footer-right{
float: left;
padding-top: 17px;
}
}