html, body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.image-mouvante{
    width: 80%;
    max-width:400px!important;
}  


.image-button{
  height: 80px;
}

.button-play{
  background-color:transparent;
  border: 0px transparent;
}

.button-play:focus{
  outline: none !important;
}

.button-play:active{
  outline: none;
}

.full-height{
  min-height:100vh;
  max-height:100vh;
}

.title-main-page{
  background-color: #00a3e2;
  color:#60284f;
  font-family: "Tiny5", sans-serif;
}

@media (max-width: 767px){
  .title-main-page{
    font-size: 40px;
    writing-mode: horizontal-tb;
    line-height: normal;
    border-top: #60284f solid 10px;
    border-bottom: #60284f solid 10px;
  }
}

@media (min-width: 768px){
  .title-main-page{
    font-size: 55px;
    font-family: "Tiny5", sans-serif;
    writing-mode: vertical-lr;
    letter-spacing: -20px;
    text-orientation: upright;
    border-left: #60284f solid 10px;
    border-right: #60284f solid 10px;
    height: 100%;
  }
}

@media (min-width: 768px) {
  .title-main-page{
    line-height: 100px;
  }
}



.rectangle-2-titre{
  background-color: #55d6d9;
  height: 7px;
}

/* .rectangle-titre{
  background-color: #00a3e2;
  height: 30px;
} */

.title-main-page span{
  letter-spacing: -12px;
}