@import url('https://fonts.googleapis.com/css?family=Arima+Madurai');
@import url('https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap');

/*
 * Globals
*/
html, body, #next-form{
	width: 100vw;
	height: 100vh;
}

body{
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

#footer{
	width: 100%;
	text-align: center;
	bottom: 0px;
	padding-bottom: 10px;
   position: fixed;
   left: 0;
  z-index: -10;
}

#game{
	height: 90%;
	width: 100%;
	overflow-x: auto;
}

#buttondiv{
}

#next-button {
    font-size: 2rem;
	z-index: 1;
	margin-top: 50px;
}

#reload{
	height: 50vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}
 
/* Links */
a, a:focus, a:hover {
	color: #fff;
}

/* Custom default button */
.btn-secondary, .btn-secondary:hover, .btn-secondary:focus {
	color: #333;
	text-shadow: none; /* Prevent inheritance from `body` */
	background-color: #fff;
	border: .05rem solid #fff;
	font-family: 'Bebas Neue', Arial;
	z-index: 100;
}



.btn-secondary:hover {
	background-color: #E0E0E0;
}

.btn-secondary:active {
  background-color: #E0E0E0;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}



body {
	padding-top: 10px;
	color: #fff;
	text-align: center;
	position: fixed; top: 0; bottom: 0;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

.textcard {
    font-family: 'Arima Madurai', Arial;
}

.menu{
	font-family: 'Bebas Neue', Arial;
}

.title{
	font-family: 'Bebas Neue', Arial;
}

.maxselectform{
	margin-top: 10px;
	max-width: 100px;
	margin-left: auto;
	margin-right: auto;
}

.menu{
	height: 50px;
	display: flex;
    align-items: flex-end;
    font-size: 34px;
    margin-bottom: 20px;
}

.text-danger{
	color: #e73c7e;
}
.menu-right{
	padding-top: 0px;
	text-align: right;
}

.menu-left{
	padding-top: 0px;
	text-align: left;
}


.icon img{
	max-width: 200px;
}
	
.nameform{
	padding-top: 20px;
	padding-bottom: 80px;
}

.title{
	font-family: 'Bebas Neue', Arial;
}

.textcard{
	width:100%;
	height: 300px;	
	background-color:rgba(0, 0, 0, 0.5);
	display: flex;
	padding: 20px;
	justify-content: center;
	align-items: center;
	border-radius: 25px;
}

.form-check-input:checked {
    background-color: #e73c7e;
    border-color: pink;
}

.form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='pink'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='pink'/%3e%3c/svg%3e");
}


/*rotate phone*/
.rotate{
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display: none;
  padding: 100px;
}

.phone {
  margin: auto;
  height: 50px;
  width: 100px;
  border: 3px solid white;
  border-radius: 10px;
  animation: rotate 1.5s ease-in-out infinite alternate;
  display: none;
}

.message {
  color: white;
  font-size: 1em;
  margin-top: 40px;
  display: none;
}

@keyframes rotate {
  0% {
		transform: rotate(0deg)
	}
	50% {
		transform: rotate(-90deg)
	}
	100% {
		transform: rotate(-90deg)
	}
}

@media screen and (max-width: 991px) and (min-aspect-ratio: 13/9) {
	.phone, .message, .rotate {
		display: block;
	}
	#footer, #next-form {
		display: none;
	}
}
/*end rotate phone*/


@media (max-width: 991px) {
	.textcard{
		font-size: 1.5rem;
	}
	
	.nextbutton {
	    width: 80%;
	}
	
	.title{
		font-size: 2.8rem;
	}
}
	
@media (min-width: 992px) {
	.nameform{
		max-width: 510px;
		margin-left: auto;
		margin-right: auto;
	}
	.textcard{
		font-size: 2rem;
	}
	
	.title{
		font-size: 4rem;
	}
}