@import "https://fonts.googleapis.com/css2?family=News+Cycle&family=Open+Sans+Condensed:wght@300&family=Poiret+One&family=Quicksand&display=swap";
:root {
	--color-white: #f5f5f5;
	--color-gray: #191a2c;
	--color-midnight: #19284f;
	--color-blue: #1261d1;
	--color-aqua: #05d9e8;
	--color-green: #20c997;
	--color-yellow: #defe47;
	--color-orange: #ff6e27;
	--color-purple: #af43be;
	--color-pink: #ff577d;
	--color-red: #f33;
	--color-error: #ff2a6d;
	--color-warning: #ffcc02;
	--color-success: #65dc98;
	--font-default: "News Cycle", sans-serif;
	--font-heading: "Quicksand", cursive;
	--font-description: "Open Sans Condensed", sans-serif;
	--font-poiret: "Poiret One", cursive;
	color: white;
}
.light-theme {
	--color-bg: #f5f5f5;
	--color-control-bg: #ffffff;
	--color-control-accent-bg: #dcdcdc;
	--color-control-focus-bg: #ffffff;
	--color-text: #191a2c;
	--color-badge: #191a2c;
	--color-badge-text: #f5f5f5;
}
.dark-theme {
	--color-bg: #191a2c;
	--color-control-bg: #303041;
	--color-control-accent-bg: #474756;
	--color-control-focus-bg: #5e5e6b;
	--color-text: #f5f5f5;
	--color-badge: #f5f5f5;
	--color-badge-text: #303041;
}
* {
	transition: 0.25s all linear;
	font-family: var(--font-default);
	user-select: none;
	color: white;
}
html,
body {
	margin: 0;
	height: 100%;
}
.centered-pen {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
	padding: 10px;
	text-align: center;
	overflow-y: auto;
}
.toggle > input[type="checkbox"] {
	display: none;
}
.toggle > label {
	cursor: pointer;
	position: relative;
	width: 100px;
	height: 35px;
	background-color: var(--color-control-bg);
	border-radius: 30px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
}
.toggle > label::after {
	content: "🌯";
	font-size: 25px;
	line-height: 35px;
	position: absolute;
	top: -2px;
	left: 5px;
	transition: 0.25s left linear;
}
.toggle > input[type="checkbox"]:checked + label {
	background-color: var(--color-success);
}
.toggle > input[type="checkbox"]:checked + label::after {
	content: "🌮";
	left: 62px;
}
.taco-signature {
	position: fixed;
	top: 5px;
	left: 50%;
	transform: translate(-50%);
	line-height: 30px;
	background-color: #fff;
	padding: 5px 10px;
	border-radius: 25px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
	font-family: var(--font-poiret);
	font-weight: 700;
	font-size: 18px;
}
.theme-changer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.theme-changer.active {
	display: flex;
}
.theme-changer .choice {
	animation: bounce 2s infinite;
}
body.dark-theme .theme-changer {
	background-color: #191a2c;
	color: #f5f5f5;
}
body.light-theme .theme-changer {
	background-color: #f5f5f5;
	color: #191a2c;
}
@keyframes bounce {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-30px);
	}
	60% {
		transform: translateY(-15px);
	}
}
.display-1,
.display-2,
.display-3,
.display-4 {
	font-family: var(--font-heading);
}
.lead {
	font-family: var(--font-description);
}
.badge {
	background-color: var(--color-badge);
	color: var(--color-badge-text);
}
.input-group-text {
	background-color: var(--color-control-accent-bg);
	color: var(--color-text);
	border-color: var(--color-control-accent-bg);
}
.form-control,
.form-select {
	background-color: var(--color-control-bg);
	color: var(--color-text);
	border-color: var(--color-control-accent-bg);
}
.form-control:focus {
	background-color: var(--color-control-focus-bg);
	color: var(--color-text);
}


/* Grid Basics */
.grid {
	display: grid;
	border-radius: 5px;
	grid-gap: 5px;
}

