/* style.css - Fragments from wordpress (twentytwentythree), bootstrap, Lucas Bebber (glitched text), R. Flack M. et Valipour (scrollsnap web.dev) */
@charset "UTF-8";

:root {
	--font-sans-serif:-apple-system,
	BlinkMacSystemFont,
	"Segoe UI",
	Roboto,
	Oxygen-Sans,
	Ubuntu,
	Cantarell,
	"Helvetica Neue",
	sans-serif;
	--font-size-medium:clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.24), 1.125rem);
	--bar-height:calc(2.719rem, 2.719rem + ((1vw - 0.48rem) * 1.742), 3.625rem);
	--extra-space:60px;
}
html {
	height:100%;
	box-sizing:border-box;
}
body {
	display:grid;
	grid-template-rows: auto 1fr auto;
	height:100vh;
	padding:0;
	margin:0;
	overflow:hidden;
	font-family:var(--font-sans-serif);
	font-size:var(--font-size-medium);
	font-weight:400;
	line-height:1.5;
	color:#212529;
	text-align:var(--bs-body-text-align);
	background-color:var(--bs-body-bg);
	-webkit-text-size-adjust:100%;
	-webkit-tap-highlight-color:transparent
}
* {
	margin: 0;
	padding: 0;
	box-sizing:border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight:400;
	line-height:1.4;
	margin-top:0;
	margin-bottom:.5rem;
}
h1 {
	font-size:clamp(2.719rem, 2.719rem + ((1vw - 0.48rem) * 1.742), 3.625rem);
	line-height:1.2;
}
h2 {
	font-size:clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem);
	line-height:1.2;
}
h3 {
	font-size:2.25rem;
}
h4 {
	font-size: clamp(1.75rem, 1.75rem + ((1vw - 0.48rem) * 0.24), 1.875rem);
}
h5 {
	font-size:var(--font-size-medium);
	font-weight:700;
	text-transform:uppercase;
}
h6 {
	font-size:var(--font-size-medium);
	text-transform:uppercase;
}
.article-mp-main {
	position:absolute;
	bottom:26vh;
	width:50vw;
	left:2em;
	/*
	height: 100vh;
	width: 50vw;
	padding: 100vh 2em;
 scroll-snap-align: start;
	position:-webkit-sticky;
	position:sticky;
	bottom:4rem;
	align-self:flex-end;*/
}
section {
	display:flex;
 flex-direction: column;
 justify-content: center;
}

#div-mainpage {
	min-height:100vh;
	overflow:scroll;
	scroll-snap-type:y proximity;
	scroll-padding-top: calc(var(--bar-height) + var(--extra-space));

	position: absolute;

	top:0;
	bottom:0;
	left:0;
	right:0;
	padding: var(--bar-height) 0 0 0;
	-webkit-overflow-scrolling: touch;
}

#header-mainpage {
	top: 3rem;
	left: 3rem;
	width: 2rem;
}
.div-mp-one-large {
	scroll-snap-align: start;
	position:-webkit-sticky;
	position:sticky;
	height:100vh;
	justify-content: space-around;
	align-items: flex-start;
}
#footer-mainpage {
	bottom:0;
	left:0;
	width:100%;
	padding:6vh;
	margin-bottom:2rem;
	background-color:#010101;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	scroll-snap-align:end;
}

#div-footer-mp-left {
	width: 33.33333333%;
	flex:0 0 auto;
	display:flex;
	align-items:center;
	white-space: nowrap;
}
#a-footer-mp-icon {
	margin-right:.5rem;
	color:#6c757d;
	line-height:1;
	display:block;
}
#p-footer-mp-cpr {
	color:#6c757d;
	display:block;
}
#ul-footer-mp-menu {
	width: 33.33333333%;
	flex:0 0 auto;
	justify-content:flex-end;
	display:flex;
	flex-wrap:wrap;
	padding-left:0;
	margin-bottom:0;
	list-style:none;
}

.li-footer-mp-menu {
	list-style:none;
}
.a-footer-mp-menu {
	color:#f2f2f2;
	text-decoration:none;
	display:block;
	padding-right:.5rem;
	padding-left:.5rem;
}
.glitch {
	position:relative;
}
.glitch:hover::before {
	content: attr(data-content);
	position: absolute;
	padding-right: .5rem;
	padding-left: .5rem;
	top: 0;
	left: -2px;
	text-shadow: 1px 0 1px blue;
	color: #f2f2f2;
	background: black;
	opacity: 0.5;
	clip-path: inset 0 100% 0 100%;
	animation: noise-anim-2 2s infinite linear alternate-reverse;
}
.glitch:hover::after {
	content: attr(data-content);
	position: absolute;
	top: 0;
	left: 2px;
	padding-right: .5rem;
	padding-left: .5rem;
	text-shadow: -1px -2px 1px white;
	color: #f2f2f2;
	opacity: 0.8;
	background: black;
	clip-path: inset 0 100% 0 100%;
	animation: noise-anim 1s infinite linear alternate-reverse;
}
@keyframes noise-anim {
	0% {
		clip-path: inset 47% 100% 84% 100% ;
	}
	16.66667% {
		clip-path: inset 54% 100% 99% 100%;
	}
	33.33333% {
		clip-path: inset 62% 100% 29% 100%;
	}
	50% {
		clip-path: inset 42% 100% 27% 100%;
	}
	66.66667% {
		clip-path: inset 56% 100% 50% 100%;
	}
	83.33333% {
		clip-path: inset 90% 100% 52% 100%;
	}
	100% {
		clip-path: inset 8% 100% 27% 100%;
	}
}
@keyframes noise-anim-2 {
	0% {
		clip-path: inset 61% 100% 85% 100%;
	}
	16.66667% {
		clip-path: inset 18% 100% 84% 100%;
	}
	33.33333% {
		clip-path: inset 6% 100% 23% 100%;
	}
	50% {
		clip-path: inset 72% 100% 55% 100%;
	}
	66.66667% {
		clip-path: inset 24% 100% 93% 100%;
	}
	83.33333% {
		clip-path: inset 39% 100% 83% 100%;
	}
	100% {
		clip-path: inset 90% 100% 62% 100%;
	}
}

li a {
	color: green;
}