/* HACKS */

	/* no scroll on popup */

	html:has( .menu-toggle[data-state="on"] input[name="toggle-button"]:checked ),
	body:has( .menu-toggle[data-state="on"] input[name="toggle-button"]:checked ) {
		overflow:hidden;
		touch-action:none;
	}
	section .mirror {
		outline: 1px dotted orange;
		outline: none;
	}
	
	/* responsives */

	html[data-loc="development"]:before {
		content:" ";
		display: block;
		position: fixed;
		left: 0;
		bottom: 0;
		Xtop:0;
		width: auto;
		background-color: #FFFFFFAA;
		box-shadow: 0 0 15px 0 #00000055;
		z-index: 9999999;
		font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
		font-size: 10px;
		line-height: 12px;
		color: black;
		padding: 5px 15px 5px 15px;
		border-left: 20px solid black;
	}

	/* XXXXL   */ @media screen and (min-width:1600px)                          { html[data-loc="development"]:before { content:" XXXXL 1600px-   D";     border-left-color:#F8FF20; } }
	/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) { html[data-loc="development"]:before { content:" XXXL  1440-1599 D"; border-left-color:#00FF1B; } }
	/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) { html[data-loc="development"]:before { content:" XXL   1240-1439 D"; border-left-color:#0085AA; } }
	/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) { html[data-loc="development"]:before { content:" XL    1040-1139 D"; border-left-color:#02CEB5; } }
	/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) { html[data-loc="development"]:before { content:" L      960-1039 D"; border-left-color:#0ED773; } }
	/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) { html[data-loc="development"]:before { content:" M      860- 959 T";  border-left-color:#44D70E; } }
	/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) { html[data-loc="development"]:before { content:" MS     700- 859 T";  border-left-color:#A0D70E; } }
	/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) { html[data-loc="development"]:before { content:" S      580- 699 T";  border-left-color:#D7CC0E; } }
	/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) { html[data-loc="development"]:before { content:" XS     520- 579 T";  border-left-color:#D7A60E; } }
	/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) { html[data-loc="development"]:before { content:" XXS    440- 519 M";  border-left-color:#BDD70E; } }
	/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) { html[data-loc="development"]:before { content:" XXXS   330- 439 M";  border-left-color:#B1570B; } }
	/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) { html[data-loc="development"]:before { content:" XXXXS    0- 329 M";  border-left-color:#B10B6D; } }

	/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439.8px) { html[data-loc="development"]:before { content:" XXL   1240-1439 (XXL4 1400-1439) D"; border-left-color:#2CD0FF; } }
	/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399.8px) { html[data-loc="development"]:before { content:" XXL   1240-1439 (XXL3 1340-1399) D"; border-left-color:#A34FFF; } }
	/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339.8px) { html[data-loc="development"]:before { content:" XXL   1240-1439 (XXL2 1300-1339) D"; border-left-color:#FF1594; } }
	/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299.8px) { html[data-loc="development"]:before { content:" XXL   1240-1439 (XXL1 1240-1299) D"; border-left-color:#00E47C; } }
	/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239.8px) { html[data-loc="development"]:before { content:" XL    1040-1239 (XL4  1200-1239) D"; border-left-color:#19FDE1; } }
	/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199.8px) { html[data-loc="development"]:before { content:" XL    1040-1239 (XL3  1140-1199) D"; border-left-color:#0BB8FF; } }
	/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139.8px) { html[data-loc="development"]:before { content:" XL    1040-1239 (XL2  1100-1139) D"; border-left-color:#006CFF; } }
	/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099.8px) { html[data-loc="development"]:before { content:" XL    1040-1239 (XL1  1040-1099) D"; border-left-color:#3500FF; } }
	/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959.8px) { html[data-loc="development"]:before { content:" M      860-959  (M2    900- 959) T"; border-left-color:#0EC2D7; } }
	/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899.8px) { html[data-loc="development"]:before { content:" M      860-959  (M1    860- 899) T"; border-left-color:#0ED7A5; } }
	/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439.8px) { html[data-loc="development"]:before { content:" XXXS   330- 439 (XXXS2 400- 439) M"; border-left-color:#E77616; } }
	/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399.8px) { html[data-loc="development"]:before { content:" XXXS   330- 439 (XXXS1 330- 399) M"; border-left-color:#F2C512; } }


	/*   DESKTOP    */ @media screen and (min-width: 960px) { }
	/*   TABLET     */ @media screen and (min-width: 520px) and (max-width: 959.8px) { }
	/*   MOBILE     */ @media screen and (min-width:   0px) and (max-width: 519.8px) { }



header .head .mirror {
	outline: 1px dashed orange;
	outline: none;
}