/* ---------------------------------------------
				Body TEXT Attributes 
--------------------------------------------- */

body { font-size: 1em; text-indent: 2em; } /* if user uses zoom feature of the browser to change the text size to 18 pixels, the indent would change to 36 pixels to reflect the larger type size: */
body { background-color: #87ceeb;}
h1  {font-family: 'Playfair Display SC', serif; font-style: italic; font-size: 30px;}
h2  {font-family: 'Playfair Display SC', serif; font-style: italic; font-size: 20px;}
p {font-family: 'Merriweather Sans', sans-serif; font-size: 18px;}



body { Overflow-x:scroll;}   /* //add horizontal bar option in html */
body {Overflow-y:scroll;} /* //add vertical bar option in html */

/* ---------------------------------------------------------------------------------------------------------------------
															LOGO
--------------------------------------------------------------------------------------------------------------------- */

.firstchild { top: 0;left: 0;}
.childClass {position: absolute; opacity: 0.6; height: 20px; width: 200px; }


/* ---------------------------------------------------------------------------------------------------------------------
															Top navigation bar
--------------------------------------------------------------------------------------------------------------------- */

#homemenu  {
					/* Top blue box */
	background: #0F4D92;
					/*--SIZE AND SHAPE-*/
	height: 30px;
					/* 	first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner) */
	border-radius: 50px 50px 0px 0px ;
					/* padding for the inner spacing, and margin for the outer one. */
	padding-right: 18px;
	padding-top: 10px;
	padding-bottom: 10px;
					/*- OUTER SPACING-*/
					/* ELIMINATE THE GAP INBETWEEN THE HEADERS */
	margin-top: -1rem;	

/* -------------------------------------------------------------------------------THIS IS FOR THE MOBILE SITE -------*/
				/* make the position fixed so as to hide in the future */
				/* hiddes unused elements	 */
	overflow: hidden;
	position: right;
	left: 0px;
	top: 0px;
	display: flex;
/* 	Makes all the lists elements inside this container flex  */
    flex-wrap: nowrap;
}
					

/*------------------------------------------------------------------------------LIST POSITIONS--TOP MENU-------- */
#homemenu li {
	margin: 0 auto;
	padding: 0;
					/* REMOVE BULLETS */
	list-style: none	
}

#homemenu li {
	float: right;
	display: block;
	position: relative;
	overflow-wrap: break-word;
	text-align: center;
/* 
	margin-right: 60px;
	position: sticky;
 */

}
/* ------------------------------------------------------------------------Link style  */
#homemenu a {
					/* LETTERING SPACING AND COLOR */
	display: block;
	padding: 0 40px;
	color: #57eaea;
					/* LETTER FONTS AND STYLES */
	font-family: 'Playfair Display SC', serif;
	font-style: italic;
	font-size: 25px;
	
	text-decoration: none;
	text-shadow: 23px -7px 4px rgba(0,0,0,0.79);	
	position: center;	

}

#homemenu li a:hover {
	color: #0d2245;
	text-shadow: 1px 1px #FF0000;
	text-shadow: 1px -1px 1px rgba(0,0,0,0.79);
	padding-top: 5px;
}

/* ---------------------------------------------------------------------------------------------------------------------
													Second Top navigation bar
--------------------------------------------------------------------------------------------------------------------- */
#menu {

	background: #0F4D92;
	margin-top: -1.5rem;
	height: 20px;
	padding-left: 0px;
	padding-bottom: 20px;
	padding-right:0px;
	border-radius: 0px 0px 50px 50px;
/* -------------------------------------------------------------------THIS IS FOR THE MOBILE SITE -------*/
	position: left;	
	text-shadow: 23px -7px 4px rgba(0,0,0,0.79);
/* ------------------------------------	Makes all the lists elements inside this container flex  */
	display: flex;
    align-items: stretch;
	
}

#menu li {
	margin: 0 auto; /* auto - the browser calculates the margin */
	padding: auto;
	list-style: none	
}
#menu ul {
/* 	width:100%; */
}
#menu li {
	float: left;
	display: block;
	position: relative;
	text-align: center;
	padding: 2px;
	width: 100%;

}
				
#menu a {
/* -----------------------------------------------------------LETTERING SPACING AND COLOR */
	display: block;
	padding: 0 12 0 0px;
	color: #57eaea;
