body{ 
	background-color:deepskyblue;
	
	-webkit-animation: bgcolor 15s infinite;
	animation: bgcolor 15s infinite;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
	font-family: "Dejavu Sans", sans-serif;

}


@keyframes bgcolor {
	0% {
		background-color: #45a3e5
	}

	25% {
		background-color: #66bf39
	}

	50% {
		background-color: #f35
	}

	75% {
		background-color: #eb670f
	}

	100% {
		background-color: #864cbf
	}
}
.container-sm{
	border: 1px solid #dee2e6;
	border-radius: 1em;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	background-color: rgba(256, 256, 256, 0.85);
	
	padding: 3rem;
	text-align: center;
	margin: auto;
	max-width: 38em;
	margin-top: 10%;
}


/* new body styles */
/*body{
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #45a3e5, #66bf39, #eb670f, #f35, #864cbf,  #ff598b);
	background-size: 800% 800%;
	height: 100%;
	animation: gradient 60s linear infinite;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	30% {
		background-position: 80% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	70% {
		background-position: 80% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}*/
input{
	border: none;
	background-color: transparent;
	padding: 0.3em 0.5em;
	outline: none;
	border-bottom: 2px solid #12edff;
	transition: 0.4s;
}
input[type="submit"]{
	border: 2px solid #12edff;
	border-radius: 1em;
}
input:focus{
	border-color: #e73c7e;
	transform: scale(1.05);
}
input[type="submit"]:hover{
	border-color: #f09b55;
	transform: scale(1.1);
	box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.15);
}
@media screen and (max-width: 576px) {
	.not_in_mobile{
		display: none;
	}
	input{
		padding: 0.5em 0.5em;
	}
}