* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	text-align: center;
	background: #fafafa;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: #222222;
}
header {
	position: fixed;
	background: #fafafa;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 40px;
	gap: 20px;
	line-height: 1;
	border-bottom: 1px solid #eee;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01);
	z-index: 1000;
}

footer {
	height: 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40px;
	line-height: 1;
	border-top: 1px solid #dddddd;
}
.workspace {
	height: 100vh;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.card-container {
	width: 50%;
	aspect-ratio: 5 / 3;
	perspective: 1000px;
	z-index: 1;
}
.card {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s ease;
}
.front, .back {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 40px;
	backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 1px solid #eeeeee;
	gap: 5px;
}
.front {
	background: #ffffff;
	transform: rotateY(0deg);
}
.back {
	background: #ffffff;
	transform: rotateY(180deg);
}
.card.flipped {
	transform: rotateY(180deg);
}
.button-container {
	display: flex;
	flex-direction: row;
	gap: 20px;
	z-index: 0;
}
button {
	background: #1e96fc;
	color: #eee;
	font-family: "Geist Mono", monospace;
	padding: 10px;
	border-radius: 8px;
	border: none;
	outline: none;
	cursor: pointer;
	
}
.button-plain {
	background: none;
	padding: 0;
	border-radius: 0;
}

p {
	font-size: 12px;
	color: #808080;
}

h1 {
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
}

h2 {
	font-family: inherit;
	font-size: 48px;
	font-weight: 500;
}

.title-sep {
	font-family: inherit;
	font-size: inherit;
	font-weight: 300;
	color: #dddddd;
	margin: 0 6px;
}
.material-symbols-rounded {
  color: #808080;
}
a {
	text-decoration: none;
	color: inherit;
}
a:hover {
	text-decoration: none;
	color: #1e96fc;
}
.title-mobile {
	display: none;
}
@media (max-width: 500px) {
	.card-container {
		width: 75%;
		aspect-ratio: 3 / 5;
	}
	.card {
		border-radius: 20px;
	}
	footer {
		justify-content: center;
		flex-direction: column;
		gap: 20px
	}
	.spacer {
		height: 20px;
	}
	.title-desktop {
		display: none;
	}
	.title-mobile {
		display: inline;
	}
}
.fade-up {
	opacity: 0;
	transform: translateY(10px);
	animation: fadeUp 0.6s ease forwards;
	animation-delay: calc(var(--i) * 0.1s);
}
@keyframes fadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.fade-up-header {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  animation: fadeUpHeader 0.6s ease forwards;
  animation-delay: calc(var(--i) * 0.1s);
}

@keyframes fadeUpHeader {
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* DARK MODE */

body.dark {
  background: #111111;
  color: #eeeeee;
}

body.dark header, body.dark footer {
  border-color: #333333;
}

body.dark header {
	background: #1a1a1a;
}

body.dark .card .front, body.dark .card .back {
  background: #222222;
  border-color: #333333;
  color: #eeeeee;
}

body.dark button {
  background: #222222;
  color: #eeeeee;
}
body.dark .button-plain {
	background: none;
}

body.dark .material-symbols-rounded {
  color: #808080;
}

body.dark h3, body.dark h5 {
  color: #808080;
}

body.dark h4 {
	color: #555555;
}

 body.dark h6 {
  color: #333333;
}
body.dark .title-sep {
	color: #333333;
}

body.dark .header-island {
  background: rgba(20, 20, 20, 0.9);
}

@media (max-width: 500px) {
  body.dark .card-container {
    width: 75%;
    aspect-ratio: 3 / 5;
  }
  body.dark .card {
    border-radius: 20px;
  }
  body.dark footer {
		justify-content: center;
		flex-direction: column;
		gap: 20px
	}
}