a:link{color:#18b495} 
a:visited{color:#18b495 } 
a:hover{
	color:#1679c5;
} 
a:focus{color: #16e980;} 
a:active{color:#d4d365;} 

* { box-sizing: border-box; }
button:focus, input:focus {outline:0;}
.clearfix { clear:both; }

.pixelize {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

hr {
	border-color:#acacac;
	max-width:98%;
}

html {
	margin:0px;
	padding:0px;
}

body{
	xfont-family:Arial;
	background-color:#1d6349; /*grey 282828, green 1d6349  262a2e */
    background-color: #1f5393;
	background-image:url('https://chazu.arkku.net/files/img/cross.png');
	font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
	color:#8e8e8e;
	xwidth:100vw;
	padding:0px;
	margin:0px;
	overflow-x:hidden;
	xoverflow-y:hidden;
	xfont-size:1.2em;
}

#top-bar {
	xborder:1px solid red;
	padding:5px;
	xbackground-color:#353a40; /* 353a40 151c25 */
	background-color: #22262a;
	margin-bottom:20px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

	xheight:50px;
	width:100%;
	position:relative;
	xmin-height:45px;
	xbox-shadow: 5px 5px 15px 1px RGB(0 0 0/30%);
	box-shadow: 0px 2px 4px rgb(0 0 0 / 70%);

	display:flex;
	xvertical-align:middle;
	xjustify-content: center;
	xflex-grow: 1
}

#top-bar > div {
	xborder:1px solid magenta;
}

/* left side of top bar */
#page-name {
	flex: 1; 
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

#page-name > .icon-container {
	xborder: 1px solid red;
	display:flex;
	align-items: center;
	width:30px;
	height:30px;
	margin:0px 10px 0px 20px;
	aspect-ratio:1/1;
}

#page-name > .icon-container > img.icon {
	border: 2px solid rgba(255,255,255,0.3); /* 18b495*/
	border-radius:20px;
	width:100%;
	height:100%;
	box-shadow: 2px 2px 3px 1px rgba(0, 0, 0,0.4);
	aspect-ratio:1/1;
}

#page-name > .title {
	xborder:1px solid grey;
	color:grey;
	font-size:1.2em;
	display:inline-block;
}








/* middle of top bar */
#top-bar-buttons {
	xborder:1px solid lime;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction:row;
}

/*
#top-bar-buttons > #link-area { 
	xborder:1px solid grey;
	display:inline-block;	
	z-index:1;
	height:100%;
}
*/

#top-bar-buttons > a.button {
	border:1.5px solid black;
	border-radius:20px;
	overflow:hidden;
	padding:0px 10px 0px 10px;

	height:100%;
	max-height:30px;
	min-height:30px;


	vertical-align:middle;
	background-color: rgba(0,0,0,0.5);
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.3);
	text-decoration:none;
	transition: all 0.1s ease 0s;
	
	user-select:none;
	margin-right:10px;
	color:#bfbfbf; /*     a6a6a6    */
	xtext-shadow: 1px 1px 0px black;

	display:inline-flex;
	flex-direction:row;
    justify-content: center;
    align-items:center;
	
}	

#top-bar-buttons > a.button:hover {
	color: #1ccaa7;
	border-color: #1ccaa7;
	background-color: rgba(0,0,0,0.2);
	border-radius:3px;
}

#top-bar-buttons > a.button:active {
	background-color: #0074db;
}

#top-bar-buttons > a.button > img.link-icon {
	xmax-height:20px;
	height:80%;
	max-height:50px;
	max-width:50px;
	xvertical-align:middle;
	xmargin-right:5px;
	filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));
}	


#top-bar-buttons > a.button:hover img.link-icon {
	border-radius: 50px;
	box-shadow: 0px 0px 0px 2px #1ccaa7;
}	

#top-bar-buttons > a.button > span {
	xborder-radius: 50px;
	xbox-shadow: 0px 0px 2px 2px #16e980;
	xborder:1px solid grey;
	font-family:consolas;
	xline-height:100%;
	margin-left: 5px;
}	



/* right side of top bar */
#right-side {
	flex: 1; 
	display: flex;
	justify-content: flex-end;
	align-items: center;
}


