/* BORDERS */

@font-face {
	font-family: Daedric;
	src: url(./src/fonts/Daedric.ttf);
}

@font-face {
	font-family: DaedricWorn;
	src: url(./src/fonts/DaedricWorn.ttf);
}

@font-face {
	font-family: MagicCards;
	src: url(./src/fonts/MagicCards.ttf);
}

* {
	cursor: url(./src/cursor/cursor.png) 0 0, auto;
	font-family: MagicCards;
	image-rendering: pixelated;
	color: #7f6c50;
	font-size: 10px;
}

/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv */
/*Scroll bar - does not work on Firefox or Edge*/
/* TODO: fix scrollbar arrows padding. try to add border to scrollbar */
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

::-webkit-scrollbar-track-piece {
	background-color: #060501;
	border-image: url(./src/menu/thick_border/thick_border.png) 2 fill repeat;
}
::-webkit-scrollbar {
	width: 6px;
	height: 6px;

	border-image: url(./src/menu/thin_border/thin_border.png) 2 fill repeat;
}
::-webkit-scrollbar-thumb {
	background-image: url(./src/menu/scroll/menu_scroll_scroller_middle.png);
	border: 2px solid;
	border-image: url(./src/menu/head/head_border.png) 2 fill repeat;
	image-rendering: pixelated;
}

::-webkit-scrollbar-button:horizontal:decrement {
	background-image: url(./src/menu/scroll/horizontal/menu_scroll_left.png);
	background-size: contain;
	image-rendering: pixelated;
}

::-webkit-scrollbar-button:horizontal:increment {
	background-image: url(./src/menu/scroll/horizontal/menu_scroll_right.png);
	background-size: contain;
	image-rendering: pixelated;
}

::-webkit-scrollbar-button:vertical:decrement:start {
	background-image: url(./src/menu/scroll/vertical/menu_scroll_up.png);
	background-size: contain;
	image-rendering: pixelated;
}
::-webkit-scrollbar-button:vertical:increment:end {
	background-image: url(./src/menu/scroll/vertical/menu_scroll_down.png);
	background-size: contain;
	image-rendering: pixelated;
}

::-webkit-scrollbar-corner {
	background-image: url(./src/menu/scroll/menu_size_button.png);
	background-size: contain;
	padding: 5px;
	image-rendering: pixelated;
}

a {
	color: #2a4b51;
}

button:hover,
a:hover,
[onclick]:hover {
	cursor: url(./src/cursor/cursor_underscore.png) 0 0, auto;
}

body {
	/*container*/
	display: grid;
	grid-template-columns: 2fr 2fr 3fr;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-areas: "stats spells map" "profile profile map";

	background-color: #5d5d5d;
}

.thick-border {
	border: 4px solid;
	padding: 0px;
	border-image: url(./src/menu/thick_border/thick_border.png) 4 fill repeat;
	image-rendering: pixelated;
	background-color: #0605016e;
}

.thin-border {
	border: 2px solid;
	padding: 2px;
	margin: 2px;
	border-image: url(./src/menu/thin_border/thin_border.png) 2 fill repeat;
	image-rendering: pixelated;
}

.make-flex {
	justify-content: center;
	align-items: center;
	display: flex;
}

.outer-border {
	margin: 0.5px;
}

.status-bars {
	min-width: 100px;
	text-align: center;

	box-shadow: inset 0px -6px 10px 1px black, inset 0px 2px 9px 2px #ffffff5a;
}

.divider-bottom {
	border-bottom: 2px solid;
	border-image: url(./src/menu/thin_border/thin_border.png) 2 fill repeat;
}

.head {
	border: 2px solid;
	border-image: url(./src/menu/head/head_border.png) 2 fill repeat;

	background-image: url(./src/menu/head/menu_head_block_middle.png);
	image-rendering: pixelated;

	padding: 3px 5px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

	max-height: 10px;
}

.head > p {
	background-color: #000000d9;
	color: #7f6c50;
	padding: 0px 5px;
	height: inherit;
	border: #2a4b51 2px solid;
	image-rendering: pixelated;
	border-image: url(./src/menu/button/button-frame-inverted2.png) 4 fill repeat;
}

.map {
	background-image: url(./src/vvardenfell_map.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.avatar {
	background-image: url(./src/avatar.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	max-width: 100%;
	max-height: 100%;
	image-rendering: pixelated;
}

.inventory {
	display: grid;
	/* grid-template-columns: repeat(10, 1fr);
	grid-template-rows: repeat(5, 1fr);
	gap: 2px; */
}

.grid-2x2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}
.grid-temp {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 2px;
}

button {
	border: 4px solid;
	padding: 0px 2px;
	border-image: url(./src/menu/button/button-frame.png) 4 fill repeat;
	image-rendering: pixelated;
	background-color: #000000d9;
	color: #6a5734;
}
button:active {
	border-image: url(./src/menu/button/button-frame-inverted2.png) 4 fill repeat;
	color: #484138;
	transform: scale(0.98);
}

/*
gold #6A5734
brown-gold #484138
light gold #7F6C50
black #060501
blue accent #2A4B51
*/