@font-face { font-family: SingleDay-Regular; src: url('fonts/SingleDay-Regular.ttf'); }



html, body {
    scroll-behavior: smooth;
}

body{
  font-size: xx-large;
  width: 8000px;
  height: 6000px;
}

#startbutton{
  font-size: xx-large;
  background-color: rgb(255, 255, 255);
  margin-right: 50px; 
  margin-top: 20px;
  border-radius: 1px;
  border-style:inherit;
  padding: 10px 20px;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
  transition: transform 0.5s ease;
  transition: 0.3s ease;
}

#startbutton:hover {
  box-shadow: 5px 5px 7px rgb(199, 199, 199);
  transform: translateY(-5px);
  background-color: rgb(199, 199, 199);
}

button{
  cursor: pointer;
}

#start{
  position:relative;
  left: 4000px;
  top: 3000px
}

#retourverslefutur{
  width : 300px ; 
  height : auto ;
  position: absolute;
  top: 4600px;
  left: 200px;
}

#noboombox {
  position: absolute;
  left: 7800px;
  top: 300px;
}

#boombox {
  display: none;
  position: absolute;
  left: 7800px;
  top: 300px;
}

#boomboxspace button{
  border-style:none;
  background-color: #ffffff;
}

#boite{
  display: none;
  position: absolute;
  left: 8500px;
  top: 350px;
}

.musiques{
  display: grid;
  grid-template-columns: 230px 230px 230px;
	grid-template-rows: 150px 150px 150px;
}

.musiques button {
  border-style: none;
  background-color: transparent;
  transition: transform 0.5s ease-in-out;
  transition: trasnforme 0.5s ease-in-out;
  transition: rotate 0.5s ease-in-out;  
  transition: 0.5s ease;
}

.musiques button:hover{
  rotate: 10deg;
  transform: scale(1.2);
}

.musiques img{
  margin-top: 40px;
  margin-left: 40px;
  margin-bottom: 40px;
  width : 180px ; 
  height : auto ;
}

#K7{
  position: absolute;
  left: 7000px;
  top: 5000px;
  width : 300px ; 
  height : auto ;
}

#findK7{
  display: none;
  position: absolute;
  left: 7600px;
  top: 500px;
}

#openwindow{
  width : 330px ; 
  height : auto ;
  display: none;
  position: absolute;
  left: 990px;
  top: 600px;
}

#closedwindow{
  position: absolute;
  left: 1000px;
  top: 600px;
  width : 300px ; 
  height : auto ;
  border-style: none;
  background-color: transparent;
}

#closedwindow img{
  width : 300px ; 
  height : auto ;
}

#jumpingcat {
  position: absolute;
  left: 10000px;
  top: 6000px;
}

#lineartcat {
  position: absolute;
  left: 3000px;
  top: 2500px
}

#happycat {
  position: absolute;
  left: 9000px;
  top: 3000px;
}

#lazycat {
  position: absolute;
  left: 5000px;
  top: 5000px;
}

#maxwell {
  position: absolute;
  top: 4000px;
  left: 300px;
}

#spiningcat{
  position: absolute;
  top: 1400px;
  left: 500px;
}

#chatmoche{
  position: absolute;
  top: 150px;
  left: 9300px;
}

#walkingcat{
  position: absolute;
  top: 5500px;
  left: 900px;
}

#crocmou{
  position: absolute;
  left: 4000px;
  top: 3000px
}

#petshop{
  position: absolute;
  top: 200px;
  left: 6000px;
}

#leopard{
  position: absolute;
  top: 5600px;
  left: 7300px;
}

#duck{
  position: absolute;
  top: 3000px;
  left: 7000px;
}

#vaches{
  position: absolute;
  left: 1700px;
  top: 500px;
}

#dino{
  position: absolute;
  left: 3000px;
  top: 1200px;
}

#grenouille{
  position: absolute;
  left: 11000px;
  top: 2300px;
}

#poisson{
  position: absolute;
  left: 11000px;
  top: 4000px;
}

.gif{
  display: none;
}


#Macintosh {
  position: absolute;
  left: 4000px;
  top: 5300px;
}

#outerwilds {

  width : 170px ; 
  height : auto ;
}

