*{
	box-sizing:border-box;
}
a{
	color:hsl(150,50%,50%);
}
body{
	font-family:sans-serif;
	background-color:#fff;
	color:#000;
}
body.darkmode{
	background-color:#000;
	color:#fff;
}

header .darkmode{
	position:absolute;
	right:2rem;
	top:2rem;
	width:4rem;
	height:1.5rem;
	border-radius:500px;
	border:2px solid #888;
	background-color:transparent;
	cursor:pointer;
	appearance:none;
}
header .darkmode::before{
	content:'';
	position:absolute;
	left:4px;
	top:50%;
	width:1rem;
	height:1rem;
	background-color:#888;
	border-radius:50%;
	transform:translateY(-50%);
}
header .darkmode.active::before{
	left:auto;
	right:4px;
}

main{
	padding:6rem;
}