MSJS_clochard_saulnier/styles.css

.logo {
	position:absolute;
	right: 41%
	
}


.img1 { background: url('/image/imgnoir.jpg') no-repeat 0px -50px; height:50px; width: 50px; display: block; }
.img1:hover { background:url('cheminimage/image.jpg') no-repeat 0px 0px; }

.img1 {
	position: absolute;
	z-index: 1;
}



.loader {

    position: absolute;

    width: 100%;
	
    height: 100%;

    background: white;

    display: flex; 

    justify-content: center;

    align-items: center;

}

.lettre {

    color: #9700ff;

    font-size: 80px;

    letter-spacing: 15px;

    margin-bottom: 150px;

    animation: flash 1.2s linear infinite;
	
	font-family: casino;



}

@keyframes flash {

    0% {

        color: #ff2d00;

        text-shadow: 0 0 7px #ff2d00;

    }

    90% {

        color: #9700ff;

        text-shadow: none;

    }

    100% {

        color: #ff2d00;

        text-shadow: 0 0 7px #ff2d00;

    }

}



.lettre:nth-child(1){

    animation-delay: 0.1s;

}

.lettre:nth-child(2){

    animation-delay: 0.2s;

}

.lettre:nth-child(3){

    animation-delay: 0.3s;

}




.fondu-out {

    opacity: 0;

    transition: 0.4s ease-out;
	
	display: ;

}



@font-face {

  font-family: "casino";

  src: url("casino.TTF");

  font-style: normal;

  font-weight: normal;

  

}

.card-fan {
  position: absolute;
  width: 15%;
  transform-origin: bottom;
  transition: .3s linear;
}

.cards-fan-container:hover #ten-fan{
  transform: rotate(20deg)
}
.cards-fan-container:hover #ace-fan{
  transform: rotate(-20deg)
}
.cards-fan-container:hover #jack-fan{
  transform: rotate(10deg)
}
.cards-fan-container:hover #king-fan{
  transform: rotate(-10deg)
}

.bg {
  width: 100%;
  opacity; 50%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 300% 300%;
  background-image: linear-gradient(
        -45deg, 
        rgba(0,0,0,1) 0%, 
        rgba(137,46,255,1) 25%, 
        rgba(38,34,133,1) 51%, 
        rgba(23,21,79,1) 100%
  );  
  animation: AnimateBG 20s ease infinite;
}

@keyframes AnimateBG { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

:root{

  --hauteur-menu: 60px;

}

* {

  margin: 0px;

  padding: 0px;

  font-family: Montserrat, sans-serif;

}

nav {

  width: 100%;

  font-size: 18px;

  position: sticky;

  top: 0;

}



nav > ul {

  display: flex;

  text-align: center;

  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);

  height: var(--hauteur-menu);

}

 

nav ul {

  list-style-type: none;

}



nav > ul > li {

  background-color: white;

  position: relative;

  height: 100%;

  flex: 1;

}





nav > ul > li > a {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}



li a {

  text-decoration: none;

  color: black;

}



.menu-deroulant > a:after{

  content: '❯';

  font-size: 15px;

  margin-left: 7px;

  display: inline-block;

}



.sous-menu {

  margin-top: var(--hauteur-menu);

  width: 100%;

  text-align: left;

  background-color: white;

  border-radius: 2px;

  overflow: hidden;

  max-height: 0;

}



.sous-menu > li > a {

  height: 50px;

  padding-left: 20px;

  width: 100%;

  align-items: center;

  display: flex;

}



nav > ul > li:hover > a{

  color: #F38B4A;

}



.sous-menu > li:hover {

  background-color: #F38B4A;

  

  

}



.sous-menu > li:hover > a {

  color: white;

}



@keyframes rotationFleche {

  0% {

    transform: rotate(0deg);

  }

  100%{

    transform: rotate(90deg);

  }



}



.menu-deroulant:hover > a:after{

  animation: rotationFleche 0.2s linear forwards;

}



@keyframes apparitionSousMenu {

  0% {

    box-shadow: 0px 3px 3px 1px black;

    border-top: 3px solid black;

  }

  30% {

    box-shadow: 0px 3px 3px 1px #438B97;

  }

  100% {

    max-height: 50em;

    border-top: 3px solid #438B97;

    box-shadow: 0px 3px 3px 1px #438B97;

  }

}



.menu-deroulant:hover > .sous-menu {

  animation: apparitionSousMenu 1s forwards;

}