#minecraft {

  width : auto ; 
  height : 120px ;
}

#detroit {

  width : auto ; 
  height : 140px ;
}

#sims {
  width : auto ; 
  height : 110px ;
}

.ordi {
  position: absolute;
  left: 4235px;
  top: 5400px;
  display: grid;
  grid-template-columns: 200px 200px;
	grid-template-rows: 140px 140px 140px;
}

.ordi button {
  border-style: none;
  background-color: transparent;
}

#un {
  position: absolute;
  left: 4400px;
  top: 5500px;
  font-size: x-large;
}

#deux {
  position: absolute;
  left: 4450px;
  top: 5500px;
  font-size: x-large;
}

#trois {
  position: absolute;
  left: 4400px;
  top: 5550px;
  font-size: x-large;
}

#quatre {
  position: absolute;
  left: 4450px;
  top: 5550px;
  font-size: x-large;
}

#clavier {
  position: absolute;
  left: 4095px;
  top: 5920px;  
  background-color: transparent;
  border-style: none;
}

#souris {
  position: absolute;
  left:4890px;
  top: 5990px;  
  background-color: transparent;
  border-style: none;
}

#troiscoeurs {
  display: none;
  position: absolute;
  left: 4830px;
  top: 4780px;
}

#facedecul {
  display: none;
  position: absolute;
  left: 3300px;
  top: 2100px;
  height: 600px;
}

#googlyeyes {
  display: none;
  position: absolute;
  top: 5635px;
  left: 7473px;
  height: 100px;
}

#paillettes {
  display: none;
  position: absolute;
  top: 5448px;
  left: 7206px;
  height: 600px;
}

#note {
  display: none;
  position: absolute;
  top: 5740px;
  left: 7373px;
  height: 600px;
}

#cake {
  display: none;
  position: absolute;
  top: 3000px;
  left: 6977px;
}

#balloons{
  display: none;
  position: absolute;
  top: 2424px;
  left: 7443px;
  height: 800px;
}

#crayon{
  display: none;
  position: absolute;
  top: 127px;
  left: 6244px;
  height: 486px;
}

#dessin1{
  display: none;
  position: absolute;
  top: 813px;
  left: 7332px;
}

#dessin2{
  display: none;
  position: absolute;
  top: 128px;
  left: 5288px;
  height: 536px;
}

#dessin3{
  display: none;
  position: absolute;
  top: 767px;
  left: 6602px;
}

#dessin4{
  display: none;
  position: absolute;
  top: 233px;
  left: 6478px;
}

#dessin5{
  display: none;
  position: absolute;
  top: 502px;
  left: 5737px;
}

#dessin6{
  display: none;
  position: absolute;
  top: 931px;
  left: 6000px;
}

#dessin7{
  display: none;
  position: absolute;
  top: 646px;
  left: 4946px;
}

#sing {
  display: none;
  position: absolute;
  left: 1805px;
  top: 363px;
  height: 200px;
}

#cow {
  display: none;
  position: absolute;
  left: 1802px;
  top: 963px;
}

#drum {
  display: none;
  position: absolute;
  left: 2203px;
  top: 575px;
}

#party {
  display: none;
  position: absolute;
  left: 1768px;
  top: 644px;
}

#postit {
  display: none;
  position: absolute;
  left: 9440px;
  top: 2706px;
}

#potato {
  display: none;
  position: absolute;
  left: 8671px;
  top: 3000px;
}

#emoji {
  display: none;
  position: absolute;
  left: 9263px;
  top: 3510px;
}

#coinposter {
  display: none;
  position: absolute;
  top: 4600px;
  left: 562px;
}







#Whatareyoudoinghere {
  display: none;
}

#Theresnothingforyouhere {
  display: none;
}

#uhh {
  display: none;
}

#um {
  display: none;
}

#Heythatwasmyquestion {
  display: none;
}

#anyway {
  display: none;
}

#goon {
  display: none;
}

#Exploretheplace {
  display: none;
}

#Butimleavingyouhere {
  display: none;
}

#ifyoudontunderstand {
  display: none;
}

#orgetlost {
  display: none;
}

#iwontbeheretohelpyou {
  display: none;
}

#okaythen {
  display: none;
}

#goodbye {
  display: none;
}