* { margin: 0; padding: 0 }

html, body, h1 { display: grid }

html {
  min-height: 100%;
  color-scheme: light dark
}

body {
	grid: max-content 1fr max-content/ min(35em, 100%);
	justify-content: center;
	overflow-x: hidden;
	padding: .5em;
	background: light-dark(#ededed, #121212);
	color: light-dark(#212121, #dedede);
	font: clamp(1em, 3vw, 1.75em)/ 1.375 ubuntu, trebuchet ms, arial, sans-serif
}

header, footer { text-align: center }

main { align-self: center }

footer {
    font-size: max(.874rem, .75em);
  
	ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		list-style: none;
		padding-bottom: .5em
	}
	
	li { padding: 0 .5em }
}

h1 { font-size: 4em }

a {
	display: inline-block;
	position: relative;
	padding: 0 1px 1px;
	background: linear-gradient(16deg, #f5a46b, #f872aa, #f5bcf1) text;
	color: transparent;
	text-decoration: none;
	
	&::after {
		position: absolute;
		inset: 0;
		background-image: inherit;
		clip-path: inset(calc((1 - var(--hl, 0))*(100% - 2px)) 0 0);
		mix-blend-mode: difference;
		transition: clip-path .35s;
		content: ''
	}
	
	&:focus { outline: none }
	&:hover, &:focus { --hl: 1 }
}