* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: 'Lato', sans-serif;
}

body{
   position: relative;
   background-image: url("../storage/image/fond.jpg");
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
}

.border-top {
   border-top: 5px solid #434647 !important;
   border-top-left-radius: .25rem!important;
   border-top-right-radius: .25rem!important;
 }
 

 #contact{
   transition-duration: 500ms;
    background-color: rgb(39, 37, 37);
 }

 #contact:hover{
   box-shadow: 10px 5px 5px black;
   transition-duration: 1s;
 }

 .btn-light:hover{
      background-color: rgb(34, 33, 33);
      color: white;
 }

#top{
   position: sticky;
   bottom: 10px;
   left: 10px;
}

#home, .dark, .dropdown-menu {
   background-color:black;
}

.dropdown-menu {
   background-color:black;
   border: 1px solid white;
}

.blue{
   background-color:rgb(59, 49, 194);
}

.logo{
   height: 90px;
}

.dropdown-item:hover{
   color: black !important;
}

a{
   color: white !important;
}

.linkButton:hover{
   color: black !important;
   background-color:rgb(255, 255, 255);
}

.profil{
   width: 150px;
   clip-path: circle(40%);
}


.loisir{
   transition-duration: 800ms;
}

li{
   list-style-type: none; 
}

.loisir:hover {
   transition-duration: 800ms;
   box-shadow: 10px 5px 5px black;
   transform: scale(1, 1.1);
}

.timeline {
   position: relative;
   list-style: none;
   padding: 1rem 0;
   margin: 0;
 }

 .timeline::before {
   content: '';
   position: absolute;
   left: 50%;
   top: 0;
   bottom: 0;
   width: 2px;
   margin-left: -1px;
   background-color: #ff5050;
 }

 .timeline-element {
   position: relative;
   width: 50%;
   padding: 1rem 0;
   padding-right: 2.5rem;
   text-align: right;
 }

 .timeline-element::before {
   content: '';
   position: absolute;
   right: -8px;
   top: 1.35rem;
   display: inline-block;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 2px solid #b14d4d;
   background-color: #fff;
 }

 .timeline-element:nth-child(even)::before {
   right: auto;
   left: -8px;
 }

 .timeline-element:nth-child(even) {
   margin-left: 50%;
   padding-left: 2.5rem;
   padding-right: 0;
   text-align: left;
 }

 video {
   z-index:-1;
   min-width: 100%; min-height: 100%;
   width: auto; height: auto; z-index: -100;
   background-size: cover;
   position: fixed;
 }

 #vidpause{
   position: fixed;
   bottom: 10px;
   right: 10px;
 }

 @media screen and (max-width: 800px) {
   video { display: none; }
   }

 @media (max-width: 767.98px) {
   .timeline::before {
     left: 8px;
   }
 }

 @media (max-width: 767.98px) {
   .timeline-element {
     width: 100%;
     text-align: left;
     padding-left: 2.5rem;
     padding-right: 0;
   }
 }

 @media (max-width: 767.98px) {
   .timeline-element::before {
     top: 1.25rem;
     left: 1px;
   }
 }

 @media (max-width: 767.98px) {
   .timeline-element:nth-child(even) {
     margin-left: 0rem;
   }
 }

 @media (max-width: 767.98px) {
   .timeline-element {
     width: 100%;
     text-align: left;
     padding-left: 2.5rem;
     padding-right: 0;
   }
 }

 @media (max-width: 767.98px) {
   .timeline-element:nth-child(even)::before {
     left: 1px;
   }
 }

 @media (max-width: 767.98px) {
   .timeline-element::before {
     top: 1.25rem;
   }
 }