html,body {font-family:sans-serif;}

h2 {margin-bottom:2rem; text-align:center;}


/* Family Container */
div#family {max-width:800px; margin:0 auto;}


/* Generation */
div#family div.level {padding:.75rem 0 1px; background-color:#0003; /*display:inline-block;*/}
div#family>div.level,								/* First Gen */
div#family>div.level>div.level {padding:1rem 0;}	/* Second Gen */
div#family div.level div.level {margin-left:6rem; /*margin-bottom:.5rem;*/ position:relative;}	/* Second Gen & beyond */


/* "L" Lines to Block */
div#family div.level div.level:before {content:''; position:absolute; top:0; left:0; box-sizing:border-box; width:calc(3rem - 6px); height:calc(1.25rem + 1px); height:46px;}
div#family div.level div.level:before {border-left:1px solid black; border-bottom:1px solid black;}
div#family>div.level>div.level:before {height:calc(1.125rem + 1rem); height:50px;}	/* Second Gen */


/* Vertical Connector Lines */
div#family div.level div.level::after {content:''; position:absolute; bottom:0; left:0; box-sizing:border-box; width:3rem; height:100%; border-left:1px solid black;}
div#family div.level div.level:last-child::after {border-left:0 none;}


/* Individual Blocks */
div#family div.level div.person {min-width:6rem; min-height:2.25rem; box-sizing:border-box; border:2px solid black; display:inline-block; margin-left:3rem;}
div#family div.level div.person {text-align:center; padding:.5rem; position:relative;}
div#family div.level div.person.m {border-color:dodgerblue;}
div#family div.level div.person.f {border-color:hotpink;}
div#family div.level div.person.spouse {margin-left:0;}
div#family div.level>div.person:first-of-type {margin-top:1rem;}


/* Block Arrow Head */
div#family div.level div.person:first-of-type:before {content:''; /*content:none;*/}
div#family>div.level>div.person:first-of-type:before {content:none;}
div#family div.level div.person:before {position:absolute; top:50%; left:-2px; height:0; width:0; transform:translate(-50%,-50%);}
div#family div.level div.person:before {border:3px solid transparent; border-left-color:black; border-width:3px 6px;}


/* Label */
div#family div.level div.person label {font-size:.75rem;}
div#family div.level div.person label:empty:before {content:'Person';}



/* Floater Box */

div#family div.level div.person {position:relative;}
div#family div.level div.person:hover {z-index:2}
div#family div.level div.person div.floater {box-shadow: 0px 0px 8px rgba(0,0,0,.25); border:1px solid #0001; display:none;}
div#family div.level div.person div.floater {background-color:#fffe; padding:.5rem 1rem; text-align:left; /*min-height:10rem;*/ width:16rem; box-sizing:border-box;}

div#family div.level div.person div.floater {position:absolute;}
div#family div.level div.person div.floater:before,
div#family div.level div.person div.floater::after {position:absolute; content:''; border:.75rem solid #00000001;}

/* Position: default */
div#family div.level div.person div.floater.def {left:20%; top:calc(100% + .75rem);}
div#family div.level div.person div.floater.def {animation:fade-in-up 0.15s ease-out;}
div#family div.level div.person div.floater.def:before {left:1.5rem; transform:translateX(-50%); bottom:calc(100% + 2px); border-bottom-color:#999;}
div#family div.level div.person div.floater.def::after {left:1.5rem; transform:translateX(-50%); bottom:100%; border-bottom-color:#fffe;}

/* Position: horizontally flipped */
div#family div.level div.person div.floater.flip-x {right:20%; top:calc(100% + .75rem);  left:auto; top:auto;}
div#family div.level div.person div.floater.flip-x {animation:fade-in-up 0.15s ease-out;}
div#family div.level div.person div.floater.flip-x:before {right:1.5rem; transform:translateX(50%); bottom:calc(100% + 2px); border-bottom-color:#999;}
div#family div.level div.person div.floater.flip-x::after {right:1.5rem; transform:translateX(50%); bottom:100%; border-bottom-color:#fffe;}
div#family div.level div.person div.floater.flip-x:before,
div#family div.level div.person div.floater.flip-x::after {left:auto; /*bottom:auto;*/}
/*div#family div.level div.person div.floater.flip-x:before {content:'flip-x';}*/

/* Position: vertically flipped */
div#family div.level div.person div.floater.flip-y {left:20%; bottom:calc(100% + .75rem);  left:auto; top:auto;}
div#family div.level div.person div.floater.flip-y {animation:fade-in-down 0.15s ease-out;}
div#family div.level div.person div.floater.flip-y:before {left:1.5rem; transform:translateX(-50%); top:calc(100% + 2px); border-top-color:#999;}
div#family div.level div.person div.floater.flip-y::after {left:1.5rem; transform:translateX(-50%); top:100%; border-top-color:#fffe;}
div#family div.level div.person div.floater.flip-y:before,
div#family div.level div.person div.floater.flip-y::after {/*left:auto;*/ bottom:auto;}
/*div#family div.level div.person div.floater.flip-y:before {content:'flip-y';}*/

/* Position: horizontally flipped and vertically flipped */
div#family div.level div.person div.floater.flip-x-y {right:20%; bottom:calc(100% + .75rem);  left:auto; top:auto;}
div#family div.level div.person div.floater.flip-x-y {animation:fade-in-down 0.15s ease-out;}
div#family div.level div.person div.floater.flip-x-y:before {right:1.5rem; transform:translateX(50%); top:calc(100% + 2px); border-top-color:#999;}
div#family div.level div.person div.floater.flip-x-y::after {right:1.5rem; transform:translateX(50%); top:100%; border-top-color:#fffe;}
div#family div.level div.person div.floater.flip-x-y:before,
div#family div.level div.person div.floater.flip-x-y::after {left:auto; bottom:auto;}
/*div#family div.level div.person div.floater.flip-x-y:before {content:'flip-x-y';}*/

div#family div.level div.person div.floater p {font-size:.75rem;}


@keyframes fade-in-down {
	from 	{opacity:0; transform:translateY(-2rem);}
	to 		{opacity:1; transform:translateY(0);}
}
@keyframes fade-in-up {
	from 	{opacity:0; transform:translateY(2rem);}
	to 		{opacity:1; transform:translateY(0);}
}





/* Size Specific Styling */
/*  mobile(sm), tablet(md), laptop(lg), desktop(xl)  */
@media screen and (min-width:576px) {
	div#family div.level div.person div.floater:hover,
	div#family div.level div.person:hover div.floater {display:block;}
}
/*  mobile(xs)  */
@media screen and (max-width:575px) {
	div#family div.level:before {width:calc(2rem - 6px);}
	div#family div.level::after {width:2rem;}
	div#family div.level div.person {min-width:4rem; margin-left:2rem;}
	div#family div.level div.person label {font-size:.6rem;}
	
}