/* keep it minimal! */

:root {
	--bg1: lighten(thistle);
	--background-gradient: linear-gradient(
		to bottom right,
		#ffe4de,
		#fff1ff,
		white,
		#ffe4de
	);
	--box-color: rgba(255, 255, 255, 0.2);
	--line-color: rgba(0, 0, 0, 0.2);
	/*--table-border-color: rgba(0, 0, 0, 0.1);*/
	/*--box-color: rgba(0, 0, 0, 0);*/

	--link-color: #0000ee;
	--link-color-hovered: #005cf0;
	/* --link-color-hovered:			rgb(100, 100, 255); */
	--link-color-visited: #5400a3;
	--link-color-hover-visited: #9300a3;
	/* --link-color-hover-visited: 	rgb(150, 100, 230); */

	font-family: monospace;
	font-size: 1.5em;
}

ul,
ol {
	margin-top: 0px;
}
ul > li {
	list-style-type: none; /* Remove bullets */
	border-bottom: 1px solid var(--line-color);
	padding: 5px;
}
ul > li:first-child {
	border-top: 1px solid var(--line-color);
}

ul.dated > li {
	margin-left: 10%;
	margin-right: 10%;
}

.fishcam {
	width: 480;
	height: 320;
}

p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.box > *:last-child {
	margin-bottom: 0px;
}

.box > *:first-child {
	margin-top: 0px;
}

body {
	background: var(--background-color1); /* fallback */
	background-image: url("/img/bg.webp"); /* fallback */
	background-image: url("/img/bg.webp"), var(--background-gradient);
	margin-left: 5vw;
	margin-right: 5vw;
	margin-top: 5vh;
	margin-bottom: 5vh;
}

@media (min-width: 700px) {
	body > .box {
		margin-left: 15%;
		margin-right: 15%;
	}
}

/* a {
	color: var(--link-color);
} */

a {
	display: inline-flex;
	transition: 0.2s;
	gap: 0.5em;
}

a:hover {
	scale: 1.1;
}

img {
	height: 15em;
	border-radius: 10px;
	border: 1px solid var(--line-color);
	overflow: scroll;
}

@media (max-width: 700px) {
	img {
		height: auto;
		width: 100%;
	}
}

.icon {
	border-radius: 0px;
	border: none;
}

a {
	text-decoration: none;
}

.content-title {
	color: black;
	font-weight: bold;
}

/* */
.box,
pre {
	background-color: var(--box-color); /* fallback */
	/* background: var(--box-gradient); */
	/* border-left: 1px solid black; */
	margin: 1rem;
	padding: 1rem;
	border-radius: 1em;
}

code:not(pre > code) {
	background-color: var(--box-color);
	padding: 2px;
}

/* table formatting */
/* table {
	border: 5px solid var(--box-color);
} */

table {
	display: block;
	overflow: scroll;
	border-collapse: collapse;
}

th,
td {
	background-color: var(--box-color);
	/*border: 1px solid var(--line-color);*/
	/*padding-left: 0.2em;
	padding-top: 0.2em;*/
	border-left: 1px solid var(--line-color);
	border-top: 1px solid var(--line-color);
	padding: 0.5em;
}

th:last-child,
td:last-child {
	border-right: 1px solid var(--line-color);
}
tr:last-child {
	border-bottom: 1px solid var(--line-color);
}

.gamelink {
	display: inline-flex;
	flex-direction: column;
	margin: 5px;
	width: 25%;
	background-position: center;
	background-size: contain;
	background-repeat: space;
	height: 180px;
	width: 220px;
	background-color: var(--line-color);
	/*border: 1px solid var(--line-color);*/
	transition: 0.2s;
}

.gamelink:hover {
	scale: 1.05;
}