:root {
	--primary-color: #8756EA;
	--secondary-color: #553497;
	--text-color: #0d0d0d;
}

* {
	font-family: "SN Pro", sans-serif;
}
html {
	background: linear-gradient(180deg, 
	#e5e0ee, #c8c6ce);
}
body {
	background: linear-gradient(180deg, 
	#e5e0ee, #c8c6ce);
	color: var(--text-color);
	min-height: 100vh;
	height: 100%;
	padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

hr {
	border-color: var(--primary-color);
	border-width: 2px;
	border-radius: 12px;
	opacity:.4;
}

.text-primary {
	color: var(--primary-color) !important;
}
.text-secondary {
	color: var(--secondary-color) !important;
}

.bg-primary {
	background-color: var(--primary-color);
}
.bg-secondary {
	background-color: var(--secondary-color);
}

.border-primary {
	border-color: var(--primary-color);
}
.border-secondary {
	border-color: var(--secondary-color);
}

.button-hover {
	transition: all 0.1s linear;
}
.button-hover:hover {
	background-color: #6d46bd;
	border-color: #4e308b;
}

.bg-pattern {
	background: url("../img/littleguy_pattern.png");
	background-size: 28px;
	background-color: var(--primary-color);
	background-position-y: 2px;
	animation: slide 30s linear infinite;
}

@keyframes slide {
  from {
    background-position: 0px 2px;
  }
  to {
    background-position: -280px 2px;
  }
}


.text-working-currently {
	color: #E4B953;
}

.bg-yellow {
	background-color: #E4B953;
}
.border-yellow-dark {
	border-color: #c59f47;
}

.currently-working-legend {
	background-color: #E4B953;
	padding: 0px 10px;
	border: 2px solid #c59f47;
	display: inline;
	margin-right: 3px;
	border-radius: 8px;
}

.todo-legend {
	background-color: oklch(55.6% 0 0);
	padding: 0px 10px;
	border: 2px solid oklch(45.678% 0.00005 271.152);
	display: inline;
	margin-right: 3px;
	border-radius: 8px;
}