@font-face {
	font-family: "Victor Mono";
	src: url("../fonts/VictorMono-Regular.ttf");
}

@font-face {
	font-family: "Victor Mono Italic";
	src: url("../fonts/VictorMono-Italic.ttf");
}

:root {
	--bg-image: url("../images/ima_bg_00015_N-edit.png");
	--bg-color: rgb(255,252,237,0.9);
	--font-normal: "Victor Mono", sans-serif;
	--font-italic: "Victor Mono Italic", sans-serif;
	--font-size: 1.1rem;
	--main-color: #3caab8;
	--accent-color: #e3841e;
}

::selection {
	background-color: var(--accent-color);
	color: white;
}

body {
	background: var(--bg-image);
	font-family: var(--font-normal);
	font-size: var(--font-size);
	color: var(--main-color);
	margin: 0 auto;
}

#wrapper {
	margin: 0 auto;
	width: 700px;
	background: var(--bg-color);
	backdrop-filter: blur(5px);
	border-radius: 10px;
	padding: 1em;
}

hgroup > p {
	text-align: center;
	font-size: 1.2rem;
	margin: .5rem;
}

h1,h2,h3,h4 {
	margin: 0;
	color: var(--accent-color);
	font-family: var(--font-italic);
}

h1 {
	text-align: center;
	font-size: 3.1rem;
}

h2,h3,h4 {
	margin: 1rem 0 1rem 0;
}

i {
	font-family: var(--font-italic);
	font-style: normal;
	color: var(--accent-color);
}

iframe {
	margin: .5rem 0 .5rem 0;
}

details {
	margin-top: 1rem;
}

summary {
	cursor: pointer;
	color: var(--accent-color);
}

a:link, a:link:active, a:visited, a:visited:active {
	color: var(--accent-color);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:not(:is(:hover, :focus)) {
  text-decoration-color: 
    color-mix(in srgb, currentColor, transparent 45%);
}