*
{
	transition: 0.3s ease;
}

html, body
{
	margin: 0;
	padding: 0;
}

body
{
	background: #000 url(../img/background.webp) fixed;
	background-size: max(100vw, 100vh) max(100vw, 100vh);
	background-position: 50% 80%;
}

a
{
	text-decoration: none;
}

main
{
	background: transparent;
	min-height: 90vh;

	margin: 0;
	padding: 1vh;

	display: grid;
	grid-template-areas: "nav" "content" "footer";
	grid-template-rows: min-content auto min-content;
	gap: 2vh;

	justify-content: center;
	align-content: center;
}

nav, #content, footer
{
	display: flex;

	padding: 1vh;
	gap: 1vh;

	width: 90vw;
	max-width: 130vh;

	background: #fff7;
	backdrop-filter: contrast(133%) saturate(80%) blur(3vh);

	border-radius: 1.5vh;
	border: solid 0.5vh #fff3;

	box-shadow: 0 0 2.2vh #0003;
}

nav, .navsect, footer
{
	display: flex;

	flex-direction: row;

	align-items: center;
	justify-content: center;

	flex-wrap: wrap;

	padding: 1vh;
}

nav
{
	grid-area: nav;
}

#content
{
	flex-direction: column;
	grid-area: content;

	padding-bottom: 2vh;
}

footer
{
	grid-area: footer;
}


.cols
{
	display: grid;
	width: 100%;
	gap: 1vh;
	grid-template-columns: repeat(auto-fit, minmax(37vh, 1fr));
}

.col
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: start;

	padding: 1vh;
	gap: 1vh;
}

.horiz
{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

	flex-wrap: wrap;
	flex-grow: 1;
}


h1, h2, h3, h4, h5, h6, p, .link, button
{
	color: #000;
	font-family: "Cascadia Code", "Menlo", "JetBrains Mono", "Noto Sans Mono", "Monaco", "Consolas", "Liberation Mono", Lato, Helvetica, "Noto Sans", "Segoe UI", sans-serif, monospace;
	line-height: 1.2em;
	text-shadow: 0 0 1.8vh #fff6;
        outline: none;
}

h2, h3, h4, h5, h6, p
{
	margin: 0.5vh 1.5vh;
}

h1
{
	font-size: 5vh;
	font-weight: 400;

	margin: 0.8vh 1.2vh;
	padding: 0.4vh 1.7vh;
        border-bottom: 0.4vh;

	background-color: #fff3;
	box-shadow: 0 1vh 1vh #00000008;
}

h2
{
	font-size: 3.5vh;
	font-weight: 600;
}

h3
{
	font-size: 2.5vh;
	font-weight: 800;
}

h4
{
	font-size: 2.75vh;
	font-weight: 700;
}

h6
{
	font-size: 1.75vh;
	font-weight: 500;
}

p
{
	font-weight: 500;
	font-size: 2.5vh;	

	flex-grow: 1;
}

.pbox
{
	padding: 1vh 1.5vh;
	padding-right: 2vh;
	margin: 1vh;

	border-left: solid 0.5vh #0006;
	border-radius: 1vh;

	background: #fff4;

	box-shadow: 0 0 1.25vh #00000019;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}

.link
{
	text-decoration: underline;
}

h1:hover
{
	letter-spacing: 0.1em;

	margin: 1.2vh 1.2vh;
	padding: 0 1.7vh;
}

h2:hover
{
	letter-spacing: 0.08em;
}

h3:hover
{
	letter-spacing: 0.07em;
}

h6:hover
{
}

.pbox:hover
{
	padding-left: 2vh;
	padding-right: 1.5vh;
}

.link:hover
{
	letter-spacing: 0.01em;
}


button
{
	border: solid 0.5vh #0001;
	background: #fff4;

	border-radius: 2vh;
	padding: 1vh 1.5vh;
	margin: 1vh;

	font-weight: 600;
	font-size: 2.25vh;	

	box-shadow: 0 0 1.25vh #00000019;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

	font-weight: 550;
}

button:hover
{
	padding: 1vh 2vh;
	margin: 1vh 0.5vh;
}

.link:hover, button:hover
{
	filter: invert(20%) brightness(110%) sepia(100%) saturate(300%) hue-rotate(220deg);
}


.icon48
{
	width: 8vh;
	height: 8vh;
	border-radius: 100vh;
}

.icon16
{
	width: 2.66vh;
	height: 2.66vh;
	border-radius: 100vh;
}

.icontxt, .icontxtc
{
	width: 0.8em;
	height: 0.8em;
	/*border-radius: 100vh;*/
    margin-right: 0.5vh;
}

.icontxt
{
    filter: contrast(1000%) saturate(0);
}

.vspace
{
	width: 3vw;
}