*{margin:0;padding:0;}

html
{
 height: 100vh;
}

#terrain
{
	width: 100vw;
	height: 100vh;
  background-color: green;
  background-image: url('herbe.jpg');
 background-repeat: repeat;
 background-position: center;

}

#balle
{
	position:absolute;
	display:none;
	/*top:0;
	left:0;*/
	border-radius: 30px;
	width: 60px;
	height: 60px;
  background-color: white;
   /*background-image: url('text-golf.jpg');
 background-repeat: repeat;
 background-size:20%;
 background-attachment: fixed;*/
  box-shadow: inset 0.5em 0 0.7em #4f5052, 6px 3px 3px black;
  z-index: 100000;
  transform:translate(-50%,-50%);
}

.trouOK
{
	position:absolute;
	top:50px;
	left:150px;
	border-radius: 42px;
	width: 65px;
	height: 65px;
  background-color: black;
  box-shadow: inset 0 0 1em grey, 3px 2px 2px black;
  border: solid 10px #cccccc;
  opacity:0.7;
}

.trouKO
{
	position:absolute;
	top:500px;
	left:50px;
	border-radius: 42px;
	width: 65px;
	height: 65px;
  background-color: black;
  box-shadow: inset 0 0 1em grey, 3px 2px 2px black;
  border: solid 10px red;
 opacity:0.7;
}

.smart{
	position:absolute;
	background:white;
}

button{
	position:absolute;
	display:block;
	top:50%;
	left:50%;
	padding : 12px;
	color:white;
	background-color:blue;
	border-radius:10px;
	box-shadow:-2px -2px 1px #447ddd inset, 1px 5px 5px black;
	transform:translate(-50%,-50%);
	font-family:sans-serif;
	font-size:24px;
	outline:none;
	border:none;
	z-index: 1000000;
	opacity:0.8;
	cursor:pointer;

}

p{
	position:absolute;
	display:block;
	top:15%;
	left:50%;
	transform:translate(-50%,-50%);
	padding : 12px;
	color:white;
	font-family:sans-serif;
	font-weight:bolder;
	font-size:34px;
	z-index: 10000000;
}