/*font import*/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*normalization*/
body {
	padding: 0;
	margin: 0;
	font-family:
		'Lato',
		Arial,
		Segoe UI,
		sans serif;
}

/*some fun*/
* {
	transition:
		color ease 0.2s,
		background-color ease 0.2s;
}

/*theme setup*/
:root {
	--bg-color: #fafafa;
	--text-color: #090909;
	--anchor-color: #005ab3;
	--highlight-color: #0066cc;
}

html[data-color-scheme='dark'] {
	--bg-color: #090909;
	--text-color: #fafafa;
	--anchor-color: #ffffff;
	--highlight-color: #0099ff;
}

body {
	background-color: var(--bg-color);
	color: var(--text-color);
}

h1 {
	color: var(--text-color);
}

::-moz-selection /* FireFox */ {
	color: var(--highlight-color);
	background: var(--highlight-bg);
}

::selection {
	color: var(--highlight-color);
	background: var(--highlight-bg);
}

/*the Dark Mode Switch*/
label {
	position: absolute;
	right: 20px;
	top: 50%;
	--c: translate(-50%, -50%);
	transform: var(--c);
}

.switch {
	position: relative;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
}

label > input {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	opacity: 0;
	width: 100%;
	height: 100%;
}

.switch span {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: var(--c);
	border-radius: 50%;
	width: 70%;
	height: 70%;
	background: #ffac33;
	border: 5px solid white;
	transition: all ease 0.15s;
}

.switch div {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.switch div::before,
.switch div::after {
	content: ' ';
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: var(--c);
	background: #ffac33;
	width: 12%;
	height: 130%;
	border-radius: 10px;
	transition: all ease 0.15s;
}

.switch div:nth-child(1)::before {
	transform: var(--c) rotate(0deg);
}

.switch div:nth-child(1)::after {
	transform: var(--c) rotate(45deg); /*45deg increment each time*/
}

.switch div:nth-child(2)::before {
	transform: var(--c) rotate(90deg);
}

.switch div:nth-child(2)::after {
	transform: var(--c) rotate(135deg);
}

.switch::before,
.switch::after {
	content: ' ';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: var(--c);
	border-radius: 50%;
	background: white;
	transition: all ease 0.15s;
}

.switch::before {
	width: 0%;
	height: 0%;
	z-index: 10;
}

.switch::after {
	width: 50%;
	height: 50%;
}

input:checked ~ .switch span {
	width: 100%; /*width change*/
	height: 100%; /*height change*/
	background: #66757f; /*color change*/
	/*we get a full moon*/
}

input:checked ~ .switch div::before,
input:checked ~ .switch div::after {
	height: 50%; /*we hide the sun-rays*/
}

input:checked ~ .switch::before {
	/*we draw a white circle a left-top corner to show a half moon*/
	left: 30%;
	top: 30%;
	width: 90%;
	height: 90%;
}

input:checked ~ .switch::after {
	/*we hide the sun outline*/
	width: 0%;
	height: 0%;
}

input:not(:checked) ~ .switch {
	transform: rotate(180deg);
	transition: all ease 2.15s 0.1s;
}

/*other styles*/
main {
	line-height: 1.4em;
}

.container,
.post-container {
	position: relative;
}

.container {
	padding: 40px;
}

.sticky {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background-color: white;
	box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.4);
	z-index: 100;
}

.stickytext {
	color: black;
	font-size: 22px;
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
	padding-bottom: 5px;
}