/* this is what makes the layout work, doing my best to name everything
in ways where it'obvious what it is so you don't need to ask too much
but if there's anything that confuses you, do ask! */
body {
	background: black;
}

html, body {margin: 0}

/* don't touch this — it's the gradient on the bottom of the header and top of the footer */
:root {
	--gradient: linear-gradient(90deg,rgba(255,0,111,1) 0%,rgba(255,88,119,1) 7%,rgba(255,0,0,1) 14%,rgba(216,76,76,1) 21%,rgba(249,87,87,1) 28%,rgba(254,106,0,1) 35%,rgba(255,139,53,1) 42%,rgba(147,186,73,1) 49%,rgba(124,199,64,1) 56%,rgba(44,190,161,1) 63%,rgba(35,128,111,1) 70%,rgba(73,159,184,1) 77%,rgba(42,141,176,1) 85%,rgba(82,124,174,1) 92%,rgba(58,58,130,1) 100%);
}

#container {
	height: 100%;
	max-width: 84%;
	color: #D6CBC9;
	margin: 0 auto;
}

#header {
	width: 100%;
	background-color: black;
	color: white;
	border-bottom: transparent solid 3px;
	border-image-source: var(--gradient);
	border-image-slice: 1;
	box-shadow: 0 1px 5px 1px rgba(0,0,0,0.5);
}

.headertext {
	display: flex;
	margin: 15px 150px;
	text-transform: uppercase;
	font-size: 25px;
}

main {
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url(https://static.wikitide.net/phightingwiki/c/c2/Site-background-transparent.png);
	height: 1080px;
}

.layout {
  display: grid;
  grid-template-areas:
"header header header" 
"sidebar  content  categories" 
"footer footer footer";
  grid-template-columns: 11% 78% 11%;
}

/* this is the sidebar on the left, it holds all the links*/
.layout .sidebar {
  grid-area: sidebar;
  color: white;
  text-align: left;
  word-wrap: break-word;
  margin-top: 15px;
}

/* text for navbox categories */
.layout .sidebar h2 {
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid white;
	width: 100%;
}
.layout .categories h2 {
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid white;
	width: 100%;
}

/* this styles specifically only the links on the sidebar */
/* this is for the left side */ 
.sidebar a {
	text-decoration: none;
	color: white;
}

.sidebar a:link {
	text-decoration: none;
	color: white;
}

.sidebar a:hover {
	text-decoration: underline;
	font-style: italic;
	color: white;
}

/* this is for the right side */
.categories a {
	text-decoration: none;
	color: white;
}

.categories a:link {
	text-decoration: none;
	color: white;
}

.categories a:hover {
	text-decoration: underline;
	font-style: italic;
	color: white;
}

/* adds the arrow to the sidebar list */ 
.layout .sidebar li {
	list-style: inside "➔ ";
	margin-left: -40px;
}

/* adds the arrow to the category links*/
.layout .categories li {
	list-style: "↳ " inside !important;
	margin-left: -40px;
}

/* colors the arrows */
.sidebar li::marker {
	color: rgb(150,150,150);
}

.categories li::marker {
	color: rgb(150,150,150);
}

/* this is the wiwiwi */
.wiwiwi {
	height: 135px; 
	/* anything beyond 128px adds spacing between the wiwiwi + the sidebar box, 
	anything below 128px cuts off the wiwiwi. please do not cut off the wiwiwi */
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url(https://file.garden/ZRaSB8pOlUzNlh8o/wiwiwi.gif);
}

/* this is the middle; holds all the written content */
.layout .content {
  grid-area: content;
  color: white;
  word-wrap: break-word;
  background: #0e0e0e;
  border: 1px solid #eaecf0;
  border-top: 0;
  margin-right: 20px; /* this is the spacing between the main content and the category sidebar*/
  margin-left: 20px; /* this is the spacing between the main content and the links sidebar*/
  padding: 1em 2em 3em;
}

/* images in the character tables */
.contentimg {
	height: 85px;
	width: 85px;
	-moz-transition:-moz-transform 0.1s ease-in;
	-webkit-transition:-webkit-transform 0.1s ease-in;
	-o-transition:-o-transform 0.1s ease-in;
	transition:transform 0.1 ease-in
}

/* grayscales and enlarged image slightly on hover like on the actual wiki */
/* if you don't want the grayscale, remove the last two entries */
.contentimg:hover {
	-moz-transform:scale(1.15);
	-webkit-transform:scale(1.15);
	-o-transform:scale(1.15);
	transform:scale(1.15);
	opacity:0.75;
	filter:grayscale(100%);
	filter:alpha(opacity=75)
}

/* spacing between table rows */
.space {
	width: 360px;
}

/* used for the hr seperater on the main page */
.cut {
	border-bottom: 1px solid white;
	width: 100%;
	margin: 20px 0 20px 0;
}

/* this is the sidebar on the right, it holds the category links */
.layout .categories {
  grid-area: categories;
  color: white;
  text-align: left;
  word-wrap: break-word;
  margin-top: 15px;
}

/* boxes on the left and right sidebars */
.navbox {
	color: white;
	background-color: rgba(0,0,0,0.8);
	padding: 1px 9px 1px 10px;
	margin-bottom: 10px;
}

/* -------------- this is all the text styling! -------------------*/
/* the text color for the general layout is in the layout section */

/* link styling */
a {
	color: #A500FF;
	text-decoration: none;
}

a:link {
	color: #A500FF;
	text-decoration: none;
}

/* changes link when hovered over to be white, italicised and with an underline*/
a:hover {
	text-decoration: underline;
	font-style: italic;
	color: white;
}

/* applies a border line in the style of a <hr> below a h1. also aligns text left.*/
h1 {
	text-align: left;
	border-bottom: 3px solid white;
	width: 100%;
}

/* this is used for text that has a tooltip so it has a dotted underline */
.tool {
	text-decoration: underline;
	text-decoration-style: dotted;
}

/* puts any text in a list on the left instead of centering it. if you remove this, all list text is centered */
ul {
	text-align: left;
}

/* this is the tooltip styling */
#move {
	background: black;
	color: white;
	transform: skew(-10deg);
	padding: 8px; 
	outline: 1px solid white;
	position: fixed;
	visibility: hidden;
	z-index: 99;
}