@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
  font-family: 'Myvstrican2';
  src: url('/assets/Myvstrican2.ttf');
}

:root {
	--main-bg: rgba(255,255,255,0.95);
	--main-text: rgba(0,0,0,0.6);
	--accent-dark: #7da15e;
	--accent-main: #abbe74;
	--accent-text: #FEFFF5;
	--divider: #bacab2;
	--shadow: black;
	--header-text: black;
	--dropdown-bg-hover: #ddd;
	--dropdown-bg: #f9f9f9;
	--transition: background-color 200ms, color 200ms;
    scroll-behavior: smooth;
}

* {box-sizing: border-box}

body {
	margin: 0;
	height: 100vh;
	font-family: 'Roboto', sans-serif;
	background: linear-gradient(black, 30px, transparent 350px), url(/img/bg.png) repeat;
	background-attachment: fixed;
}

/* ----------- MAIN ----------- */

main {
	width: 95%;
	max-width: 960px;
	margin: 0 auto;
	padding: 55px 0 5px 0;
	min-height: 100%;
	font-size: 16px;
	position: relative;
	background: var(--main-bg);
	box-shadow: 0 0 10px var(--shadow);
	color: var(--main-text);
}

main small {font-size: 13px}
main img {max-width: 100%}

main button {
	cursor: pointer;
	border: none;
	padding: 10px 12px;
	margin: 5px;
	font-family: 'Roboto', sans-serif;
	background: var(--accent-dark);
	color: var(--accent-text);
	transition: var(--transition);
}

main button:hover {background: var(--accent-main)}

main a {
	text-decoration: none;
	color: var(--accent-dark);
	transition: var(--transition);
}

main a:hover {color: var(--accent-main)}

hr {
  border: none;
	border-top: 1px solid var(--divider);
	margin: 10px 0;
}

.main-body {
	padding: 30px;
	margin-bottom: 30px;
}

.main-body h2 {
	margin: 0;
	padding-top: 15px;
	font-size: 28px;
	font-family: 'Roboto', sans-serif;
	color: var(--header-text);
}

h1 {
	margin: 0;
	font-size: 36px;
	font-family: 'Roboto', sans-serif;
	color: var(--header-text);
	text-shadow: 2px 2px var(--accent-main);
	text-align: center;
}

.sdpc {
	margin: 8px
}

.floatright {
	max-width: 40%;
	float: right;
	padding: 0 20px;
}

.floatleft {
	max-width: 40%;
	float: left;
	padding: 0 20px;
}

.storesection {
	width: 100%;
	overflow: auto;
}

.storesection .floatright {
	max-width: 30%;
}

.storesection .floatleft {
	max-width: 30%;
}

.anchor {
    scroll-margin-top: 80px;
}

#main {
	text-align: center;
	font-size: 40px;
}

.mainfooter {
	bottom: 0;
	border-top: 1px solid;
	text-align: center;
	font-size: 10px;
	border-top-color: var(--divider);
}

footer {
	position: absolute;
	bottom: 0;
	width: 100%;
}

/* ----------- HEADER ----------- */

.mainheader {
	position: fixed;
	background-color: #000;
	background-color: rgba(0,0,0,0.93);
	height: 65px;
	width: 100%;
	z-index: 2;
	font-size: 14px;
	box-shadow: 0 0 10px var(--shadow);
}

#hdc {
	margin: 0;
	padding: 0;
}

.mainheader a {
	text-decoration: none;
}

.navbar {
	display: inline;
}

#hdrimg {
	height: 55px;
	margin: 5px;
	float: left;
}

#navtoggle {
	display: none;
	width: 65px;
	height: 65px;
	cursor: pointer;
	float: right;
	background: none;
	transition: var(--transition);
}

#navtoggle:hover {background-color: var(--accent-dark)}

#navtoggle::before {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	margin: auto;
	background: linear-gradient(white 4px, transparent 5px 9px, white 10px 14px, transparent 15px 19px, white 20px);
	transition: var(--transition);
}

#navtoggle.navspin::before {transform: rotate(90deg)}

#links {
	display: flex;
	justify-content: end;
}

#links.visible {display: flex}

#links a {padding: 10px 16px}

.navlink, .theme-dropdown-container a {
	display: flex;
	height: 65px;
	color: var(--accent-text);
	transition: var(--transition);
	align-items: end;
    cursor: pointer;
}

.navlink:hover, .theme-dropdown-container a:hover {background-color: var(--accent-dark)}

.theme-dropdown-container {
    position: relative;
}

.theme-dropdown-container a {
    width: 100%;
    display: flex;
    justify-content: center;
}

