:root {
	--input-padding-x: 1.5rem;
	--input-padding-y: .75rem;
  }

  html {
	  height: 100% /* Patch firefox 2020-05-12 */
  }
  
  body {
	height: 100%; /* Patch firefox 2020-05-12 */
	background: #007bff;
	background: linear-gradient(to right, #0062E6, #33AEFF);
	/*background: url(../pic/roundabout_fonroche.jpg) center;*/
  }
  
  .card-title {
	margin-top : 0%;
  }

  .img-center {
  	display: block;
	margin: -15px auto 20px auto;
  }

	.img-caps-lock{
		display : block;
		background: url(pic/caps_lock.png);
	} 

  .card-signin {
	margin-bottom: 10vh;
	margin-top: 10vh;
	border: 0;
	border-radius: 1rem;
	box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
  }
  
  .card-signin .card-title {
	margin-bottom: 2rem;
	font-weight: 300;
	font-size: 1.5rem;
  }
  
  .card-signin .card-body {
	padding: 2rem;
  }
  
  .form-signin {
	width: 100%;
  }
  
  .form-signin .btn {
	font-size: 80%;
	border-radius: 5rem;
	letter-spacing: .1rem;
	font-weight: bold;
	padding: 1rem;
	transition: all 0.2s;
  }
  
  .form-label-group {
	position: relative;
	margin-bottom: 1rem;
  }
  
  .form-label-group input {
	height: auto;
	border-radius: 2rem;
  }
  
  .form-label-group>input,
  .form-label-group>label {
	padding: var(--input-padding-y) var(--input-padding-x);
  }
  
  .form-label-group>label {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	margin-bottom: 0;
	/* Override default `<label>` margin */
	line-height: 1.5;
	color: #495057;
	border: 1px solid transparent;
	border-radius: .25rem;
	transition: all .1s ease-in-out;
  }
  
  .form-label-group input::-webkit-input-placeholder {
	color: transparent;
  }
  
  .form-label-group input:-ms-input-placeholder {
	color: transparent;
  }
  
  .form-label-group input::-ms-input-placeholder {
	color: #495057 !important;
  }
  
  .form-label-group input::-moz-placeholder {
	color: transparent;
  }
  
  .form-label-group input::placeholder {
	color: transparent;
  }
  
  .form-label-group input:not(:placeholder-shown) {
	padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
	padding-bottom: calc(var(--input-padding-y) / 3);
  }
  
  .form-label-group input:not(:placeholder-shown)~label {
	padding-top: calc(var(--input-padding-y) / 3);
	padding-bottom: calc(var(--input-padding-y) / 3);
	font-size: 12px;
	color: #777;
  }

  @supports (-ms-ime-align:auto) {
	label {
		color: transparent !important;
	}
  }
  
  .form-label-group input::-ms-input-placeholder {
	color: transparent;
  }
  
  .btn-google {
	color: white;
	background-color: #ea4335;
  }
  
  .btn-facebook {
	color: white;
	background-color: #3b5998;
  }
  
@keyframes 
infinite-spinning {
	from {
		transform:
		perspective(500px)
		rotateY(0deg);
	}
	to {
		transform:
		perspective(500px)
		rotateY(360deg);
	}
}

/*.earth{
	z-index:1;
	position:absolute;
	bottom:16vh;
	left:15vh;
	height:10vh;
	width:auto;
}*/

.animated{
	animation: infinite-spinning 5s infinite linear;
}