:root {
--colori--arancio1: rgb(255,130,0);
--colori--azzurro1: #69b3e7; /* PMS 292 */
--colori--verde1: rgb(0,140,69);
--colori--verde2: rgb(30,181,58);
--colori--verde3: rgb(0,148,96);
--colori--verde4: rgb(0,154,68);
--colori--verde5: rgb(0,158,96); /* PMS 355 */
--colori--verde6: rgb(0,122,94); 
--colori--verde7: rgb(0,151,57); /* PMS 355 */
--colori--verde8: #43b02a; /* PMS 361 */
--colori--verde9: rgb(4,106,56); /* PMS 349C #046a38 */
--colori--bianco1: rgb(244,249,255);
--colori--blu1: rgb(33,70,139);
--colori--blu2: rgb(0,38,84);
--colori--blu3: rgb(0,114,198);
--colori--blu4: rgb(70,100,178); /* PMS 293 */
--colori--blu5: rgb(17,69,126); /* PMS 287, RAL 5010 */
--colori--blu6: rgb(0,169,206); /* PMS 3145 */
--colori--blu7: rgb(0,169,206); /* PMS 3145 */
--colori--blu8: rgb(0,75,135); /* PMS 301C */
--colori--blu9: rgb(0,32,91); /* PMS 281C, #00205B */
--colori--blu10: rgb(0,48,135); /* PMS 287C, #003087 */
--colori--blu11: rgb(0,47,108); /* PMS 294C, #002F6C */
--colori--blu12: rgb(0,45,114); /* PMS 288C, 002d72 */
--colori--giallo1: rgb(255,233,54);
--colori--giallo2: rgb(255,205,0); /* PMS 116C */
--colori--giallo3: rgb(252,209,22); /* PMS 109 */
--colori--giallo4: rgb(255,199,44); /* PMS 123 */
--colori--giallo5: rgb(255,184,28); /* PMS 1235C, #ffb81c */
--colori--rosso1: rgb(205,33,42);
--colori--rosso2: rgb(255,15,33);
--colori--rosso3: rgb(174,28,40);
--colori--rosso4: rgb(221,0,0);
--colori--rosso5: rgb(237,41,57);
--colori--rosso6: rgb(206,17,38); /* PMS 032, RAL 3028 */
--colori--rosso7: rgb(215,20,26); /* PMS 192, RAL 3028 */
--colori--rosso8: rgb(218,18,26); /* PMS 186, RAL 3028 */
--colori--rosso9: rgb(239,51,64); /* PMS 032 */
--colori--rosso10: rgb(220,20,60); /* PMS 1795 */
--colori--rosso11: rgb(241,80,96); /* PMS 185U, #f15060 */
--colori--rosso12: rgb(186,12,47); /* PMS 200C, #BA0C2F */
--colori--rosso13: rgb(213,0,50); /* PMS 199C, #D50032 */
--colori--rosso14: rgb(218,41,28); /* PMS 485C, #da291c */
--star-scale: 1;
}

/* PROPORZIONI - nel nome mettere le proporzioni della bandiera, nella proprietà vanno invece invertite */
.aspect-2-3 {aspect-ratio: 3 / 2}
.aspect-13-15 {aspect-ratio: 15 / 13}
.aspect-3-5 {aspect-ratio: 5 / 3}
.aspect-1-2 {aspect-ratio: 2 / 1}
.aspect-3-4 {aspect-ratio: 4 / 3}
.aspect-5-8 {aspect-ratio: 8 / 5}
.aspect-28-37 {aspect-ratio: 37 / 28}
.aspect-8-11 {aspect-ratio: 11 / 8}
.aspect-18-25 {aspect-ratio: 11 / 8}
.aspect-11-19 {aspect-ratio: 19 / 11}

@supports not (aspect-ratio: 3 / 2) {
	.aspect-2-3 {padding-bottom:66.666%;}
}



html, body {
	margin:0;
}

.site-container {
	background-color: #e9e9e9;
}

.site-header {
	background-color:white;
}

.site-header h1 {
	margin:0;
	padding:1rem;
}

.site-inner {
	max-width:1200px;
	margin:0 auto;
	padding:2rem 4%;
}

@media (max-width:900px) {
	.cssflag {
		--flag-height: 20vh;
		margin: 20vw auto;
	}
}
@media (min-width:901px) {
	.cssflag {
		--flag-height: 60vh;
		margin: calc((100vh - var(--flag-height)) / 2) auto;
	}
}


