* {
  box-sizing: border-box;
}

:root {
	--color-brand: #ff9900;
	--color-white: white;
	--color-black: black;
	--bg-gradient: conic-gradient(rgba(223,153,56,1), rgba(0,90,107,1), rgba(52,138,93,1), rgba(173,43,52,1), rgba(223,153,56,1));
}

[class*="theme-"] {
	background: var(--bg);
	color: var(--text);
}

body {
	--text: var(--color-white);
	--heading: var(--color-white);
	--bg: var(--color-black);
	--button-text: var(--color-white);
	--button-bg: var(--color-brand);
	--button-bg-hover: var(--color-black);
	
	
	padding: 0;
	margin: 0;
	
	color: var(--body);
	font-family: 'Nunito', sans-serif;
	
	background-color: var(--bg);
	background-image: var(--bg-gradient);
	/*animation: gradient-rotate 30s infinite;*/
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Signika', sans-serif;
}

.theme-inverted {
	--bg: var(--color-white);
	--text: var(--color-black);
}

.theme-brand {
	--bg: var(--color-black);
	--text: var(--color-white);
}

.grid {
	height: calc(100vh - 2em);
	width: calc(100vh - 2em);
	margin: 1em;
	display: grid;
	place-items: center;
	grid-gap: 1em;
	background-color: #fcfcfc;
	border-radius: 1em;
}




.logo {
	max-width: 100%;
	padding: 1em;
}