/* ----------------------------------------------------------LETTER FONTS AND STYLES */
	font-family: 'Playfair Display SC', serif;
	font-style: italic;
	font-size: 25px;
	text-decoration: none;
	}
	
/* #hide menu{transition: max-height .5s ease-out;}*/

/* ------------------------------------PUSHING TEXT UNDERWATER EFFECT */
#menu li a:hover {
	color: #0d2245;
	text-shadow: 1px 1px #FF0000;
	text-shadow: 1px -1px 1px rgba(0,0,0,0.79);
	padding-top: 5px;
}

/* 
.blogpost-main{
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-top: 0px;
	float: left;   
	position: inline; 
	background-color: #f6f0e3;
	margin: 10px;
 */

/* ------------------------------------------------------------------------------------------------------------------------------------
				          Paid content pages layout and styles Oahu ext..
------------------------------------------------------------------------------------------------------------------------------------ */

#introduction {
	margin: 0px;
	padding-left: 20px;
}

#introduction h1 {
	text-align: center;
}
#menu_category {
	margin-left: 100px;;
}

/* ------------------------------------CLASSES CAN BE REUSED UNLIKE ID'S */
.blogpost{
	width: 95%;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-top: 0px;
	float: left;   
	position: inline; 
	background-color: #f6f0e3;
	margin: 10px;
	
}
/* ----------------------------------------------------Class ID in the HTML  */
.responsive {
  width: 100%;
  height: auto;
  float: left;
  padding-top: 20px;
}
.blogpost h2 {
	padding-top: 0px;
	margin: 0px;
}

/* ------------------------------------------------------ CARD PUSH EFFECT------------------ */
.blogpost{
  box-shadow: 0 20px 10px 0 rgba(0,0,0,0.4);
  transition: 1.5s;
}

.blogpost:hover {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.1);
  background-color: #f6f0e3;
}


/* ---------------------------------------------------------------------------------------------------------------------
											Category pages ASIDE
--------------------------------------------------------------------------------------------------------------------- */

.aside-ad-one{
  text-wrap;
  line-height:1;
  padding-top: 0px;
  margin-top: 20px;


}

/* -----------------------------------------------------------------------------------------------------
											floating flower Sign-up in css    
---------------------------------------------------------------------------------------------------------------------------- */
#flower {
	background: 
    repeating-conic-gradient(
      #cf7fb7 0 calc(360deg/16), 
      #a00071 0 calc(360deg/8));
      
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: sticky;
  top: 0rem;
  padding: 20px;
  float: right;
  box-shadow: 0 20px 10px 0 rgba(0,0,0,0.8);
  transition: 1.5s;
}
#flower:hover {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.1);
  background-color: #f6f0e3;
  }

#signup {
	background: 
	repeating-conic-gradient(); 
	width: 100px;
  	height: 100px;
  	border-radius: 50%;
  	position: sticky;
  	top: 0rem;
  	padding: 20px;
  	float: right;
  	box-shadow: 0 20px 10px 0 rgba(0,0,0,0.8);
  	transition: 1.5s;
}

#signup:hover {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.1);
  background-color: #f6f0e3;
}




/* -------------------------------------------------------------------------------------------------------
										DROP UP FOOTER WITH INDEX
------------------------------------------------------------------------------------------------------- */

/* -------------------TOPSIDE FOOTER main box */
#footer-cat{
   position:fixed;
   left:0;
   bottom:0;
   height:40px;
   width:100%;
   background:#d77b63;
   z-index:1000;
   padding-left:41px;
   box-shadow: 10px 10px 10px 20px rgba(0,0,0,0.3);
   transition: 1.5s;
   padding-right: 5px;
/*    -------------------------------Makes the index links fill the div rather thatn on list */
   position: inline; 
   display: flex;
   
}

#footer-cat:hover {
   height: 200px;
   box-shadow: 20px 20px 20px 40px rgba(0,0,0,1);
}

/* ----------------------------Nav links style in the footer */
#footer-cat #footer-cat-TOC {
	margin: -1rem;
}

#footer-cat #footer-cat-TOC li {
/* 	-------------------------------------------------makes the list spread out */
	float: left;
    width: 25%;
	list-style: none;
	/* border: 1px solid black;  */

}

#footer-cat footer-cat-TOC  footer-cat-TOC-ul {
	width: 100%;
}

