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");


}



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

}

#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}

.doors {
  /*display: flex;*/
  
}

.bank{
  background: #fafafa;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.4) inset;

  width: 100px;
  height: 150px;
  overflow: hidden;
  
  border-radius: 1ex;
  margin: 1ch;
  float: top;
}

#resultat{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  margin-top: 55%;
}

.door {
  background: #fafafa;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.4) inset;

  width: 100px;
  height: 150px;
  overflow: hidden;

  border-radius: 1ex;
  margin: 1ch;
  float: right;
}

.boxes {
  /* transform: translateY(0); */
  transition: transform 1s ease-in-out;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
}

.buttons {
  margin: 1rem 0 2rem 0;
}

button {
  cursor: pointer;

  font-size: 1.2rem;
  text-transform: uppercase;

  margin: 0 0.2rem 0 0.2rem;
}

.info {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
}


body{
  color: rgb(90,46,255);
  font-family: "casino";
  text-shadow:  0 0 7px rgb(147,112,219), 
                0 0 25px rgb(147,112,219), 
                0 0 30px rgb(147,112,219),
                0 0 35px rgb(147,112,219),
                0 0 40px rgb(147,112,219),
                0 0 50px rgb(147,112,219),
                0 0 60px rgb(147,112,219)
}

h1{
  color: rgb(190,46,255);
  text-shadow:  0 0 7px rgb(147,112,219), 
                0 0 10px rgb(147,112,219), 
                0 0 25px rgb(147,112,219),
                0 0 35px rgb(147,112,219),
                0 0 45px rgb(147,112,219)
}

.slot {
    position: absolute;
    z-index: 1; 
    margin-top: 18%;
    margin-left: 39%;


}

h2{
    position: absolute;
    z-index: 1;
    font-size: 200%;
    margin-top: 15%;
    margin-left: 46%;

    color: rgb(90,46,255);
    text-shadow:  0 0 7px rgb(0,0,219), 
                0 0 10px rgb(147,112,219), 
                0 0 25px rgb(147,112,219),
                0 0 35px rgb(147,112,219),
                0 0 45px rgb(147,112,219)
}


#dealer-cards img {
    height: 175px;
    width: 125px;
    margin: 1px;
}

#your-cards img {
    height: 175px;
    width: 125px;
    margin: 1px;
}

#hit {
    width: 100px;
    height: 50px;
    font-size: 20px;
}

#stay {
    width: 100px;
    height: 50px;
    font-size: 20px;
}

.buttonhs {
    position: fixed;
    margin-left: 5%;
    margin-top: 2%;

}


.bjform {
    position: absolute;
    z-index: 1;
    margin-top: 21%;
    margin-left: 38%;
}

.h2bj {

    position: absolute;
    z-index: 1;
    font-size: 200%;
    margin-top: 15%;
    margin-left: 43%;

    color: rgb(90,46,255);
    text-shadow:  0 0 7px rgb(0,0,219), 
                0 0 10px rgb(147,112,219), 
                0 0 25px rgb(147,112,219),
                0 0 35px rgb(147,112,219),
                0 0 45px rgb(147,112,219)

}

.reload {
    position: absolute;
    z-index: 1;
    margin-top: 49%;
    margin-left: 47%;
  
}