/**
 *
 * @package aiteru.co
 * @version v1.0, home.css
 * @copyright (c) 2026 Aiteru, 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. */

:root {
    --grey-lighter:#DDD;
    --grey-light:#BBB;
    --grey-medium:#777;
    --grey-dark:#222;
}

html, body { width:100%; height:100%; overflow:hidden; }
body { font-family:Roboto,Arial,sans-serif; font-size:12px; background-color:#FFF; margin:0; padding:0; display:table; }



/* STRUCTURE:	the consistent page items' size,positions,etc. ordered by their
 		appearance in the page source / structure.  */

main { width:100%; height:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; }
main div { background:transparent url('/images/aiteru-mark-wordmark.svg') center / auto 100%  no-repeat; width:400px; height:400px; position:relative; }
main div p { font-size:1.5rem; color:var(--grey-light); width:100%; text-align:center; position:absolute; bottom:-8rem; left:0; }

footer { font-size:1em; width:100%; position:fixed; bottom:0; left:0; }
footer figure { margin:0 0 1rem 1rem; display:flex; column-gap:0.3rem; align-items:center; justify-content:left; }
footer figure img { width:1rem; flex:1 0 4%; opacity:.1; }
footer figure figcaption { color:var(--grey-lighter); padding:0; flex:1 1 96%; }
footer:hover figure img { opacity:1; }
footer:hover figcaption { color:var(--grey-medium); }

@media (orientation:portrait){

    main div { margin-bottom:5rem; }

	footer { font-size:1.8em; }
    footer figure { flex-direction:row-reverse; }

}


/* 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. */