@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

:root {
  --main-dark-grey-color: #1f1f1f;
  --main-grey-color: #454545;
  --main-white-color: #eee;
  --main-orange-color: #e38b1b;
  color: var(--main-grey-color);
  background-color: var(--main-white-color);
}
body {
    font-family: "Playfair Display", "Times", sans-serif;
    font-size: 1.2rem;
    line-height: 1.5;
    padding: 1em;
    margin: auto;
    max-width: 40rem;
}

.dark-mode {
  background-color: var(--main-dark-grey-color);
  color: var(--main-white-color);
}

h1, h2 {
  font-family: "Impact", serif;
  font-weight: normal;
  font-size: 3rem;
  letter-spacing: 0.1rem;
  margin: 0.5rem 0;
}

h2 {
  font-size: 2rem;
}

header {
  text-align: center;
}

header h1 a {
  color: var(--main-orange-color);
  text-decoration: none;
}

header h1 a:visited {
  color: var(--main-orange-color);
}

.bio-wave {
  display: inline-block;
}

.bio-wave:hover {
  cursor: default;
  animation: wave 1s 1;
}

.toggle {
	cursor: pointer;
	display: inline-block;
}
.toggle-switch {
	display: inline-block;
	background: #ccc;
	border-radius: 16px;
	width: 58px;
	height: 32px;
	position: relative;
	vertical-align: middle;
	transition: background 0.25s;
	&:before,
	&:after {
		content: "";
	}
	&:before {
		display: block;
		background: linear-gradient(to bottom, #fff 0%,#eee 100%);
		border-radius: 50%;
		box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
		width: 24px;
		height: 24px;
		position: absolute;
		top: 4px;
		left: 4px;
		transition: left 0.25s;
	}
	.toggle:hover &:before {
		background: linear-gradient(to bottom, #fff 0%,#fff 100%);
		box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
	}
	.toggle-checkbox:checked + & {
		background: var(--main-orange-color);
		&:before {
			left: 30px;
		}
	}
}
.toggle-checkbox {
	position: absolute;
	visibility: hidden;
}
.toggle-label {
	margin-left: 5px;
	position: relative;
	top: 2px;
}

a {
  color: var(--main-orange-color);
}

a:visited {
  color: var(--main-orange-color)
}

a:hover {
  text-decoration: none;
}

nav ul {
  margin: 3rem 0 0 0;
  list-style-type: none;
}

nav li {
  display: inline-block;
}

nav a {
  color: var(--main-grey-color)
}

nav a:visited {
  color: var(--main-grey-color)
}

figure {
  margin: 2em 0;
}

figure img {
  max-width: 100%;
}

footer {
  font-size: 1rem;
  text-align: center;
  margin: 0.5em 0;
}

footer ul {
  padding: 0;
}

footer li {
  display: inline-block;
  text-decoration: none;
  margin-right: 10px;
}

.note {
  font-style: italic;
  font-size: 80%;
}

@keyframes wave {
  25%{transform: rotate(-10deg);}
  50%{transform: rotate(10deg);}
  75%{transform: rotate(10deg);}
  75%{transform: rotate(-10deg);}
}

/* @media (prefers-color-scheme: dark) {
  body {
    background-color: var(--main-dark-grey-color);
    color: var(--main-white-color);
  }
} */