/**
 *
 * @package advsociety.com
 * @version v0.1, index.css - "Prasand J."
 * @copyright (c) 2023 ADV Society, LLC
 * @license Non-distributable / Proprietary
 *
 */

 @charset 'utf-8';

 /* PREMATURE: an alphabetical list of items/tags defined before the structure.
  No classes nor IDs belong in this region, just tag definitions. */
 
 html, body { width:100%; height:100%; overflow:hidden; }
 body { font-family:Roboto,arial,sans-serif; font-size:11px; background-color:white; margin:0; display:table; }
 body > main { width:100%; height:100%; overflow:hidden; text-align:center; vertical-align:middle; display:table-cell; }
 body > main div { width:40vw; height:calc(40vw * 0.5625); display:inline-block; position:relative; }
 body > main div object { width:100%; height:100%; position:relative; z-index:-1; opacity:1; }
 body > main div video { background-color:#CCC; width:calc(100% - 4px); height:calc(100% - 4px); position:absolute; top:2px; left:2px; z-index:-2; }
 footer { width:100%; position:fixed; bottom:0; left:0; }
 footer p { color:rgba(61,61,61,0.6); padding:10px; margin:0; text-align:center; }
 
 @media (orientation:portrait){
	 body > div div { width:75vw; height:calc(75vw * 0.5625); }
	 footer { font-size:1.7em; }
 }
 
 
 
 
 /* STRUCTURE: the consistent page items' size,positions,etc. ordered by their
  appearance in the page source / structure.  */
 
 
 
 
 /* DIFFERENCES: the minor differences between pages, ordered by page structure.
  Items should be prefixed with their relative ID or class. */
 
 
 
 
 /* STYLIZATION: additional styles which do not affect the overall page's structure
  and / or style. Should be in alphabetical order. */
 
 .hover object { opacity:0; z-index:-1; transition:z-index 3s step-end, opacity 3s linear; }