:root{
	--mainColor:			rgba(0,0,0, .85);
	--linkColor:			orange;
	--headingColor:			#540B0E;
	--headingColorLight:	rgba(84, 11, 14, 0.7);
	--mainWidth:			clamp(.5rem,4vw, 2.5rem);
	--bRadius:				15px;
	--orangeColor:			rgb(237, 150, 0);	
}
/*rgb(84, 11, 14)*/
body				{font-family: 'Nanum Gothic', sans-serif; padding:0px; margin:0px;}
a					{text-decoration:none; color:var(--linkColor);}
#logo				{font-family: 'Arizonia', cursive; font-size:clamp(3.75rem, 8vw, 8rem); text-align:center; color:var(--headingColor);}
#logo a 			{color:var(--headingColor);}
#subLogo			{font-size:0.8rem; letter-spacing:.45rem; text-align:center; margin-top:-10px}
#subLogo a 			{color:#000000;}
nav					{display:flex; flex-direction:row; justify-content:center; gap:0rem; background-color:var(--mainColor);
						margin-top:10px; aligin-items:center;
}
nav > div			{font-size:1.2rem; padding:15px 30px; transition:background-color .4s;}
nav > div:hover		{background-color:#000000}
nav > div a 		{color:#ffffff; text-decoration:none; transition:color .5s}
nav > div a:hover	{color:var(--linkColor); text-decoration:none;}	
#main-content		{border:0px solid red; min-height:100vh; min-height:100dvh; display:grid; grid-template-rows: auto 1fr auto;}
main				{outline:0px solid red; padding:0px var(--mainWidth);}

#heroImage div		{font-size:clamp(1.5rem, 4vw, 2.5rem); background-color:rgba(84, 11, 14, 0.9); 
						color:#FFFFFF; display:inline-block; padding:12px;
						border-left:15px solid var(--linkColor); margin-left:10px; margin-right:10px; margin-top:40px; opacity:0.8;
						}
h1					{padding:0px var(--mainWidth); margin:1rem 0px 0px 0px; font-size:clamp(1.5rem,4vw, 2.25rem); color:var(--headingColor);}
p,li 				{line-height:150%; font-size:1.15rem;}
@media (max-width:600px){
	nav > div				{padding:15px 15px;} 
	nav > div:nth-child(1)	{display:none;}
	#me						{display:none;}
}

/* Common Button */

.details	{background-color:var(--orangeColor); color:#ffffff; border-radius:15px; padding:10px 15px}

/* Contact Us Form */
.formContact		{border:2px solid #e2e2e2; font-size:20px; padding:5px}
textarea.formContact 	
					{min-width:200px; max-width:80vw; height:250px;}
.formLabel			{font-size:20px}
.thankyou			{width:400px; border:2px solid green; background-color:#D6FFD6; padding:15px; margin-bottom:20px}


/* Profile Picture */
.profile {width:300px; height:300px; border:1px solid rgb(84, 11, 14); margin-top:20px; margin-left:20px; border-radius: 180%;
	background-color:rgba(84, 11, 14, 0.9); opacity:0.8;}


/* Footer */
#subFooter		{padding:20px; display:flex; justify-content:space-evenly; background-color:var(--mainColor); flex-wrap:wrap;
				 gap:30px; max-width:100%; margin-top:40px}
#subFooter a	{color:#FFFFFF; text-decoration:none}
#subFooter p	{color:#DEDFE1; padding:5px; font-size:1.1rem}
#subFooter li	{color:#DEDFE1; font-size:2.75rem;}
.footerItem		{width:300px}
.titleOrange	{color:var(--linkColor);}
.fTitle			{font-size:1.3rem; color:#ffffff; border-left:3px solid var(--webOrange); margin-bottom:10px; letter-spacing:4px}
.fLinks			{margin-bottom:15px; margin-left:15px;}
#footerr		{padding:10px 0px; text-align:center; line-height:180%; color:var(--mainColor); display:flex;
					font-size:1.1rem; max-width:100%; justify-content:space-between;
					border:1px solid var(--mainColor); margin-bottom:50px}