:root {
	--rp-base: #191724;
	--rp-surface: #1f1d2e;
	--rp-overlay: #26233a;
	--rp-muted: #6e6a86;
	--rp-subtle: #908caa;
	--rp-text: #e0def4;
	--rp-love: #eb6f92;
	--rp-gold: #f6c177;
	--rp-rose: #ebbcba;
	--rp-pine: #31748f;
	--rp-foam: #9ccfd8;
	--rp-iris: #c4a7e7;
	--rp-highlight-low: #21202e;
	--rp-highlight-med: #403d52;
	--rp-highlight-high: #524f67;

	--rp-moon-base: #232136;
	--rp-moon-surface: #2a273f;
	--rp-moon-overlay: #393552; 
	--rp-moon-muted: #6e6a86;
	--rp-moon-subtle: #908caa;
	--rp-moon-text: #e0def4;
	--rp-moon-love: #eb6f92;
	--rp-moon-gold: #f6c177;
	--rp-moon-rose: #ea9a97;
	--rp-moon-pine: #3e8fb0;
	--rp-moon-foam: #9ccfd8;
	--rp-moon-iris: #c4a7e7;
	--rp-moon-highlight-low: #2a283e;
	--rp-moon-highlight-med: #44415a;
	--rp-moon-highlight-high: #56526e;

	--rp-dawn-base: #faf4ed;
	--rp-dawn-surface: #fffaf3;
	--rp-dawn-overlay: #f2e9e1;
	--rp-dawn-muted: #9893a5;
	--rp-dawn-subtle: #797593;
	--rp-dawn-text: #575279;
	--rp-dawn-love: #b4637a;
	--rp-dawn-gold: #ea9d34;
	--rp-dawn-rose: #d7827e;
	--rp-dawn-pine: #286983;
	--rp-dawn-foam: #56949f;
	--rp-dawn-iris: #907aa9;
	--rp-dawn-highlight-low: #f4ede8;
	--rp-dawn-highlight-med: #dfdad9;
	--rp-dawn-highlight-high: #cecacd;
	--nav-height: 80px;
	--nav-final-width: 750px;

	--radius-top-left: 40px;
	--radius-top-right: 40px;
	--radius-bottom-right: 40px;
	--radius-bottom-left: 40px;

	--nav-bg: #111;
	--nav-text: #fff;
}

body {
	margin: 0;
	font-family: "Mulish", Helvetica, Arial, sans-serif;
}


.button-bar {
    width: fit-content;
    margin: 40px auto;
    padding: 10px 20px;
    background-color: var(--rp-moon-surface);
    border-radius: 9999px;

    display: flex;
    gap: 12px;
}
.button-bar button {
	border-radius: 9999px;
	border: none;
	outline: none;
	font-family: "Mulish", Helvetica, Arial, sans-serif;
	font-weight: 600;
	cursor: pointer;
	color: var(--rp-moon-text);
	background-color: var(--rp-moon-muted);
	padding: 8px 16px;
	transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1), 
    background-color 0.2s ease;
}
.button-bar button:hover {
	background-color: var(--rp-moon-subtle);
	transform: translateY(-2px);
}