@import url('https://fonts.googleapis.com/css?family=Fredoka+One');

html {
  overflow-x: hidden;
}

body {
  transition: all 0.5s ease;
  background: #333;
  font-family: 'Fredoka One', cursive;}

#wheel {
  position: fixed;
  margin-top: 30vh;
  width: 400vh;
  max-width: 100vw;
  height: 400vh;
  /*border: 1px solid red;*/
  margin-right: auto;
  margin-left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(0deg);
  transform-origin: center center;
  transition: all 0.5s ease;
}

.image {
  position: absolute;
  height: 30vh;
  transform-origin: center 200vh;
  /*  moitié height div */
}

img {
  height: 100%;
  transition: all 0.15s ease;
}
img:hover {
  transform: scale(1.1);
}

h1 {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 3em;
  font-weight: 900;
  margin-top: .8em;
  letter-spacing: -0.1em;
  text-shadow: rgb(255, 255, 255) 5px 0px 0px, rgb(255, 255, 255) 4.9px 1px 0px, 
  rgb(255, 255, 255) 4.6px 1.95px 0px, rgb(255, 255, 255) 4.13333px 2.81667px 0px,
  rgb(255, 255, 255) 3.48333px 3.58333px 0px, rgb(255, 255, 255) 2.7px 4.2px 0px, 
  rgb(255, 255, 255) 1.81667px 4.66667px 0px, rgb(255, 255, 255) 0.85px 4.93333px 0px,
  rgb(255, 255, 255) -0.15px 5px 0px, rgb(255, 255, 255) -1.13333px 4.86667px 0px, 
  rgb(255, 255, 255) -2.08333px 4.55px 0px, rgb(255, 255, 255) -2.95px 4.05px 0px, 
  rgb(255, 255, 255) -3.68333px 3.38333px 0px, rgb(255, 255, 255) -4.28333px 2.58333px 0px, 
  rgb(255, 255, 255) -4.71667px 1.66667px 0px, rgb(255, 255, 255) -4.95px 0.7px 0px, 
  rgb(255, 255, 255) -4.98333px -0.3px 0px, rgb(255, 255, 255) -4.83333px -1.28333px 0px, 
  rgb(255, 255, 255) -4.48333px -2.21667px 0px, rgb(255, 255, 255) -3.95px -3.06667px 0px,
  rgb(255, 255, 255) -3.26667px -3.78333px 0px, rgb(255, 255, 255) -2.45px -4.35px 0px, 
  rgb(255, 255, 255) -1.53333px -4.75px 0px, rgb(255, 255, 255) -0.566667px -4.96667px 0px,
  rgb(255, 255, 255) 0.433333px -4.98333px 0px, rgb(255, 255, 255) 1.41667px -4.8px 0px, 
  rgb(255, 255, 255) 2.35px -4.41667px 0px, rgb(255, 255, 255) 3.16667px -3.86667px 0px, 
  rgb(255, 255, 255) 3.88333px -3.15px 0px, rgb(255, 255, 255) 4.43333px -2.31667px 0px, 
  rgb(255, 255, 255) 4.8px -1.4px 0px, rgb(255, 255, 255) 4.98333px -0.416667px 0px;
}
h1 span{
  cursor: pointer;
}
h2{
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 1.4em;
  font-weight: 900;
  margin-top: 4.2em;
  color: white;
}
h2 a{
  color: #fff;
  text-decoration: wavy underline;
}
.color-1{color:Crimson}
.color-2{color:DarkOrange}
.color-3{color:Gold}
.color-4{color:Chartreuse}
.color-5{color:LimeGreen}
.color-6{color:Turquoise}
.color-7{color:Aqua}
.color-8{color:SteelBlue}
.color-9{color:MediumBlue}
.color-10{color:MediumOrchid}
.color-11{color:Plum}

.bottom{
  position: absolute;
  bottom: 3em;
  margin-left: 50vw;
  transform: translateX(-50%);
  z-index: 100;
  text-align: center;
}
.btn{
  background: #fff;
  width: 130px;
  height: 45px;
  display: inline-block;
  text-align: center;
  line-height: 45px;
  margin: 0.8em;
  border-radius: 45px;
  text-transform: uppercase;
  text-decoration: none;
  animation: all 0.2s ease, color 0.5s ease;


  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */

  -webkit-box-shadow: 0px 13px 29px -16px rgba(0,0,0,0);
  -moz-box-shadow: 0px 13px 29px -16px rgba(0,0,0,0);
  box-shadow: 0px 13px 29px -16px rgba(0,0,0,0);
}
.btn:hover{
  cursor: pointer;
  transform: scale(1.05);

  -webkit-box-shadow: 0px 13px 20px -16px rgba(0,0,0,.5);
  -moz-box-shadow: 0px 13px 20px -16px rgba(0,0,0,.5);
  box-shadow: 0px 13px 20px -16px rgba(0,0,0,.5);
}

.download{
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  bottom: 1em;
  margin-left: 50vw;
  transform: translateX(-50%);
  z-index: 100;
  text-align: center;
  color: #333
}

/* Responsive */
@media screen and (max-width: 370px) {
  h1{
    font-size: 2.1em;
  } 
}

@media screen and (max-width: 650px){
  #wheel{
    transition: all 0.3s ease;
  }
}