@import url(style.css);

:root {
	--max-width: 40vw;
}

body {
	color: var(--main);
	background-image: url(../assets/bg-pattern-transp.png);
	background-color: var(--comp2);
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

h1 {
	color: var(--primary2);
	text-decoration-color: var(--primary2);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	margin: 10px 20px;
	text-decoration: underline;
}

h2 {
	color: var(--primary1);
	margin: 20px;
	font-family: poppins-light, var(--fonts);
}

a {
	color: var(--comp4);
}

main {
	display: flow-root;
	max-width: var(--max-width);
	background: var(--comp3);
	margin: auto;
	list-style-position: inside;

	li {
		&::marker {
			content: "⟡ - ";
			color: var(--primary2);
		}
		&:hover {
			&::marker {
				color: var(--primary1);
			}
		}
	}

	p {
		margin: 15px;
	}

	img.pagedoll {
		float: left;
		shape-outside: url(../assets/v-wine.png);
		shape-image-threshold: 0;
		shape-margin: 10px;
		width: 90%;
		margin-left: -160px;
	}
}

footer,
header {
	margin: 10px auto;
	padding: 10px;
	min-height: 50px;
	background-color: var(--primary2);
	max-width: var(--max-width);
}

footer {
	text-align: center;
	margin-bottom: 40px;
}

header {
	color: var(--comp3);
	margin-top: 40px;
	a {
		color: var(--comp3);
	}
}