@import url('./fonts.css');

html {
  box-sizing: border-box;
	overflow-y: scroll;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
	margin: 0;
	font-family: 'Josefin Slab', Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	background-color: var(--color-background);
	color: var(--color-text);
}

::-moz-selection {
	background: var(--color-primary);
	color: var(--color-background);
}

::selection {
	background: var(--color-primary);
	color: var(--color-background);
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 3px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-primary-light); 
  border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary); 
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em 0;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-secondary);
}

h1 {
	font-family: 'Fascinate';
}

h1 {
	font-size: 2em;
}

a {
	color: inherit;
}

code {
	font-family: menlo, inconsolata, monospace;
	font-size: calc(1em - 2px);
	color: #555;
	background-color: #f0f0f0;
	padding: 0.2em 0.4em;
	border-radius: 2px;
}

:root {
	--color-primary: #e69720;
	--color-primary-light: #ffe0b3;
	--color-primary-dark: #004b49;
	--color-secondary: #bba175;
	--color-secondary-light: #fff1d9;
	--color-tertiary: #FFD950;
	--color-tertiary-light: #fff2c5;
	--color-gray: #D8D8D8;
	--color-text: #fffbf4;
	--color-background: #342d21;
	--color-background-r: 52;
	--color-background-g: 45;
	--color-background-b: 33;
}

@media (min-width: 400px) {
	body {
		font-size: 20px;
	}
}