@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap');

:root, [data-theme="light"] {
	--background: #f3f2f0;
	--highlight: #0b75d8;
	--border: #a9a9a9;
	--mod-bar: #fefefe;
	--content-background: white;
	--nav-background: #dfdfdf;
	--content-text: black;
	--header-text: black;
	--white-text: white;
	--muted: gray;
	--forge-color: #1e2d44;

	--tech-color: #d01111;
	--adventure-color: #c8a800;
	--magic-color: #7532b8;
	--utility-color: #e3690f;
	--decoration-color: #14a593;
	--world-color: #32a31f;
	--library-color: #1363b8;
	--cursed-color: #933151;
	--misc-color: #323232;
	--storage-color: #a77741;
	--food-color: #9f1823;
	--equipment-color: #654700;
}

[data-theme="dark"] {
	--background: #1b1b1b;
	--highlight: #0b75d8;
	--border: #1d1d1d;
	--mod-bar: #222222;
	--content-background: rgb(34, 34, 34);
	--nav-background: #252525;
	--content-text: rgb(241, 241, 241);
	--header-text: rgb(241, 241, 241);
	--white-text: white;
	--muted: gray;
	--forge-color: white;
	
	--tech-color: #bf3f3f;
	--adventure-color: #764827;
	--magic-color: #663299;
	--utility-color: #bf623f;
	--decoration-color: #458ec1;
	--world-color: #e6e62c;
	--library-color: #cc9a3c;
	--cursed-color: #d17695;
	--misc-color: #3f9fbf;
	--storage-color: #cea06c;
	--food-color: #5975c8;
	--equipment-color: #000000;
}


@media (prefers-color-scheme: dark) {
	[data-theme="light"] {
		--background: #f3f2f0;
		--highlight: #0b75d8;
		--border: #a9a9a9;
		--mod-bar: #fefefe;
		--content-background: white;
		--nav-background: #dfdfdf;
		--content-text: black;
		--header-text: black;
		--white-text: white;
		--muted: gray;
		--forge-color: #1e2d44;
	}

	:root, [data-theme="dark"] {
		--background: #1b1b1b;
		--highlight: #0b75d8;
		--border: #1d1d1d;
		--mod-bar: #222222;
		--content-background: rgb(34, 34, 34);
		--nav-background: #252525;
		--content-text: rgb(241, 241, 241);
		--header-text: rgb(241, 241, 241);
		--white-text: white;
		--muted: gray;
		--forge-color: white;
	}
}

* {
	transition: color 0.4s, background-color 0.4s, border-color 0.4s, fill 0.4s !important;
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
	background-color: var(--background);
	color: var(--content-text);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--header-text);
}

.main-flex {
    display: flex;
    flex-direction: row;
}

.muted {
    color: var(--muted);
}

.temp-circle-logo {
    height: 50px;
    width: 50px;
    background-color: var(--content-background);
    border-radius: 50%;
    display: inline-block;
    margin-left: 20%;
}

.site-header {
    z-index: 2;
    position: sticky;
    background-color: var(--highlight);
    top: 0;
    width: 100%;
    height: 75px;
    display: flex;
    align-items: center;
}

.site-header h2 {
    color: var(--white-text);
    font-weight: bolder;
    padding: 0 20px 0 10px;
}

.links-container {
    margin: 0 auto;
}
.links-container a {
    color: var(--white-text);
    padding: 0 30px;
    text-decoration: none;
}

.rounded-border {
    border-radius: 10px;
    border: 1px;
}

.gray-border {
    border: 1px solid var(--border);
}

.green {
    color: #69E781;
}

.info-popup {
	z-index: 10;
	position: absolute;
	width: 500px;
    background-color: var(--content-background);
	color: var(--content-text);
	border-radius: 5px;
	border: 1px solid var(--content-text);
	padding: 20px;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}

.discord-button {
	text-decoration: none;
	border-radius: 5px;
	padding: 5px;
	font-weight: bold;
	color: white;
	background-color: var(--library-color);
	margin-left: 50px;
	margin-right: 5px;
}

.github-button {
	text-decoration: none;
	border-radius: 5px;
	padding: 5px;
	font-weight: bold;
	color: white;
	background-color: var(--magic-color);
	margin-right: 5px;
}

.exit-button {
	border-radius: 5px;
	padding: 5px;
	font-weight: bold;
	color: white;
	background-color: red;
}