MSJS_clochard_saulnier/styles.css

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

.accueil {
	position:absolute;
	left:88%; z-index:2;
	
	width: 10%;
	height:18%;
	
	
}

.accueil:hover {
     border : 2px solid rgba(147,112,219,0.5);
     box-shadow:8px 8px 10px 0 rgba(147,112,219,0.5);
}

.img1 {
	position: absolute;
	z-index:1; bottom:52%; left:16%;
	border-radius: 10px;
	height:100px;
	width: 200px;
	transition: opacity linear .5s;


}

.img2 {
	position: absolute;
	z-index:1; bottom:52%; left:33%;
	border-radius: 10px;
	height:100px;
	width: 200px;
	transition: opacity linear .5s;

}


.img3 {
	position: absolute;
	z-index:1; bottom:52%; left:51%;
	border-radius: 10px;
	height:100px;
	width: 200px;
	transition: opacity linear .5s;

}
	
.img4 {
	position: absolute;
	z-index:1; bottom:52%; left:69%;
	border-radius: 10px;
	height:100px;
	width: 200px;
	transition: opacity linear .5s;

}

.img1 {
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.2s;
}
.img1:hover {
     border : 2px solid rgba(147,112,219,0.5);
     box-shadow:8px 8px 10px 0 rgba(147,112,219,0.5);
}

.img2 {
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.2s;
}
.img2:hover {
     border : 2px solid rgba(147,112,219,0.5);
     box-shadow:8px 8px 10px 0 rgba(147,112,219,0.5);
}

.img3 {
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.2s;
}
.img3:hover {
     border : 2px solid rgba(147,112,219,0.5);
     box-shadow:8px 8px 10px 0 rgba(147,112,219,0.5);
}

.img4 {
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.2s;
}
.img4:hover {
     border : 2px solid rgba(147,112,219,0.5);
     box-shadow:8px 8px 10px 0 rgba(147,112,219,0.5);
}
.loader {

    position: absolute;
	
	z-index: 1;

    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;

  

}



.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;

}