* {
    box-sizing:border-box;
}

/*html, body {
   background-color: #000000 !important;  Forces all background/margin space to be solid black 
}*/

html { 
	height: 100%; 
	min-height: 100%;
	display: flex;             /* Activates modern layout grouping */
    justify-content: center;   /* Perfectly centers your table horizontally */
    align-items: center;       /* Perfectly centers your table vertically */
	}

img	{
	display:inline-block;
	}


div{	
	display: block;
	}
	
table {	
	border-collapse:separate;
    border-spacing: 0;
	display:table;
	
	}
	
html, table, p, tr, th, td, tbody, img {	
	
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 0.1%;
    
    background: transparent;
	
}

/* Prevents old alignment tags from fighting the flexbox centering engine */
#id_photobox-table, table {
    margin: 0 auto !important;
	position: relative;
    z-index: 1000; /* Forces your main content table to always slide on top of the black frames */
}
	
	
body {
	
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	height:100%;
	width: 100%;
	min-height: 100%;
    max-height: 100%; 
	background-image: url(' Foto/hriso1_column.jpg');
	background-repeat:repeat-x;
	background-size: contain; 
	background-attachment: fixed; 
	display: flex;             /* Activates modern layout grouping */
    justify-content: center;   /* Perfectly centers your table horizontally */
    align-items: center;       /* Perfectly centers your table vertically */
	}	

	
	/* 2. This creates the TOP Black Frame on mobile portrait screens */
#id_screenbox_table::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%;
    /*height: calc((100vh - 100vw / 1.25) / 2);  Calculates exact top empty space */
    height: var(--mask-height, 0px); /* <-- CHANGED: Reads height from JavaScript */
	background:rgba(0, 0, 0, 0.65);                       /* background: #000000;  Solid black block (or use rgba(0,0,0,0.85) for an overlay) */
    z-index: 2000;                              /* Sits on top of the wallpaper, but underneath the main table */
    display: none;                             /* Hidden by default on laptops */
}

/* 3. This creates the BOTTOM Black Frame on mobile portrait screens */
#id_screenbox_table::after {
    content: "";
    position: fixed;
    bottom: 0; left: 0; width: 100%;
    /*height: calc((100vh - 100vw / 1.25) / 2);  Calculates exact bottom empty space */
    height: var(--mask-height, 0px); /* <-- CHANGED: Reads height from JavaScript */
	background:rgba(0, 0, 0, 0.65);                      /* rgba(0, 0, 0, 0.85); background: #000000; Solid black block */
    z-index: 2000;
    display: none;                             /* Hidden by default on laptops */
}

/* 4. This activates the black frames ONLY when the mobile screen is in portrait mode */

@media screen and (max-aspect-ratio: 5/4) {/*( (window.innerWidth)/(window.innerHeight)<1.25 ) {*/
    #id_screenbox_table::before, #id_screenbox_table::after {
        display: block !important; /* Turns on the black frames to cover the top and bottom wallpaper */
    }
}