@import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100';

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Mono', monospace;
  background: linear-gradient(rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.45)), url(./fonds/fond-accueil.jpg)no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
  margin : 0;
}

.main{
  height : 100%;
}

.container {
  display : flex;
  flex-direction : column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  padding-top: 20%;
}

.text {
  font-weight: 700;
  font-size: 2.5rem;
  color: #fafafa;
}

.dud {
  color: #a3a3a3;
}



.start{
  font-size : 1rem;
  font-family: sans-serif, 'Roboto';
  text-decoration : none;
  color : #ffffff;
  font-weight: 400;
  letter-spacing : 1px;
  position : absolute;
  bottom : 18%;
  left : 41%;
  border : solid 2px lightgreen;
  border-radius : 50px;
  padding : 1% 2%;
  transition: all 150ms linear;
  cursor: pointer;
}

/* pop-up pour la vidéo de fin */

.video-responsive { 
  overflow:hidden; 
  padding-bottom:56.25%; 
  position:relative; 
  height:0;
  }
  
.video-responsive iframe {
  height:100%;
  width:100%;
  position:absolute; 
  } 

  .popup-content-video {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    z-index: 1800;
  }


.start:hover{
  color : #000;
  background-color: lightgreen;
  box-shadow: 0 1.5em 1.5em -0.8em rgba(0,0,0,0.9);
  transform: translateY(-0.5em);
}

@keyframes btnstart {

  0%{
    transform : rotate(-135deg) translate(0,0)
  }

  50%{
    transform : rotate(-135deg) translate(10px,10px)
  }

  100%{
    transform : rotate(-135deg) translate(0,0)
  }

}

/* Tooltip (infos) */

.info-main{
  position : absolute;
  right : 10%;
  bottom : 10%;
  width : 20%;
}

.info-sub{
  position : absolute;
  right : -50%;
  bottom : 10%;
  transition : 250ms ease;
  font-family : 'Roboto', sans-serif;
  font-size : 1.4rem;
  color : #ffffff;
  cursor : pointer;
  width : 30%;
  
}

.info-sub h2{
  width : 2%;
  margin : 0;
}

.info-sub:hover{
  color : lightgreen;
  transition : 0.5s ease;
}

.info-sub .info-content{
  opacity : 0;
  pointer-events : none;
  transform : translateX(-20%) translateY(-20%);
  width : 250%;
}

.info-sub:hover .info-content{
  opacity : 1;
  transform : translateX(-30%) translateY(-30%);
  width : 250%;
}

.info-content {
  font-family : 'Roboto', sans-serif;
  position : absolute; 
  right : 70%;
  bottom: -40%;
  font-size : 1rem;
  text-align : center;
  color :  #ffffff;
/*   border-radius : 10px; */
/*   padding : 3%; */
  transition : 250ms ease;

}

.info-content:hover{
  color : #ffffff;
}

@media (max-width: 992px){
  .start{
    left: 41%;
  }
  .info-content{
    right : 10%;
    bottom: 40%;
    font-size : 1rem;
  }
  .info-sub{
    right : -50%;
    width: 40%;
  }
  .container{
    padding-top: 30%;
  }
}

@media (max-width: 768px){
  .start{
    left: 37%;
  }
  .info-content{
    right : -40%;
    bottom: 300%;
    font-size : 0.8rem;
  }
  .info-sub{
    right : -45%;
    width: 50%;
  }
  .container{
    padding-top: 40%;
  }
  .text{
    font-size: 2.1rem;
  }
}

@media (max-width: 576px){
  .start{
    left: 34%;
  }
  .info-content{
    right : -40%;
    bottom: 300%;
    font-size : 0.8rem;
  }
  .info-sub{
    right : -45%;
    width: 50%;
  }
  .container{
    padding-top: 50%;
  }
  .text{
    font-size: 1.9rem;
  }
}

.show{
  display : block;
}