.grid div {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Grid Widths */
.gw-1 { grid-template-columns: repeat(1, 100%); }
.gw-2 { grid-template-columns: repeat(2, calc(100% / 2)); }
.gw-3 { grid-template-columns: repeat(3, calc(100% / 3)); }
.gw-4 { grid-template-columns: repeat(4, calc(100% / 4)); }
.gw-5 { grid-template-columns: repeat(5, calc(100% / 5)); }
.gw-6 { grid-template-columns: repeat(6, calc(100% / 6)); }
.gw-7 { grid-template-columns: repeat(7, calc(100% / 7)); }
.gw-8 { grid-template-columns: repeat(8, calc(100% / 8)); }
.gw-9 { grid-template-columns: repeat(9, calc(100% / 9)); }
.gw-10 { grid-template-columns: repeat(10, calc(100% / 10)); }
.gw-11 { grid-template-columns: repeat(11, calc(100% / 11)); }
.gw-12 { grid-template-columns: repeat(12, calc(100% / 12)); }
.gw-13 { grid-template-columns: repeat(13, calc(100% / 13)); }
.gw-14 { grid-template-columns: repeat(14, calc(100% / 14)); }
.gw-15 { grid-template-columns: repeat(15, calc(100% / 15)); }
.gw-16 { grid-template-columns: repeat(16, calc(100% / 16)); }
.gw-17 { grid-template-columns: repeat(17, calc(100% / 17)); }
.gw-18 { grid-template-columns: repeat(18, calc(100% / 18)); }
.gw-19 { grid-template-columns: repeat(19, calc(100% / 19)); }
.gw-20 { grid-template-columns: repeat(20, calc(100% / 20)); }

/* Grid Heights */
.gh-1 { grid-template-rows: repeat(1, 100%); }
.gh-2 { grid-template-rows: repeat(2, calc(100% / 2)); }
.gh-3 { grid-template-rows: repeat(3, calc(100% / 3)); }
.gh-4 { grid-template-rows: repeat(4, calc(100% / 4)); }
.gh-5 { grid-template-rows: repeat(5, calc(100% / 5)); }
.gh-6 { grid-template-rows: repeat(6, calc(100% / 6)); }
.gh-7 { grid-template-rows: repeat(7, calc(100% / 7)); }
.gh-8 { grid-template-rows: repeat(8, calc(100% / 8)); }
.gh-9 { grid-template-rows: repeat(9, calc(100% / 9)); }
.gh-10 { grid-template-rows: repeat(10, calc(100% / 10)); }
.gh-11 { grid-template-rows: repeat(11, calc(100% / 11)); }
.gh-12 { grid-template-rows: repeat(12, calc(100% / 12)); }
.gh-13 { grid-template-rows: repeat(13, calc(100% / 13)); }
.gh-14 { grid-template-rows: repeat(14, calc(100% / 14)); }
.gh-15 { grid-template-rows: repeat(15, calc(100% / 15)); }
.gh-16 { grid-template-rows: repeat(16, calc(100% / 16)); }
.gh-17 { grid-template-rows: repeat(17, calc(100% / 17)); }
.gh-18 { grid-template-rows: repeat(18, calc(100% / 18)); }
.gh-19 { grid-template-rows: repeat(19, calc(100% / 19)); }
.gh-20 { grid-template-rows: repeat(20, calc(100% / 20)); }

/* Upper Left Grid Corner */
.grid div:nth-child(1) { border-top-left-radius: 5px; }

/* Upper Right Grid Corner */
.gw-2 div:nth-child(2),.gw-3 div:nth-child(3),.gw-4 div:nth-child(4),
.gw-5 div:nth-child(5),.gw-6 div:nth-child(6),.gw-7 div:nth-child(7),
.gw-8 div:nth-child(8),.gw-9 div:nth-child(9),.gw-10 div:nth-child(10),
.gw-11 div:nth-child(11),.gw-12 div:nth-child(12),.gw-13 div:nth-child(13),
.gw-14 div:nth-child(14),.gw-15 div:nth-child(15)
{
	border-top-right-radius: 5px;
}

/* Lower Left Grid Corner */
.gh-2 div:nth-child(3),.gh-3 div:nth-child(7),.gh-4 div:nth-child(13),
.gh-5 div:nth-child(21),.gh-6 div:nth-child(31),.gh-7 div:nth-child(43),
.gh-8 div:nth-child(57),.gh-9 div:nth-child(73),.gh-10 div:nth-child(91),
.gh-11 div:nth-child(111),.gh-12 div:nth-child(133),.gh-13 div:nth-child(157),
.gh-14 div:nth-child(183),.gh-15 div:nth-child(211)
{
	border-bottom-left-radius: 5px;
}

/* Lower Right Grid Corner */
.gw-2 div:nth-child(4),.gw-3 div:nth-child(9),.gw-4 div:nth-child(16),
.gw-5 div:nth-child(25),.gw-6 div:nth-child(36),.gw-7 div:nth-child(49),
.gw-8 div:nth-child(64),.gw-9 div:nth-child(81),.gw-10 div:nth-child(100),
.gw-11 div:nth-child(121),.gw-12 div:nth-child(144),.gw-13 div:nth-child(169),
.gw-14 div:nth-child(196),.gw-15 div:nth-child(225)
{
	border-bottom-right-radius: 5px;
}