:root {
	--black: #211725;	/*	Darkest Color	*/
	--light: #FFF5DE;
	--cream: #E0BCA2;
	--yellow:#ECBF79;
	--red:	 #AD5258;
	--brown: #8C4928;
	--Dbrown:#421A16;
	--banner:#C09174;
	--header:#E89468;
	--head1: rgb(232,148,104);
	--head2: rgb(236,191,121);
}
body{
	background-color:var(--light);
	color: var(--Dbrown);
	font-family:arial;
	background-image:url("img/InTheoryRepeatting-starrrr-pattern.png");
	overflow-x:hidden;
}
#PageBanner{
	margin-left:auto;
	margin-right:auto;
	position:relative;
	top:-8px;
	left:-8px;
	width:100vw;
	height:200px;
	display:block;
	background-image:url("img/Banner_yupp.png"), url("img/Pattern_but_NOW_for_the_banner.png");
	background-color:var(--banner);
	background-repeat: no-repeat, repeat;
	background-size: contain,300px 300px;
	background-position:center,center;
	color:var(--light);
	font-size:60px;
	font-family:tahoma;
	z-index:-5;
}
#ContainArt {
	width:60vw;
}
#ArtSection{
	margin-top:40px;
	width:50vw;
	min-height:75vh;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
#ArtHead{

}
.artbox{
	display:inline-block;
	/*height:240px;
	width:180px;*/
	padding-right:15px;
    padding-left:15px;
    padding-bottom: 10px;
}
.artimg{
	max-width:260px;
	max-height:260px;
}
.arttitle{
	display:inline-block;
	text-align:center;	
	max-width:180px;
}
#ContainInfo{
	width:40vw;
}
#About{
	margin-top:20px;
	width:300px;
	height:280px;
	margin-left:auto;
	margin-right:auto;
	position: fixed;
	right:40px;
	top:18vh;
}
#AboutHead{
	
}
#Search{
	margin-top:20px;
	position:fixed;
	right:40px;
	margin-left:auto;
	margin-right:auto;
	top:60vh;
	width:300px;
	height:90px;
}
.errormsg{
	color:#FF0000;
	font-size:20px;
	background-color:var(--light);
}
#SubArt{
	width:700px;
}
#Social{
	margin-top:20px;
	width:300px;
	height:120px;
	margin-left:auto;
	margin-right:auto;
	position: fixed;
	right:40px;
	top:80vh;
}
#SocHead{

}

.contbox {
	border: 1px solid var(--black);
	padding-left: 8px;
	padding-right:8px;
	padding-bottom:6px;
	background-color: var(--light);
	box-shadow: 2px 2px 3px var(--Dbrown);
}
.boxheader{
	
	background: linear-gradient(90deg, var(--head1) 0%, var(--head2) 65%);
	color: var(--Dbrown);
	height:30px;
	display:block;
	padding-left:60px;
	position:relative;
	left: -8px;
	padding-top:4px;
	font-size: 24px;
	font-weight:bold;
	border-bottom-right-radius: 8px;
}
.icon {
	border-radius:200px;
	position:absolute;
	background-color:var(--black);
	background-image:url("img/pfp_T_L_C.png");
	background-size: 100px 100px;
	background-repeat: no-repeat;
	left: -50px;
	top:-50px;
	width: 100px;
	height: 100px;
	display: block;
	z-index: 10;
	border: 1px solid 
}
#ImgPop{
	
}
.imgpopup{
	left:50%;
	transform: translateX(-50%);
	position:fixed;
	top:2vh;
	border:1px solid var(--black);
	display:block;
	z-index:20;
	background-color:var(--light);
	padding-left:5px;
	padding-right:5px;
	box-shadow: 2px 2px 4px var(--brown);
}
.poptitle{
	left:-5px;
	font-size:20px;
	height:50px;
	line-height:20px;
	text-align:center;
	padding-left:1px;
}
.popimg{
	display:block;
	margin-left:auto;
	margin-right:auto;
	max-width:80vw;
	max-height:70vh;
}
.popclose{
	float:right;
	position:relative;
	right:2px;
	background-color:var(--red);
	width:16px;
	height:16px;
	font-size:16px;
	padding:1px;
	border: 1px solid var(--black);
	border-radius:4px;
	box-shadow: 1px 1px var(--Dbrown);
}
.popdesc{
	text-align:center;
	font-size:18px;
	color:var(--black);
	width:inherit;
	max-width:500px;
	margin-left:auto;
	margin-right:auto;
	margin-top:4px;
}
.poptags{
	text-align:center;
	font-size:14px;
	color:var(--Dbrown);
	max-width:inherit;
	margin-top:3px;
}
.socicon{
	display:inline-block;
	width:64px;
	height:64px;
	border-radius:2px;
}
#XIcon {
	background-image:url('img/twitter.png');	
}
#DAIcon {
	background-image:url('img/deviantart.png');	
}
#TumIcon {
	background-image:url('img/tumblr.png');	
}
#BSkyIcon {
	background-image:url('img/bsky.png');	
}
#MailIcon {
	background-image:url('img/gmail.png');	
}
.formbutton{
	background-color:var(--cream);
	border-radius:8px;
	border:1px solid var(--banner);
	height:26px;
	font-size:18px;
	color: var(--red);
}
.formtext{
	background-color:var(--light);
	border:2px solid var(--yellow);
	border-radius:4px;
	
}