:root {
	--font-family-primary: 'Poppins', 'Segoe UI', 'Helvetica Neue', 'Liberation Sans', sans-serif;
	--font-family-secondary: 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Liberation Sans', sans-serif;
	--font-awesome: 'Font Awesome 6 Pro';
	--font-min-size: 16px;
	--font-max-size: 18px;
	--color-primary: 114, 68, 77;
    --color-secondary: 79, 22, 33;
    --color-tertiary: 179, 91, 0;
    --color-quaternary: 255, 224, 191;
    --color-text-base: 0, 0, 0;
	--color-background-primary: 255, 111, 0;
    --color-background-secondary: 79, 22, 33;
    --color-background-tertiary: 179, 91, 0;
    --color-background-quaternary: 255, 224, 191;
    --color-background-base: 255, 255, 255;	
    --color-white: 255, 255, 255;
    --color-black: 0, 0, 0;
	--color-gray-primary: 133, 133, 133;
    --color-gray-secondary: 183, 183, 183;
    --color-gray-tertiary: 38, 38, 38;
    --color-gray-quaternary: 76, 76, 76;
    --color-light-gray: 242, 242, 242; 
    --color-light-gray-secondary: 229, 229, 229; 
    --color-dark-gray: 21, 20, 20; 
    --color-scrollbar: var(--color-primary);
    --color-scrollbar-track: var(--color-black);
    --color-scrollbar-thumb: var(--color-primary);	
}


html {
	text-rendering: optimizeLegibility;	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-primary)) rgb(var(--color-scrollbar-track));	
}

html::-webkit-scrollbar {
    overflow: hidden!important;
    width: 8px !important;
    height: 8px !important;
}

html::-webkit-scrollbar-track {
    background: rgb(var(--color-scrollbar-track));
    border-radius: 0; 
}

html::-webkit-scrollbar-thumb {
    width: 10px;
    border-radius: 0; 
    background: rgb(var(--color-scrollbar));
}

html, body {
    font-family: var(--font-family-secondary);
    margin: 0;
    padding: 0;
    color: rgb(var(--color-black));
    height: 100%;
    overflow-x: hidden;
}

body {
    position: relative;
    min-height: 100%;
    display: block;
    background: rgb(var(--color-black));
    overflow-y: scroll;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/images/background.jpg') no-repeat center center fixed;
    background-size: cover;
    filter: brightness(80%);
    z-index: -1;
}

body > * {
    z-index: 1;
}


body p {
	line-height: 1.5em;	
}


/*
	OTSIKOT
*/

h1 {
	font-family: var(--font-family-primary);
}

h2 {
	font-family: var(--font-family-secondary);
	margin: 0;
	padding: 0;
}

h3 {
	font-family: var(--font-family-primary);
	font-size: 1em;
	font-weight: 600;
	margin: 0 0 1em 0;
	padding: 0.5em 0 0 0;
}


/*
	LINKIT
*/

a, a:visited {
	color: rgba(var(--color-secondary), 1);
	transition: color 0.5s ease;
}

a:hover, a:active {
	color: rgba(var(--color-primary), 1);
}


/*
	WRAPPER
*/

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

header {
    width: 100%;
    display: flex;
    justify-content: center;
}

header .wrapper {
    max-width: 800px;
    width: 100%;
}

header .wrapper h1 {
	background: rgb(var(--color-black));
	color: rgb(var(--color-white));	
	padding: 0.5em;
	text-align: center;
	opacity: 0.8;
	text-transform: uppercase;
}

article {
    max-width: calc(800px - 6em);
	width: 100%;
	background: rgba(255, 255, 255, 0.7);
	padding: 3em;
	margin-bottom: 1em;
}

@media (max-width: 719px) {

	article {
		max-width: calc(800px - 2em);
		width: 100%;
		background: rgba(255, 255, 255, 0.8);
		padding: 1em;
	}

}

article h2 {
	position: relative;
	left: -0.75em;
	font-weight: bold;
	background-color: rgb(var(--color-secondary));
	color: rgb(var(--color-white));	
    text-transform: uppercase;
	display: inline-block;
	padding: 0.3em 0.75em 0.3em 0.75em;
	margin-bottom: 0.5em;
}

article p {
	font-size: 1em!important;
}


@media (max-width: 720px) {
	
	article p,
	article h3	{
		padding: 0 1em 0 1em;
	}
	
	article h2 {
		left: 0;
	}
	
}

/*
	RAKENNUSOHJEET
*/


#city-buildings .description .wrapper {
	display: flex;
}

#city-buildings .description .wrapper .left {
	width: 70%;
	padding-right: 2.25em;
}

#city-buildings .description .wrapper .right {
	width: 30%;
}

@media (max-width: 720px) {
	
	#city-buildings .description .wrapper {
		flex-direction: column;
	}

	#city-buildings .description .wrapper .left,
	#city-buildings .description .wrapper .right {
		width: 100%;
		padding-right: 0;
	}
}


/* 
	TAULUKOT
*/

.table {
	display: grid;
	gap: 0.01em;
	padding: 0.5em 0 0.5em 0;
}

#epic-monsters .table {
	grid-template-columns: 40% 20% 20% 20%;	
}

#attack-strategies .table {
	grid-template-columns: 16% 32% 52%;	
}

#crypts .table {
	grid-template-columns: 17% 17% 22% 22% 22%;
}


#elven-citadels .table {
	grid-template-columns: 20% 80%;	
}


.row {
	display: contents;
}

.header .cell {
	font-weight: bold;
	background-color: rgb(var(--color-background-secondary));
	color: rgb(var(--color-white));	
}

.cell {
	padding: 0.5em 1em 0.5em 1em;
	border: 1px solid rgba(var(--color-gray-secondary), 0.8);
	text-align: center;
	background-color: rgba(var(--color-white), 0.6);
}

#epic-monsters .table .row .cell:first-child {
	text-align: left;
}

#attack-strategies .table .row .cell:not(:first-child),
#elven-citadels .table .row .cell:not(:first-child) {
	text-align: left;
}