style.css

/* General Styles */

body {
  margin: 0;
  background-size:contain;
}
header {

}

.container {
  display: flex;
  justify-content: space-around;
}

main {
  flex: 5;
}

aside {
  flex: 1;
}

section {
}

.lutins {
}
.game {
  position: relative;
  height:95vh;
  background: url('img/bg2.png') no-repeat;
  background-size: contain;
}

img {
  max-width: 100%;
  max-height: 100vh;
}
.sleigh {
}

.dnone {
  display: none;
}

/* Buttons */
#start {
  position: absolute;
  top: 50%;
  right:50%;
  box-shadow: rgb(242, 156, 147) 0px 1px 0px 0px inset;
  background: linear-gradient(rgb(254, 26, 0) 5%, rgb(206, 1, 0) 100%) rgb(254, 26, 0);
  border-radius: 6px;
  border: 1px solid rgb(216, 53, 38);
  display: inline-block;
  cursor: pointer;
  color: rgb(255, 255, 255);
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: rgb(178, 62, 53) 0px 1px 0px;
}

#start:hover {
    background: linear-gradient(rgb(206, 1, 0) 5%, rgb(254, 26, 0) 100%) rgb(206, 1, 0);
}


footer {
  position: absolute;
  top: 25%;
  left:20%;
  padding:2%;
  display: flex;
  justify-content: space-around;
  background: #dedede;

}

/* Change cursor :*/
.game {
  cursor: url(img/sled2.png) 16 0, auto;
}
/* H titles */

h1 {
  text-align: center;
}
/* Elements styles */

/* Santa */

/* Lutins */

/* Gifts */
.gift, .giftcontain, .trap {
  width: 3em;
  height: 3em;
}

.giftcontain {
  background: pink;
}
.giftcontain:hover {
  background: green;
}

.hidden {
  visibility: hidden;
}

.xmas {
  display: flex;
  justify-content: center;
  position: relative;;
  height: 600px;
  width: 1220px;
  margin: auto;
  visibility: hidden;
}

.present, .trap {
  position: relative;
  height: 45px;
  width: 45px;
  z-index: 100;
}


/* gift reglage sur mesure de chaque chutte*/
.gift {
  /*flex: 1;*/
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift2 {
  /*flex: 1;*/
  animation-duration: 4.8s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift3 {
  /*flex: 1;*/
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift4 {
  /*flex: 1;*/
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift5 {
  /*flex: 1;*/
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift6 {
  /*flex: 1;*/
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift7 {
  /*flex: 1;*/
  animation-duration: 5.6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift8 {
  /*flex: 1;*/
  animation-duration: 2.9s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift9 {
  /*flex: 1;*/
    animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift10 {
  /*flex: 1;*/
  animation-duration: 7.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift11 {
  /*flex: 1;*/
  animation-duration: 0.9s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift12 {
  /*flex: 1;*/
  animation-duration: 6.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift13 {
  /*flex: 1;*/
  animation-duration: 5.6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift14 {
  /*flex: 1;*/
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift15 {
  /*flex: 1;*/
  animation-duration: 4.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift16 {
  /*flex: 1;*/
  animation-duration: 2.8s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift17 {
  /*flex: 1;*/
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}

.gift18 {
  /*flex: 1;*/
  animation-duration: 2.8s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
.gift19 {
  /*flex: 1;*/
  animation-duration: 1.1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}

.gift20 {
  /*flex: 1;*/
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: gift;
}
@keyframes gift {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}


/* Score */

/* Timer Jeu */

#tictac {
  font-weight: bold;
  font-size: 30px;
}

/* Timer avant noel */

.time {
  display: flex;
  justify-content: space-around;;
}

.countain {
  box-sizing: border-box;
}

.compt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countain p {

}

.count {
  padding: 20%;
  font-size: 2em;
  color:red;
  border: 2px solid rgb(206, 1, 0);
  box-sizing: border-box;
}



/* Footer */

.footercol {
  flex:1;
}

/* Media Queries */

@media screen and (min-width: 200px) and (max-width: 640px) {
  .santa {
    display:none;
  }
}