:root{
	--white: #FFFFFF;
	--black: #282828;
	--pureblack: #000000;
  --font-color: #272727;
  --grey: #A3A3A3;
	--link-color: #1f9bde;
	--linkhover: #00d9ff;
	--navlink: #4b4b4b;
	--switch: #FBFBFE;
	--error: #c23c3c;
  --footer-color: #e9e9e9;
}

@font-face {
  font-family: 'opensans';
  src:url('/public/fonts/opensans.ttf') format('truetype'),
  url('/public/fonts/opensans.eot') format('embedded-opentype'),
  url('/public/fonts/opensans.svg') format('svg'),
  url('/public/fonts/opensans.woff') format('woff');
}

@font-face {
  font-family: 'opensans-bold';
  src:url('/public/fonts/opensans-bold.ttf') format('truetype'),
  url('/public/fonts/opensans-bold.eot') format('embedded-opentype'),
  url('/public/fonts/opensans-bold.svg') format('svg'),
  url('/public/fonts/opensans-bold.woff') format('woff');
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

.flex{
	display: flex;
}

.row{
	flex-direction: row;
}

.row-rev{
	flex-direction: row-reverse;
}

.wrap{
    flex-flow: row wrap;
}

.wrap-rev{
    flex-flow: row wrap-reverse;
}

.column{
	flex-direction: column;
}

.column-rev{
	flex-direction: column-reverse;
}

.between{
	justify-content: space-between;
}

.around{
	justify-content: space-around;
}

.start{
	justify-content: flex-start;
}

.end{
	justify-content: flex-end;
}

.center{
    justify-content: center;
}



/* css starts here */

a:hover{
	color: var(--linkhover);
	text-decoration: none;
}

h1 {
	font-family: 'opensans-bold', sans-serif;
	letter-spacing: 3px;
	color: var(--font-color);
	font-size: 1.7em;
	margin-bottom: 30px;
	font-weight: normal;
}

h2 {
	font-family: 'opensans-bold',sans-serif;
	font-size: 1.3em;
	color: var(--font-color);
	transition: 0.5s ease;
}

h3 {
	font-family: 'opensans-bold',sans-serif;
	font-size: 1.2em;
	color: var(--font-color);
	transition: 0.5s ease;
}

p {
	font-family: 'opensans',sans-serif;
	font-size: 1em;
	color: var(--font-color);
	transition: 0.5s ease;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: var(--color-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: var(--font-color);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto; /* This will make sure this container takes all available vertical space */
}

#root {
  display: flex;
  flex-grow: 1;
}