@import url(https://fonts.googleapis.com/css?family=Titillium+Web:200,300,600);

:root {
  --max-content-width: 1080px;
  --cassiopeia-font-family-headings: "Titillium Web";
  --body-font-family: "Titillium Web";  
  --body-color: #444;;
  --body-font-weight: 500;
  --body-font-size:14pt;
  --body-bg: transparent;
  --body-header-bg: white;
  --cassiopeia-font-weight-headings: 300;
  --cassiopeia-color-primary: #888;
  --cassiopeia-color-hover: blue;
  --cassiopeia-color-link: #5469d4;
/*--body-line-height:1rem;*/
}
/* Dark theme: 1. Variables */
@media (prefers-color-scheme: dark) {
  :root {
  --body-color: #bbb;
  --body-bg: #232323;
  --body-header-bg: var(--body-bg);
  --cassiopeia-color-primary: #888;
  --cassiopeia-color-hover: #5090b0;;
  --cassiopeia-color-link: #c48924;

  }
}

.btn-warning {
  --cassiopeia-color-link: #fcfc50;

}
body {
}

body::after {
	display:block;
	border-radius:100rem;
	width:28rem;
z-index:-1;
content:" ";
height:30rem;
background-color:rgba(24,128,238,0.2);;
position:absolute;
top:0;
right:-100px;
transform:rotate(3deg);
}

.container-header {
	transition:1s ease-in-out background-color;
	background-color:transparent;
	background-image:none;
}
.container-header a {
	color:var(--body-color) !important;
}
.scrolled-down .container-header {
	background-color:var(--body-header-bg);
}
h1 {
	font-size:2.8rem;
}
h2 {
	font-size:2.3rem;
}

.my-banner {
		height: 864px;
      	color: #FFFFFF;
      	text-align: center;
      	font-weight: bold;
      	text-shadow: 2px 2px 4px #000000;
      	display: flex;
  		justify-content: center;
      	align-items: center;
        flex-wrap: wrap;
      	padding: 10% 10%;
}
.grid-child,
.site-grid > [class*=" container-"], .site-grid > [class^="container-"] {
  max-width:var(--max-content-width);
}

.btn-info {
box-shadow: 0 10px 25px 0 rgba(124,104,238,.5) !important;

}

.box {
	padding: 3rem;
	border-radius:3rem;
	background-color:rgba(124,124,134,.2);
	margin-bottom:2rem;
}

.box-blue {
background-color:rgba(124,104,238,.2);
}

.box-green  {
    background-color:rgba(124,238, 104,.2);

}

.box-red {
    background-color:rgba(238,104,104,.2);

}

/* la freccetta giù a fianco del menù */
.metismenu.mod-menu .mm-toggler::after {
	color:var(--body-color);
}

/* Dark theme: 2. Rules */
@media (prefers-color-scheme: dark) {

}