/** ----------------------------------------- */
/** Styles pour la structure html et body */

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 50%;
  margin: 0;
  padding: 0;
}


/** ----------------------------------------- */
/** Styles réutilisables pour les textes */

.r-bordered-text {
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
    1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}

/** ----------------------------------------- */



/** ----------------------------------------- */
/** Styles pour les boutons avec zoom automatique */

.r-button-auto-zoom {
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1.4em;
  margin: 15px 15px;
  border-radius: 50px;
  transition: all 0.3s ease 0s;
}

.r-button-auto-zoom:hover {
  transform: scale(1.2);
}

.r-button-white {
  color: #000000;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px 0 #FFFFFF inset, 0 0 20px 2px #FFFFFF;
}

.r-button-silver {
  color: #000000;
  background-color: #F4F4F4C2;
  box-shadow: 0 0 10px 0 #F4F4F4 inset, 0 0 20px 2px #F4F4F4;
}

.r-button-silver:hover {
  background-color: #F4F4F4FF;
}

.r-button-red {
  color: #f4f4f4;
  background-color: #e2001a;
  box-shadow: 0 0 10px 0 #e2001a inset, 0 0 20px 2px #e2001a;
}

.r-button-blue {
  color: #f4f4f4;
  background-color: #00cc99;
  box-shadow: 0 0 10px 0 #00cc99 inset, 0 0 20px 2px #00cc99;
}

.r-button-pink {
  background-color: #ff007c;
  box-shadow: 0 0 10px 0 #ff007c inset, 0 0 20px 2px #ff007c;
}

.r-button-gold {
  background-color: #ffae42;
  box-shadow: 0 0 10px 0 #ffae42 inset, 0 0 20px 2px #ffae42;
}

/** ----------------------------------------- */
/* Pour l'instant on n'utilise plus le background video sur ce site */

/** Styles pour la vidéo */
/* #background-video {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
} */

/* Added PseudoCode CSS to Hide the Controls of Video as on adding Controls Attribute to Video, the controls of video get visible easily. So to control that case also, this needs to be present on CSS End */
/* video::-webkit-media-controls {
	display: none;
}

video {
  display: none;
  pointer-events: none;
} */
/** ----------------------------------------- */
/* Pour l'instant on utilise une petite box et on doit réecrire les scripts JS */
#video-box {
  width: 70%;
  height: auto;
}
/** ----------------------------------------- */
.r-image-box {
  width: 50%;
  margin-bottom: 1em;
}
/** ----------------------------------------- */