/* --------------------------spacing make the section layout responsive css for the footer */

#footer-content {
	margin: 0px;
	padding: 0px;
	width:10%;
	margin-left: -4rem;

}

#footer-text {
	width:15%;
	padding-right: 40px;
	padding-left: 20px;
}

#footer-nav {
	width:80%;
	margin: -2rem;
	
}

/* -------------------------------------------------------------------------------------------------------
										Layered BOTTOM BACK FOOTER 
------------------------------------------------------------------------------------------------------- */


/* ------------------Main back footer box */
#footer-back{
	display: inline-block;
	position:float;
	left:0;
	padding-left:21px;
	height: 200px;
	width: 75%;
	margin-top: -35px;
	position: inline; 
    display: flex;
    padding-right: 20px;
}
/* ----------------LEFT SIDE with top of page index link and h1 text */
#footer-back-link{
	left: 0;
	top: 0;
	width:10%;
	padding: 0px;
	margin-top: -34px;
	margin-left: -3rem;
}

#footer-back-link h1{
	margin-left: 2rem;
}

/* --------------------------MIDDLE-EMPTY */
#footer-back-content{
	left: 0;
	top: 0;
	width:10%;
/* 	display: inline; */
	padding-left: 3px;
	margin-top: -35px;
}


/* -------------------RIGHT SIDE Back footer navigation box (the div to the right) */
#footer-back-nav{
	padding-left:0px;
	width:80%;
	padding-top: -1rem;
	right: 0;

} 
#footer-bottom-ul {
	position: inline; 
    display: flex;
    list-style: none;
}




 
/*      REFERENCES AND RESOURSES FOR THE CODE

-----------NAVIGATION BAR-------------

padding gap issues 
https://ishadeed.com/article/spacing-in-css/#css-grid-gap

NAV LINKS
https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_basic_html

BORDER RADIUS
https://www.w3schools.com/cssref/css3_pr_border-radius.asp

NAVIGATION WITH HOVER
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav

NAV LIST. list-style none - Eliminate bullets lists
https://www.w3schools.com/cssref/pr_list-style.asp



-------POSITIONING-------
auto - the browser calculates the margin
https://www.w3schools.com/css/css_margin.asp

padding INNER SPACING
https://www.w3schools.com/css/css_padding.asp

position :relative - The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of
and sticky The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block
POSITION : RELATIVE STATIC ABSOLUTE STICKY
https://developer.mozilla.org/en-US/docs/Web/CSS/position

FLoat, to move around the next when switching browser sizing, FLEX to flex the elements inside.  Grid 
https://coder-coder.com/display-divs-side-by-side/#flexbox-method



-------TEXT AND FONT--------------
font style
https://www.w3schools.com/cssref/pr_font_font-style.asp

web safe fonts
https://websitesetup.org/web-safe-fonts-html-css/

Line spacing
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

GOOGLE FONTS
https://www.w3schools.com/css/css_font_google.asp

text shadow
https://www.w3schools.com/cssref/css3_pr_text-shadow.asp

opacity: https://www.w3schools.com/cssref/css3_pr_opacity.asp

TEXT BOX MAX AND MIN width: 
https://www.w3schools.com/cssref/pr_dim_max-width.asp

Float Img to the Right around and aside text
https://www.w3schools.com/css/css_float.asp

TEXT LAYOUT
https://www.w3schools.com/css/css_align.asp


;
-----------MISC-------------------
 line-height:
 https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
 
 nav bar styling 
https://www.dottedsquirrel.com/simple-menu-navigation-bar-styling/

CARD BOX SHADOW
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_cards
 
  --------------DISPLAY PROPERTY---------
  https://developer.mozilla.org/en-US/docs/Web/CSS/display
  
  CONTENT
  https://bitsofco.de/how-display-contents-works/
  https://codeburst.io/display-contents-8c9226bd4602
  
   --------------IMG ---------------------
 fit
 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
 
 drop shadow
 https://css-irl.info/drop-shadow-the-underrated-css-filter/
 
 float to the right of text
 https://www.w3schools.com/css/css_float.asp
 
 Elements next to a floating element will flow around it. To avoid this, use the clear property or 
 https://www.w3schools.com/cssref/pr_class_clear.asp
 
 ----------------object-----------------------
 https://www.w3schools.com/html/html_object.asp
 
 https://www.w3schools.com/tags/att_object_height.asp
 
 
 
  -------------TIME AND DATE--------------
 https://blog.duda.co/8-cool-html-tags-you-didn-t-know-existed


 
  --------------DISPLAY PROPERTY---------
  
  
  --------------DROP LIST-------------------
  
  https://code.tutsplus.com/articles/10-rare-html-tags-you-really-should-know--net-3908


-----------------------GRADIENRTS FOR background: ----------

https://www.geeksforgeeks.org/css-repeating-linear-gradient-function/

https://www.includehelp.com/code-snippets/repeating-linear-gradient-function-with-example-in-css.aspx

https://www.geeksforgeeks.org/css-repeating-linear-gradient-function/


https://css-tricks.com/why-do-we-have-repeating-linear-gradient-anyway/


BACKGROUND color: https://www.freecodecamp.org/news/html-background-color-tutorial-how-to-change-a-div-background-color-explained-with-code-examples/
;

----------------DROP UP FOOTER------------------
ZINDEX
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/


SCROLL to top: 
https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

-------------------CSS SYNTAX-------------------
CSS child of id selector
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator

CSS and HTML Naming convention
https://en.bem.info/methodology/naming-convention/

nested selectors
https://tutorial.techaltum.com/cssselectors.html
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator


-----------water push effect------------------

https://www.w3schools.com/howto/howto_css_zoom_hover.asp



------------tables--------------------
https://www.w3schools.com/css/css_table.asp


--------------Page Scroll-----------------
https://www.educba.com/scrollbar-in-html-table/

------------------Conic and linear gradients-------------
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-conic-gradient

-----------------FLEXBOX----------------------
https://www.w3schools.com/css/css3_flexbox.asp


 */
 

