/*  Gallery 1 for family pictures */

*   {
        box-sizing: border-box;
}

body {
        background: lightgoldenrodyellow;
        margin: 0;
}

#toparea		{
	position: relative;
	}

#topleftLogo		{
		float: left;
		width: 250px;
		margin: 1%;
	}

	#topleftLogo img		{
		width: 225px;
	}

#toprightLogo	{
		position: absolute;
		float: right;
		top: 0;
		right: 1%;  
		margin-left: 200px
/*		width:200px;       */
	}

#social-media	{
		width: 96%;		
/*		margin: Auto;		*/
		border: 0px solid lightblue;
/* 		background-color: blue;    */
		position: relative;
	}

#social-media li	{
		list-style-type: none;
		float: left;
/*		overflow: hidden;     */
	}

#social-media p	{
/*		color:#bbb;   */
		color: navy;	
		margin-bottom: 3px;
		margin-left: 15px;
	}

#ul-social-media a	{
		display: block;
		margin: 1px;
		padding: 4px;
		text-decoration: none;
	}

#travel-gif 		{
		width: 80%;
		margin-left: 15%;
	}

#travel-gif img		{
		display: block;
		width: 90%;
		margin-top: 1%;
		margin-left: 5%;
		margin-right: 5%;
		text-decoration: none;
}

/* ===================================================== */
/* Rules for Navigation Menu */

#topnav	{
		clear:both;
		margin: 0 5px;
		border-top:2px solid rgb(16, 16, 152);
	}
	
	ul#navmenu, ul.sub1, ul.sub2	
			{
			list-style-type:none;
			font-size:12px;
			font-weight: bold;
	}

		ul#navmenu li
			{
			width: 100px;
			text-align: center;
			position: relative;
			float: left;
			margin-right: 0 5px 5px 5px;
	}

		ul#navmenu a  
			{
			text-decoration: none;
			display: block;
			width: 100;
			height: 25px;
			line-height: 25px;
			background-color:yellow;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			margin: 0 5px 10px 0px;
	}

		ul#navmenu .sub1 li  
			{
			background-color: #444;
			border-top-right-radius: 5px;
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
	}

		ul#navmenu .sub2 li  
			{
			width: 150px;
			background-color: #3FC;
			border-top-right-radius: 5px;
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
	}

		ul#navmenu .sub1 a
			{
			margin: 0 3px 3px 3px;  padding: 0 3px 3px 3px;
			border-radius: 5px;
	}

		ul#navmenu .sub2 a  
			{
			margin-left: 3px;
			border-radius: 5px;
	}

		ul#navmenu li:hover > a
			{
			background-color: #cfc;
	}

		ul#navmenu li:hover > a:hover
			{
			background-color: #ff0;
	}

		ul#navmenu ul.sub1
			{
			display: none;
			position: absolute;
			top: 6;
			left: 0;
			z-index: 999;
	}

		ul#navmenu ul.sub2 
			{
			display: none;
			position: absolute;
			margin-left: 100px;
			top: 0;
	}

		ul#navmenu li:hover .sub1 
			{
			display: block;
	}

		ul#navmenu .sub1 li:hover .sub2
			{
			display: block;
	}

		.darrow  {
			font-size: 10px;
			position: absolute;
			top: 7px;
			right: 6px;
	}

		.rarrow  {
				font-size: 11px;
				position: absolute;
				top: 7px;
				right: 6px;
	}

	/* End of Rules for Navigation Menu */
	/* ===================================================== */

    /* Now I want the next section to be below the menu area, Not beside it. */

.clear-it	{
	clear: both;
}

.undernav	{
	clear: both;
	margin-left: 5%;

}

main {
    clear: both;
    position: relative;
    left: 1px;
    display: block;
}

main img {
        box-shadow: -1px 0px 0px rgba(0,0,0,0.06);
        width: 300px;
}

    ul#gallery-x {
        display: grid;
        gap: 2px;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		grid-auto-flow: row dense;
		grid-auto-flow: dense;
/*		grid-auto-flow: column dense;
		grid-template-columns: repeat(auto-fit, 1fr));
        grid-auto-rows: 300px;  
        grid-auto-flow: row dense; 
   		text-decoration: none;   */
       	list-style-type: none;   
    }