:root{
    background-color: var(--bg);
	background-image: url("../style/fond-jean.jpg");
	background-size: 150px;
}

section {
	border-radius: 8px;
	background: var(--content);
	padding: 7px;
}
.container {
	max-width: 65rem;
	min-width: 45rem;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;

}
/* these control the column widths */
.small {
	flex: 1 1 12%;
	background: none;	
	display: grid;
    grid-template-columns: 1fr;
    row-gap: 1em;
	align-content: start;
  	grid-template-areas:
	"smallbox";
	position:relative;
	
}
.smallbox {box-shadow: 3px 3px 7px var(--shadow); position:relative;}
.large {
	flex: 1 1 60%; 
	box-shadow: 3px 3px 7px var(--shadow);
	position:relative;
}
.full { flex: 1 1 100%;
	box-shadow: 3px 3px 7px var(--shadow);
	position:relative;}
.half { 
	flex: 1 1 40%; 
	box-shadow: 15px 15px 10px var(--shadow);
	position:relative;
}

.blank{
	background: none;
	box-shadow: none;
}

header {
	align-self: center;
/*	width: 100%;*/
	height: 115px;
	image-rendering: pixelated;
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	z-index:-1;
}


/*navigation*/
nav {
	float:  right;
	display: flex;
	flex-wrap: wrap;
}
nav a, nav button {
	display: block;
	margin: 5px;
	background:var(--accent3);
	border-radius: 225px;
	padding: 15px;
	text-decoration: none;
	color: var(--text);

	box-shadow: 5px 3px 3px var(--shadow);
}
nav a:hover, nav a:focus {
	background: var(--accent);
	cursor: url(../cursors/Link.cur), pointer;
}
nav a:active, nav button:active{
	transform: scale(0.80);
}  
nav button {
	display: block;
	margin: 5px;
	background:var(--accent2);
	border-radius: 25px;
	padding: 10px;
	text-decoration: none;
	color: var(--text);
	box-shadow: 5px 3px 3px var(--shadow);
}	
button:hover {
	background: var(--bg);
	cursor: url(../cursors/Zoom.cur), help;	
}

/*footer*/
footer {
	align-self: flex-end;
	margin-bottom: 5vw;
	font-size: 0.8rem;
	color: var(--content);
}
footer a { 
	color: var(--light);
}
footer a:hover {
	color: var(--accent3);
}