// Default variables
html {
	--base-font-size: 20px;
}

// Light default theme
body {
 	--bg-color: #F3F7F9;
 	--bg-content-color: #fff;
 	--bg-code: #fffbf3;
 	--body-color: #444;
 	--title-color: #111;
 	--link-color: #0098fe;
 	--border-color:  rgba(0,0,0,.1);;
  --space: 3.5rem;
  --content-width: 860px;
  --header-height: 80px;
  --radius: 5px;
}

// Make  things smaller for mobile
@media screen and (max-width: 650px) {
	html {
		--base-font-size: 17px;
	}
	body {
		--space: 1.5rem;
		--header-height: 60px;
	}
}


// Override variables for Dark theme
body[data-theme="dark"] {
 	--bg-color: #0D2538;
 	--bg-content-color: #0f2d44;
 	--bg-code: rgba(0,0,0,.3);
 	--border-color:  rgba(255,255,255,.1);;
 	--body-color: #ced8de;
 	--title-color: #fff;

}