.cssflag {
	background-color:white;
	height:var(--flag-height);
	width: auto;
	display: flex;
	flex-wrap: nowrap;
	position:relative;
}

.cssflag::before, 
.cssflag::after {
	content: "";
	display:block;
}


/* Tre bande */
.cssflag.bande-3.verticale::before, 
.cssflag.bande-3.verticale::after {
	width:33.33%;
	height:100%;
}
.cssflag.bande-3.orizzontale::before, 
.cssflag.bande-3.orizzontale::after {
	height:33.33%;
	width:100%;
}
.cssflag.bande-3.verticale::before {margin-right:33.33%;}
.cssflag.bande-3.orizzontale::after {
	position:absolute;
	bottom:0;
}

/* Due bande */
.cssflag.bande-2.orizzontale::before {
	height:50%;
	width:100%;
}

/* ELEMENTI */

.elem {z-index:2;}
.elem .elem, .elem + .elem {z-index:4;}
.elem + .elem + .elem {z-index:6;}
.elem::after {
	content: "";
	display:block;
}
.elem.half {
	width:50%;
	height:100%;
	position:absolute;
	display:flex;
}
.elem.third {
	width:33.33%;
	height:100%;
	position:absolute;
	display:flex;
}
.elem.third.center {left:33.33%}
.elem.quarter {
	width:25%;
	height:100%;
	position:absolute;
}
.orizzontale .elem.fifth {
	height:20%;
	width:100%;
	position:absolute;
	top:40%;
}

.elem.centered-content {
	flex-direction: column;
	justify-content: center;
}

.elem.half.left.triang_iso::after {
	width: auto;
	border-top: calc(var(--flag-height) / 2) solid transparent;
	border-left: calc((var(--flag-height) * 3) / 4) solid var(--elem-color);
	border-bottom: calc(var(--flag-height) / 2) solid transparent;
}
.elem.half.left.triang_equi::after {
	width: auto;
	border-top: calc(var(--flag-height) / 2) solid transparent;
	border-left: calc((var(--flag-height) * 1.732) / 2) solid var(--elem-color);
	border-bottom: calc(var(--flag-height) / 2) solid transparent;
}

@media (max-width:900px) {
	.elem .star {font-size: 3.333px;}
}
@media (min-width:901px) {
	.elem .star {font-size: 10px;}
}
.elem .star { /* use var --star-scale to scale star, not font-size */
	margin: 5em auto;
	position: relative;
	display: block;
/* 	color: in flags.css; */
	width: 0px;
	height: 0px;
	border-right: 10em solid transparent;
	border-bottom: 7em solid var(--elem-color); /* border-bottom-color: in flags.css; */
	border-left: 10em solid transparent;
	transform: rotate(35deg) translate(calc(var(--star-scale) * 0.45em), calc(var(--star-scale) * 0.1em)) scale(var(--star-scale));
	}
.elem .star::before {
	border-bottom: 8em solid var(--elem-color); /* border-bottom-color: in flags.css; */
	border-left: 3em solid transparent;
	border-right: 3em solid transparent;
	position: absolute;
	height: 0;
	width: 0;
	top: -4.5em;
	left: -6.5em;
	display: block;
	content: '';
	transform: rotate(-35deg);
	}
.elem .star:after {
	position: absolute;
	display: block;
/* 	color: in flags.css */
	top: 0.3em;
	left: -10.5em;
	width: 0px;
	height: 0px;
	border-right: 10em solid transparent;
	border-bottom: 7em solid var(--elem-color); /* border-bottom-color: in flags.css; */
	border-left: 10em solid transparent;
	transform: rotate(-70deg);
	content: '';
}

.elem.circle {
	border-radius:80em;
	aspect-ratio: 1/1;
}

.elem.cross { /* bandiere della scandinavia */
	background-color: var(--elem-color);
	height: 100%;
/* 	width e margin-left in flags.css */
}
.elem.cross:after {
	background-color: var(--elem-color);
	position: absolute;
	width: 100%;
	left:0;
/* 	height e top in flags.css */
}

.elem.moon { /* https://www.geeksforgeeks.org/how-to-draw-a-half-moon-using-html-and-css/ */
/* 	position: absolute; 
	top: 50%; 
	left: 50%;  */
	transform: translate(-50%, 0); 
	height: 100px; 
	width: 100px; 
	box-shadow: -15px 0px 0px 10px white ; 
	border-radius: 50%; 
}