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

#demande_age{
  text-align: center;
  color: #fafafa;
}

.input_age{
  position: relative;
}