body {
	background-color: #3d3d3d;
	/*background-color:#C4C4C4;*/
	background-image: url("green_geo.png");	
	background-attachment: fixed;
}



#article1 {
	top: 50%;
	left: 50%;
	background-color: rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid #2E2E38;
	box-shadow: 0px 6px 6px;
	position: fixed;
	transform: translate(-50%, -50%);

}


#texte1 {
	font-family: arial, roboto, sans-serif;
	text-transform: uppercase;
	font-size: 15vw;
	padding: 30px 20px 0px 20px;
	color: #191919;
	font-weight: 900;
	opacity: 0.6;
	text-align: center;
	/* border: 1px dotted; */
	/* box-shadow: 4px 4px 4px; */
}


 #lien {
 	text-align: right;
 	margin-right: 5%;
 }


#roundcube {
	margin-right: 3%;
	max-width: 25%;
	background-color: rgba(105, 105, 105, 0.05);
	opacity: 0.6;
}

#roundcube:hover {
	max-width: 25.30%;
	opacity: 1;
}


#nextcloud {
	max-width: 9%;
	opacity: 0.6;
}

#nextcloud:hover {
	max-width: 9.08%;
	opacity: 1;
}



/*Sur mobile*/

@media screen and (max-device-width: 500px) {

	#texte1 {
			margin-top: 10px;
			margin-bottom: 10px;
			writing-mode: vertical-lr;
			text-orientation: upright;
			padding: 30px 0px 0px 0px;
			letter-spacing: -10%;
			text-decoration: underline;
	}


	#lien {
 	text-align: center;

 	}

	#roundcube {
		display: block;
		margin: auto;
		margin-top: 10%;
		max-width: 50%;
	}

	#roundcube:hover {
		max-width: 54%;
		opacity: 1;
	}

	#nextcloud {
		display: block;
		margin: auto;
		margin-top: 10%;
		max-width: 18%
	}
	#nextcloud:hover {
		max-width: 20%;
		opacity: 1;
	}

}