/* Import font frijole from google fonts */
@font-face {
  font-family: 'frijole';
  src: local('frijole'), url('../fonts/frijole.woff2') format('woff2');
}

@font-face {
  font-family: 'playfair display';
  src: local('playfair display'),url('../fonts/PlayfairDisplay-Regular.woff2') format('woff2');
} 

@font-face {
  font-family: 'prata';
  src: local('prata'), url('../fonts/prata.woff2') format('woff2');
}

/* h1 is used for Website title */
h1 {
	font-family : playfair display;
	font-size   : 2em;
	text-align  : center;
}

h2 {
	font-family      : prata;
	text-align       : center;
	background-color : #fff4da;
	text-shadow      : 3px 2px lightgray;
	padding:16px;
}

/* Contains the bar on the left and the document on the right*/
body {
	font-family      : arial,sans-serif;
	font-size        : 1em;
	display          : flex;
	flex-direction   : row;
	flex-wrap        : nowrap;
	/* http://paletton.com/#uid=33m0u0k1-+000++00++4BVk8xMg */
	/* Color comming from Denture2.jpg */
	background-color : #f0fafc;
	height		     : 100vh;
}

/* Contains the header, the nav and the footer */
#bar {
	display          : flex;
	flex-direction   : column;
	flex             : 1;
	background-size  : cover;
	background-image : url('../images/Denture2v.jpg');
	padding          : 10px;
}

/* Contains the document and footer */
#docandfoot {
	display        : flex;
	flex-direction : column;
	flex           : 6;
	padding        : 10px;
	height		   : 96vh;
}

/* Contains the informations */
#document {
	display        : flex;
	flex-direction : column;
	height		   : 86vh;
	overflow  	   : auto;
}

footer {
	display        : flex;
	flex-direction : column;
	height		   : 10vh;
}

/* Web site title */
header {
	display        : flex;
	flex-direction : column;
}

/* Web site menu */
nav {
	display        : flex;
	flex-direction : column;
}

nav ul {
	display        : flex;
	flex-direction : column;
	font-family    : playfair display;
	font-size      : 1.5em;
	margin	       : 0;
	padding        : 0;
	text-align     : center;
}

nav li {
	list-style : none;
	margin-top : 2px;
}

nav li a:hover { /* React to mouse */
	background-color : #a0c0c0;
}

/* contact link  and logos */
footer {
	display        : flex;
	flex-direction : column;
	text-align     : center;
}

#logos {
	display        : flex;
	flex-direction : column;
}

#logos ul {
	display        : flex;
	flex-direction : row;
	flex-wrap      : wrap;
	justify-content: space-between;
	margin	       : 0;
	padding        : 0;
	text-align     : center;
}

#logos li {
	list-style : none;
	margin-top : 2px;
}

.logo {
	max-width  : 80%;
	max-height : 60px;
}

strong {
	background-color: #ffc2bb;
}

.bordergroup {
	border       : 2px solid #9bc9d2;
	padding      : 5px;
	margin       : 10px;
	border-radius: 10px;
	box-shadow   : 6px 4px lightgray;
}

#spaced {}

#spaced li {
	padding      : 4px;
}

@media screen and (max-width : 640px) {
/* The bar is now horizontal */
body {
	font-family      : arial,sans-serif;
	font-size        : 0.9em;
	display          : flex;
	flex-direction   : column;
	flex-wrap        : nowrap;
	background-color : #f0fafc;
}

#bar {
	background-image : url('../images/Denture2.jpg');
}

nav ul {
	flex-direction : row;
	flex-wrap      : wrap;
	justify-content: space-between;
}

h1 {
	margin : 0;
	padding : 0;
}

}