@charset "utf-8";

/*
   
   
   Visual Style Sheet 
   Author: Eric Rivera	
   Date:   12/25/2024
   
   Filename: visual1.css

html {
background-image: url(SCRAP_BG.jpg);
background-repeat: no-repeat;
background-size: cover;
} 


*/


/*Header*/


div#hotspot {
    position: absolute;
    top: 64%;
    left: 36%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 110px;
    background-color: rgba(255, 0, 0, 0.0); /* For debugging */
    border: 0px solid red; /* For debugging */
    pointer-events: none;
}

#gene {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    text-align: center;
}

#gene .hotspot {
    position: absolute;
    background: rgba(255, 0, 0, 0.1); /* Temporary visibility */
}

#gene .edwardo {
    top: 26%; /* Adjust based on Edwardo's placement */
    left: 50%;
    width: 11%;
    height: 8%;
}

/* Isaac Rivera Hotspot (Modify these values after testing) */
#gene .isaac 
{
    top: 26%; /* Adjusted placement for Isaac */
    left: 25.5%; /* Adjust horizontally */
    width: 11%;
    height: 6%;
}

nav#topLinks::after {
	clear: both;
	content: "";
	display: table;
}


/*           MainLinks    */

/*  --Clears space below Nav links--  */
nav#mainLinks::after 
{
   clear: both;	
   content: "";
   display: table;
}

/* Figure Box Styles */



figure#fig2 {

	position: relative;
	border-style: solid;
	border-width: 25px;
	border-image: url(tb_border.png) 50 repeat;
	margin: 20px auto 0px;
	width: 32%;
	left: 210px;
	
}



#fig2 img{
	
	
	width: 100%;
}

#fig2 figcaption {
	background-color: white;
	font-family: 'Palatino Linotype', Palatino, 'Times New Roman', serif;
	font-style: italic;
	padding: 10px 10px;
	text-align: center;
}

#fig3 {
	
	position: relative;
  	left: 160px;
	bottom: -110px;
	width: 23%;
	height: 23%;
	opacity: 0.4;
	
}

#fig3 img {
	height: 100%;
	width: 100%;	
}

#fig4 {
	
	position: relative;
  	right: 660px;
	bottom: 30px;
	width: 22%;
	height:	22%;
	opacity: 0.3;
}

#fig4 img {
	height: 100%;
	width: 100%;
}


/* HTML Styles */




/* Article Styles */

article::before 
{
   clear: both;	
   content: "";
   display: table;
}

article {
   clear: left;	
   width: 100%;/*  Has to be 100% to properly center the page. */
   margin: 0px 0px 0px 0px;
   padding: 10px 20px;
}

                                     /*Critical for correcting after Article*/
article::after 
{
   clear: both;	
   content: "";
   display: table;
}

/*



article header h1 {
	color: rgb(179, 179, 179);	Light Grey header. 
	font-family: Baskerville, "Palatino Linotype", Palatino, 
	             "Century Schoolbook", "Times New Roman", serif;
	font-size: 3em;
	text-align: center;
}



*/


article h1 {
	font-family: Baskerville, "Palatino Linotype", Palatino, 
	             "Century Schoolbook", "Times New Roman", serif;
	font-size: 2.5em;
	color: rgb(89, 89, 89);	/* Dark Grey "Mr. and Mrs Rivera"*/
	text-align: center;
	padding: 2px;	
}


article header h1 
{
	text-shadow: rgb(230, 230, 230) 2px 2px 1px,
				 rgba(77, 77, 77, 0.66) 5px 5px 25px;
}

article p {
	clear: both;
    margin-bottom: 20px;	
	text-align: center;
}


article 
{
	background-color: rgb(166, 166, 166);
	box-shadow: /*inset rgb(179, 179, 179) -10px -10px 25px, Near Clear 1st pick*/
			    inset rgb(71, 71, 71) -10px -10px 25px,
                inset rgb(71, 71, 71) 10px 10px 25px; /* Top Left */
}

div 
{
	display: flex;
	clear: both;
}

/* Page Body Styles */
body 
{
	border-left: 1px solid rgb(211, 211, 211);
	border-right: 1px solid rgb(211, 211, 211);
	box-shadow: rgb(211, 211, 211) 15px 0px 25px,/*  Right border outside white direction right*/
				rgb(211, 211, 211) -15px 0px 25px;/* Left border outside white direction left*/
}

section > form 
{
	display: block;
	width: 40.33%;
	position: center;
	
}
/* Aside Styles "Family Links"*/

aside 
{
	/*background: radial-gradient(white, rgb(211, 211, 211), rgb(179, 179, 179));*/
	background: radial-gradient(white, rgb(211, 211, 211), rgb(179, 179, 179));/*Family links cicular highlight*/


	border: 4px double rgb(77, 77, 77);
	
	border-radius: 30px;
	
	box-shadow: rgba(128, 128, 128, 0.6) 0px 0px 20px 10px;/*Black box shadow.*/
	
}


/* Footer Styles */

 #footer {

display: block;
background-image: url("R_2footer_2.png");
min-height: 240px;
background-position: 0px 0px ;
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.8;
}