/* Style Settings */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;600&family=Roboto+Slab&display=swap');
:root {
	--bgColor: rgb(255, 255, 255);
	--accent: #b3c14a;
	--accent2: #7e8900;
	--blanc: #fff;
	--font: 'Comfortaa', sans-serif;
	--bleu: #137f8d;
}

body {
	background-color: var(--bgColor);
	background-image: url("/background-small.png");
	background-size: 300px 300px;
	background-repeat: repeat; 
	min-height: 100vh;
	padding: 10px;
} 

.wrapper {
	margin-top: 60px;
		background: var(--bleu);
		padding: 60px 20px 20px;
		position: relative;
		max-width: 675px;
		margin-left: auto;
		margin-right: auto;
}

#userPhoto {
	width: 180px;
	height: 180px;
	display: block;
	position: absolute;
	top: -70px;
	left: 50%;
	margin-left: -90px;
	border-radius: 50%;
	background: var(--bleu); 
	text-align: center;
	vertical-align: middle;
	line-height: 180px;
}

#userPhoto img {
	max-width: 80%;
	vertical-align: middle;
	margin-top: -45px;
	margin-left: -15px;
}

#userName {
	color: rgb(255, 255, 255);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	display: block;
	font-family: 'Roboto Slab', serif;
	width: 100%;
	text-align: center;
	text-decoration: none;
	position: relative;
	z-index:99;
}

#links {
	max-width: 675px;
	width: auto;
	display: block;
	margin: 27px auto;
	position: relative;
	z-index:99;
}

.link {
	display: block;
	background-color: var(--blanc);
	color: var(--accent2);
	font-family: var(--font);
	text-align: center;
	margin-bottom: 20px;
	padding: 17px;
	text-decoration: none;
	font-size: 1rem;
	line-height: 1.4;
	transition: all .25s cubic-bezier(.08, .59, .29, .99);
	border: solid var(--accent2) 2px;
}

.link:hover {
	background-color: var(--accent);
	color: var(--blanc);
	border: solid var(--accent) 2px;
}

.link.multiples {
	background: none;
	text-align: center;
	border: none;
} 

.link.multiples a {
	padding-bottom: 12px;
	padding-left: 8px;
	padding-right: 8px;
	color: inherit;
	text-decoration: underline;
}

.link.multiples svg {
	fill: rgb(255, 255, 255);
	width: 32px;
	height: 32px;
}