@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Emblema+One&family=Magra:wght@400;700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Ruluko&family=Wix+Madefor+Display:wght@400..800&family=Zen+Antique+Soft&display=swap');
:root {
	 color-scheme: dark;
    --font-default: "Roboto", sans-serif;
    --font-heading: "Roboto", sans-serif;
    --font-highlight: "Roboto", sans-serif;
    --font-note: "Roboto", sans-serif;
    --font-accent: "Roboto", sans-serif;
    --font-fantasy: "Roboto", sans-serif;
    --font-material-symbols: 'Material Symbols Outlined';


	--size-tiny: 2px;
	--size-small: 5px;
	--size-smaller: 7px;
	--size-default: 10px;
	--size-larger: 15px;
	--size-large: 20px;
	--rel-size-x-s: 20rem;
	--rel-size-small: 24rem;
	--rel-size-medium: 28rem;
	--rel-size-large: 32rem;
	--rel-size-x-l: 36rem;
	--rel-size2-x-l: 42rem;
	--rel-size3-x-l: 48rem;
	--rel-size4-x-l: 56rem;
	--rel-size5-x-l: 64rem;
	--rel-size6-x-l: 72rem;
	--rel-size7-x-l: 80rem;
	--rel-size-full: 100%;
	--rel-size-prose: 65ch;
	--default-color: canvas;
	--default-text-color: #751401;
	--border-color: lightgray;
	--header-color: #035946;
	--header-text-color: #751401;
	--accent-color: blue;
	--accent-text-color: white;
	--note-color: #ffffe0;
	--note-text-color: ;
	--warning-color: #FFC107;
	--warning-text-color: darkgray;
	--selection-color: highlight;
	--selection-text-color: highlightText;
	--hover-color: #A0A0A010;
	--hover-text-color: red;
	--stop-color: red;
	--stop-text-color: white;
	--go-color: green;
	--go-text-color: white;
	--accept-color: blue;
	--accept-text-color: white;
	--reject-color: red;
	--reject-text-color: white;
	--font-size-small: 0.8125em;
	--command-bg-color: #F0F0F0;
	--menu-bg-color: #808080;
	--menu-color: #243305;
	--link-color: var(--default-text-color, blue);
	--primary-background: #dddddd23;
	--primary-color: #54595F;
	--primary-accent: #54595F;
	--primary-accent-text: white;
	--primary-surface: #FFFFFFA0;
	--primary-surface-text: gray;
	--surface-text-color: white;
	--secondary-background: #00808050;
	--secondary-color: gray;
	--secondary-accent: #9ec93ca8;
	--secondary-accent-text: white;
	--secondary-surface: #FFFFFFA0;
	--secondary-surface-text: gray;
	--tertiary-background: #cfa55c87;
	--tertiary-color: gray;
	--tertiary-accent: #e17b42cf;
	--tertiary-accent-text: white;
	--tertiary-surface: #FFFFFFA0;
	--tertiary-surface-text: gray;
	--body-color: white;
	--form-button-background: #751401;
	--form-button-text: #FDC100;
	
}

html,
body {
	padding: 0 !important;
	margin: 0 !important;
	background-color: #ffe3bc;
}

body > [styler-layout=main] {
	padding: 0 !important;
	margin: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


a {
	color: var(--link-color);
}

[styler-layout=main] {
	gap:0 !important;
}

menu-bar>input:first-of-type~* {
	row-gap: 2vw !important;
	column-gap: 2vw !important;
	font-size: 18px;
	
}
menu-bar>input:first-of-type~nav {
	background-color: #751401;
}

/* WhatsApp Button Styling */
.whatsapp-button {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;
	background-color: #25d366;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

.whatsapp-button img {
	width: 30px;
	height: 30px;
}

.whatsapp-button:hover {
	background-color: #1ebe57;
}