:root{
  --text: #333;
  --color: #111;
	--background: #FAFAFA;
}

@media (prefers-color-scheme: dark) {
	:root {
		--text: #FAFAFA;
    --color: #FFF;
		--background: #333;
	}
}


body{margin-left:1rem;margin-bottom:10rem;background:var(--background);color:var(--color)}
header,main{max-width:800px;width:95%;margin-bottom:4rem}
h1,h2{font-family: Arial,sans-serif}
aside{margin-top:3em}
h2,h3,header p{color:var(--text);opacity:0.8}
a,a:active,a:visited{text-decoration:none;color:var(--color)}
li a:focus,li a:hover{text-decoration:underline}
li{line-height:1.5em}

.center{text-align:center}
header{text-align:center;position:relative}
h1 {font-size:5rem;text-align:justify;line-height:1.5ch;letter-spacing:1px}
header p{font-variant-caps: all-small-caps;font-weight:bold;text-align:center;font-size:1.5em;color:var(--text)}
img{max-width:99%;width:500px;filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg) invert()}
hr{width:20%;margin:3rem auto}

h2{font-size:3rem;margin-top:2em;text-align:right}
main p{font-family:'Times New Roman', serif;font-size:1.26rem;line-height:1.7rem;letter-spacing:0.25px}
h2 a{position:relative}
h2 a,h2 a:active,h2 a:visited{color:var(--text);text-decoration:none}
h2:focus,h2:hover{opacity:1}
h2 a:focus,h2 a:hover{text-decoration:overline;outline:unset}

ol li::after{content:'\1F517';margin-left:1ch;filter: grayscale() contrast(0.5)}
h2 a:hover::after,h2 a:focus::after{position:absolute;top:0;right:-4rem;content:'\1F517';filter:grayscale() contrast(0.5)}
p a{text-decoration:underline}

@media screen and (max-width:1000px) {
  h1{font-size:3rem;top:1em; transform:unset};
  h2 a:hover::after,h2 a:focus::after{content: ''}
}