/* login and signup forms  */
 
 .login-div {
	width: 63%;
	margin: 40px auto;
	border: 1px solid #cdcdcd;
	box-shadow: 0px 0px 20px #c3c3c3;
	border-radius: 15px;
	min-width: 690px;
	max-width: 900px;
	display: flex;
	background-color: white;
	}
	.login-page-image {
	  border-radius: 0px 15px 15px 0px;
	  width: 50%;
	  opacity: 0.9;
	}
	.login-btn,
	.signup-btn {
	  padding: 8px;
	  background-color: #5bb8ba;
	  border-radius: 5px;
	  cursor: pointer;
	  color: white;
	}
	.login-btn:hover{
	  background-color:#72d5d6 ;
	}
	.signup-btn{
	  background-color: #f17f68;
	}
	.signup-page-image {
	  border-radius: 15px 0px 0px 15px;
	  width: 50%;
	  opacity: 0.9;
	}
	.signup-form {
	  width: 50%;
	  padding: 10px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  flex-direction: column;
	}
	.signup-form form {
	  width: 80%;
	  position: relative;
	}
	.signup-form input,
	.signup-form button {
	  font-family: sans-serif;
	  border-radius: 5px;
	  outline: none;
	  width: 100%;
	  border: 1px solid rgb(211, 211, 211);
	}
	.signup-form input:focus {
	  border: 2px solid #58b6c793;
	  box-shadow: 0px 0px 4px #4e97b993;
	}
	.p_input{
	  padding: .8rem;
	  margin: .5rem 0;
	}
	.main_div a{
	  color: #5bb8ba;
	}
	.main_div{
	  width: 100%;
	  min-height: 100vh;
	  position: absolute;
	  top: 0;
	  left: 0;
	  background-color: #c7e5ff;
	}
	.alert-danger,
	.alert-success{
	  background-color: #f4c4c4;
	  display: flex;
	  justify-content: space-between;
	  padding: 0 2%;
	}
	.alert-danger a{
	  color: #ac5858;
	}
	.alert-success a{
	  color: #567a4c;
	}
	.alert-success{
	  background-color: #d8fbff;
	}
	.btn-close{
	  background-color: rgba(255, 255, 255, 0);
	  border: none;
	  font-size: 1.5rem;
	  cursor: pointer;
	}
	.btn-close:hover{
	  color: #c58e8e;
	}
	.eye-span {
	  position: absolute;
	  padding: 10px;
	  color: grey;
	  cursor: pointer;
	  right: 0;
	  transform: translate(0px, -128%);
	}
	.ls_form{
		text-indent: 0 !important;
	}