#content {
	xborder:1px solid red;
	xmin-height: 90vh;
	text-align: center;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);	
	max-width: 1200px;
	width: 100%;
	margin:auto;

	display:flex;
	flex-direction:row;
    justify-content: center;
    align-items:center;

}

#content > .section:last-child {
  xbackground: #ff0000!important;
  xmargin-bottom:200px!important;
  xpadding:100px!important;
}

.section {
	xborder:1pxsolid red;
	border-radius:5px;
	xwidth:40%;
	max-width:300px;
	width:100%;
	min-height:400px;
	padding:20px;
	display:inline-block;
	margin:auto 10px auto 10px;
	xmargin-bottom:10px;
	background:#191f27;
	font-size: 1em;
	vertical-align:top;
	xbox-shadow: 0px 0px 10px 0px rgba(0, 0, 0,0.8);
}

.section > .title {
	text-align: left;
	font-size: 18px;
	margin-bottom: 5px;	
}

.section > .content {
	text-align: left;
}

.section > .content > .item{
	display:flex;
	xtext-decoration: none;
	padding:5px;
	xfont-family:consolas, monospace;
	
}

.section > .content > .item > a {
	xtext-decoration: none;
	vertical-align: middle;

}


.section > .content > .item > .icon-container {
	xborder:1px solid grey;

	width:30px;
	height:30px;
	xaspect-ratio:1/1;
	xpadding:5px;
	margin-right:5px;

	cursor:pointer;

	display:inline-flex;
	justify-content: center;
	align-items: center;
}

.section > .content > .item > .icon-container:hover {
	border:1px solid grey;

}

.section > .content > .item:hover{
	xbackground:rgba(0, 0, 0,0.4);

}

/* change link color on item hover */
.section > .content > .item:hover > a {
	xcolor:#16e980;

}

.section > .content > .item:active {
	xbackground:rgba(255, 255, 255,0.4);

}


.section > .content > .item > .icon-container > img.icon {
	xborder:1px solid red;

	vertical-align: middle;
	xwidth:100%;
	xheight:100%;
	aspect-ratio:auto;
	xbackground:#6b5c47;
	xpadding:3px;
	xborder-radius:20px;
	xbox-shadow: 2px 2px 2px 0px rgba(0,0,0,0.65);
	xmax-width:20px;
}






#training-links {
	xpadding: 5px;
}


.skill-item {
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.9);	
	border-radius:2px;
	width:40px;
	display:inline-block;
	background-color:#555551;
	margin-right:5px;
	margin-bottom:2px;
	transition: all 0.1s ease 0s;
}


.skill-icon-container {
	-moz-box-sizing: border-box;
    box-sizing: border-box;
	float:left;
	margin-right:4px;	
	width:40px;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;	
}

.skill-icon-bg {
	width:30px;
	height:30px;
	margin:auto auto;
	display: flex;
	justify-content: center;
	align-items: center;	
}

.skill-icon {
	xborder:1px solid orange;

}

.skill-item:hover {
	background-color:#40403d;
	box-shadow:inset 0px 0px 1px 1px rgba(0,0,0,0.9);
	border-radius:2px;
}

.skill-item:active {
	background-color:#272725;
	box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,0.9);
}


.skill-item:hover .skillIconBg, .skill-item:hover .skillIconBg {
	background-color: #666661;
}




	
#worlds, #chats, #alch-notes-list, #fairy {
	text-align:left;
	color: #808080;
	font-size:15px;
}

#worlds > .item > .num, #chats > .item > .name, #alch-notes-list > .item > .price, #fairy > .item > .code {
	text-align:left;
	color:#00bfff;
}

#misc {
	text-align:left;
}

.section.links > .content > .item {
	display:flex;
	align-items: center;
	justify-content: start;
}

.section.links > .content > .item > .icon-container {
	xborder: 1px solid red;
	height:20px;
	width:20px;

	aspect-ratio: 1/1;
	vertical-align:middle;
	xmargin-right:5px;

	display:flex;
	align-items: center;
	justify-content: center;
}	

.section.links > .content > .item > .icon-container > img.icon {
	width:100%;
	height:100%;
	aspect-ratio: 1/1;
}