body {
  margin:0;
  background-color: black;
}


#fond {
	top:50%;left:50%;
	position:fixed;
	width:800px;height:600px;
  margin-left:-400px;
  margin-top:-300px;
	object-fit: scale-down;
	/*background-image: url(images/night.png);*/
	background-image: url(images/nuit1000tiny.png);
	background-position:center center;
	background-repeat: no-repeat;
  background-size: cover;  
}

/*#div {
  width:200px;height:200px;margin: 20px auto 20px;
background-color:deeppink;
background-image:linear-gradient(white,rgba(255,255,255,0));
transition:background-color 1s;
border-radius:5px;
box-shadow:0 0 5px black;
}

div:hover,div.on{
background-color: steelblue;
}
button{
display:block;
width:120px;
height:30px;
margin:auto;
border:none;
border:1px solid rgba(0,0,0,.5);
border-radius:2px;
color:white;
background:#333;
background:linear-gradient(#444,#202020);
box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 1px 0 rgba(255,255,255,.3);
}
button:hover,button:focus{
background:#444;
background:linear-gradient(#555,#202020);
}
button:active{
background:#111;
background:linear-gradient(#202020,#111);
box-shadow:0 1px 0 rgba(0,0,0,.3) inset,0 1px 0 rgba(255,255,255,.3);
}*/

div{
width:1px;
height:1px;
position: fixed;
top:15%;left:100%;
    /*margin:50px auto 20px;*/
background:#370416;
    /*border-radius:5px;*/
box-shadow:0 300px 100px -90px /*#EDEDED*/ #E0ECEE inset, 0 0 5px black;
transition:background 4s ease,box-shadow 2s ease;
opacity: none;
}
div:hover,div.on{
/*background:#012A02;
box-shadow:0 210px 100px -100px #E3D54A inset, 0 0 5px black;*/

background:#E3D54A;
box-shadow:0 260px 400px -100px #710606 inset, 0 0 5px black;
}
button{
display:none;
width:120px;
height:30px;
margin:auto;
border:none;
border:1px solid rgba(0,0,0,.5);
border-radius:2px;
color:white;
background:#333;
background:linear-gradient(#444,#202020);
box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 1px 0 rgba(255,255,255,.3);
}
button:hover,button:focus{
background:#444;
background:linear-gradient(#555,#202020);
}
button:active{
background:#111;
background:linear-gradient(#202020,#111);
box-shadow:0 1px 0 rgba(0,0,0,.3) inset,0 1px 0 rgba(255,255,255,.3);
}


/*.container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 800px;
  height: 600px;


}
.btn {
  flex: 1 1 auto;
  margin: 400px;
  padding: 300px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background: linear-gradient(90deg, var(--c1, #f6d365), var(--c2, #fda085) 51%, var(--c1, #f6d365)) var(--x, 0)/ 200%;
  color: white;*/
 /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
/*  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
 }*/

/* Demo Stuff End -> */

/* <- Magic Stuff Start */

/*.btn:hover { --x: 100%; }

.btn-1 {
  --c1: #f6d365;
  --c2: #fda085;
}*/