@font-face{
    font-family: "mariolettre";
    src : url("polices/lettremario.ttf");
  }
@font-face{
    font-family: "yoshilettre";
    src : url("polices/lettreyoshi.ttf");
  }

body, html {
	height: 100%;
	font-size: 1.4vh;
	font-family: mariolettre;



}



.row {
	margin-bottom: 0;
}

.bg-image {
	background: url('https://stmed.net/sites/default/files/yoshi%27s-woolly-world-hd-wallpapers-33934-583321.jpg') ;
	filter: blur(8px);
	background-position: center;
  background-repeat: no-repeat;
	background-size: cover;
	height: 100%; 
	position: absolute;
	width: 100%;

}

body {
	box-sizing: border-box
}


.container2 {
	background: url('https://stmed.net/sites/default/files/yoshi%27s-woolly-world-hd-wallpapers-33934-583321.jpg') ;
	background-position: center;
  background-repeat: no-repeat;
	background-size: cover;
height: 80%;
  color: white;
  border: 3px solid black;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;

	text-align: center;
	-moz-box-shadow: 8px 8px 12px #aaa; 
	-webkit-box-shadow: 8px 8px 12px #aaa; 
	box-shadow: 8px 8px 12px #555; 

}

/* nav */
.navbar{
	position: fixed !important;
	background: rgba(0, 0, 0, 0.6) !important;
	padding:0px 20px;
	font-family: mariolettre;
width: 100%;
padding-top: 10px;
z-index: 100;


}



.translate {
	transition-property: top;
	-webkit-transition-property: top;
	transition-duration: .5s;
	transition-timing-function: ease-out;
	top: 0;
	position: relative;
	}


 a:hover{
	text-decoration: none;
	font-size: 1.8vh;
	transition: 0.3s;
}

.text-black {
	color: black;
}
.nav-link {
	text-transform: uppercase;
	background: linear-gradient(to right,  green, yellow 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
font-size: 2vh;
	font-family: mariolettre;

	};


/* div centrale */

.insidediv {
	height: 100%;
	width: 100%;
	background-color: black;
	opacity: 0.3

	
	
}

/* burger */
.navbar-toggler{
	width: 47px;
	height: 34px;
	border:none;
	

}

/* btn */
a .btn, .btn-large, .btn-flat {
	
	
		
	padding: 0 0;
	
	}

	.active {
		z-index: 100;
	}


	.border2 {
		padding-top: 2%;
	}

nav, ul, a {
	padding: 0 0;
	
}


a:hover .btn {

		font-size: 2vh;
		transition: 0.5s;
	
}

a .btn {
	width: 200px;
	height: 80px;
	border: 1px solid black;
}


.btn:hover {
	color: white;
}

.text1 {
	font-size: 3vh;
}

.text12 {
	
	color: black;


 
padding-top: 6%;


	font-size: 5vh;


}
.text123 {
	
	text-transform: uppercase;
	background: linear-gradient(to right,  rgb(39, 155, 39), rgb(155, 101, 0)  100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
font-size: 8vh;
	font-family: mariolettre;

	padding-top: 2%;
}


/* media */
@media screen and (min-width: 200px) and (max-width: 990px) {
  .text12 {
    font-size: 3.8vh;
	}
	
	.border2 {
		display: none;
	}

.andtest {
	display: none
}


	.join {
		font-size: 1.8vh;
	}
	.text123 {
	
		text-transform: uppercase;
		background: linear-gradient(to right,  rgb(39, 155, 39), rgb(155, 101, 0)  100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	font-size: 3vh;
		font-family: mariolettre;
	
		padding-top: 6%;
	}
	

 .connexion {
	text-transform: uppercase;
	background: linear-gradient(to right,  green, yellow 100%) !important;
	background: transparent !important;
	border: none !important;
	color:  #DC143C  !important;

}


.inscription {
	text-transform: uppercase;
	background: linear-gradient(to right,  green, yellow 100%) !important;
	background: transparent !important;
	border: none !important;
	color:  yellow  !important;

}
}
/* btn */

.join {
	font-size: 2.2vh;
}

.heartbeat{-webkit-animation:heartbeat 60s ease-in-out infinite both;animation:heartbeat 60s ease-in-out infinite both}



 @-webkit-keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: green;
  margin: 5px auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}