#themes-container {
    display: none;
    position: absolute;
    top: 65px;
    right: 0;
    width: 100%;
	box-shadow: 0 0 10px var(--shadow);
    z-index: -1;
}

.theme-dropdown-container:hover #themes-container {display: block}

#themes-container button {
    border: none;
    border-radius: 0;
    background-color: #000;
    background-color: rgba(0,0,0,0.93);
    cursor: pointer;
    color: var(--accent-text);
    font-size: inherit;
    display: block;
    width: 100%;
    padding: 10px 20px;
	transition: var(--transition);
}

#themes-container .selected {
    font-weight: bold;
    text-decoration: underline;
}

#themes-container button:hover {background-color: var(--accent-dark);}

#navtoggle {color: var(--accent-dark); border: none}
#navtoggle:hover {color: var(--accent-main)}

textarea {border-style: solid}

.fauna-img {max-width: 80% !important}

.index-miv {
	float: right;
	max-height: 330px;
}

/* species list icons */

.icongrid {
  display: flex;
  flex-wrap: wrap;
}

.icongrid a {
  display: flex;
  width: 25%;
  padding: 0.5%;
}

.icongrid a img {box-shadow: 0 0 0 transparent; transition: var(--transition)}
.icongrid a:hover img {box-shadow: 0 0 5px var(--accent-dark)}

/* index page credits */

#thegang {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.thegangcol {
	width: 20%;
	text-align: center;
	padding: 5px;
}

.thegangcol img {border-radius: 100%; width: 100%; margin-bottom: 10px}
.thegangcol p {margin-top: 0}
.thegangcol b {font-size: 18px}

/* index page changelog */

.changelog-container {
  height: 150px;
  overflow: auto;
  border: 1px solid var(--divider);
  padding: 6px;
  scrollbar-width: thin;
}

.changelog-container p {
  margin: 0 0 8px 0;
}

/* easter egg */

#evillink {cursor: pointer}
body.evilfont, body.evilfont button {font-family: 'Myvstrican2'}
body.evilfont main, body.evilfont button {font-size: 22px}
body.evilfont h1, body.evilfont h2 {font-family: 'Myvstrican2'; font-size: 30px}
body.evilfont h2 {font-size: 42px}
body.evilfont .mainheader {font-size: 22px}
body.evilfont .mainfooter {font-size: 14px}

/* ----------- THEMES ----------- */

.main-logo-dark {display: none}

/* DARK */

.dark {
  --main-bg: rgba(0, 0, 0, 0.95);
  --main-text: rgba(255, 255, 255, 0.8);
  --divider: #2f332d;
  --header-text: white;
  --accent-main: #346027;
}

.dark body {background: linear-gradient(black, 30px, rgba(0,0,0,0.5) 350px), url(/img/bg.png) repeat; background-attachment: fixed}

.dark .main-logo-dark {display: block}
.dark .main-logo-light {display: none}

.dark textarea {background: var(--main-bg); color: var(--main-text); border-color: var(--divider)}

/* DUSK */

.dusk {
  --main-bg: rgba(57, 54, 54, 0.95);
  --main-text: rgba(204, 199, 187, 0.8);
  --divider: #1e1e1c;
  --header-text: #e8dcd2;
  --accent-main: #50603e;
  --accent-dark: #767b52;
}

.dusk .mainheader {background-color: rgb(28, 27, 27); background-color: rgba(28, 27, 27, 0.93)}

.dusk body {background: linear-gradient(black, 30px, rgba(34, 29, 28, 0.62) 350px), url(/img/bg.png) repeat; background-attachment: fixed}

.dusk .main-logo-dark {display: block}
.dusk .main-logo-light {display: none}

.dusk textarea {background: var(--main-bg); color: var(--main-text); border-color: var(--divider)}

/* ----------- @MEDIA ----------- */

@media only screen and (max-width: 1100px) {
	.mainheader {height: auto}
	main {width: 95%}
}

@media only screen and (max-width: 720px) {
	#navtoggle {display: block}
	#links {display: none; width: 100%; flex-direction: column}
	.navlink {align-items: center; justify-content: center}
    .theme-dropdown-container a {align-items: center}
	/* .icongrid a {width: 33.3333%} */
	.thegangcol {width: 30%}
	.storesection .floatright {float: none; max-width: 50%}
	.storesection .floatleft {float: none; max-width: 50%}
	.fauna-img {max-width: 100% !important}
	.index-miv {float: none; margin: 0 auto; display: block; max-height: 450px}
}

@media only screen and (max-width: 500px) {
	.storesection .floatright {float: none; max-width: 80%}
	.storesection .floatleft {float: none; max-width: 80%}
}