@import url(https://fonts.googleapis.com/css?family=Average);
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
@import url(https://fonts.googleapis.com/css?family=Average|Libre+Baskerville:400italic|Lato:300|Oswald:300,400);

/* mobile */
@media screen and (max-width:1090px) {
	html {
		height:100%;
	}
	 
	body {
		margin:0;
	}
	
	.swal-modal {
		width:95% !important;
	}
	
	.swal-title, .swal-button {
		font-size:80px !important;
	}
	
	.swal-text {
		font-size:30px !important;
	}
	 
	div {
		word-wrap: normal;
		white-space: normal;
	}
	 
	.bg {
		animation:slide 3s ease-in-out infinite alternate;
		background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
		bottom:0;
		left:-50%;
		opacity:.5;
		position:fixed;
		right:-50%;
		top:0;
		z-index:-1;
	}
	 
	.bg2 {
		animation-direction:alternate-reverse;
		animation-duration:4s;
	}
	 
	.bg3 {
		animation-duration:5s;
	}

	.odd_email{
		visibility: hidden;
		width:0px;
		height:0px;
		padding:0px;
		margin:0px;
		border:0px;
		
	}
	
	.content {
		background-color:rgba(255,255,255,.8);
		border-radius:.25em;
		box-shadow:0 0 .25em rgba(0,0,0,.25);
		box-sizing:border-box;
		padding-left:10vmin;
		padding-right:10vmin;
		padding-top:30px;
		padding-bottom:50px;
		position:relative;
		margin: 0 auto;
		text-align:center;
		top:50px;
		min-height:790px;
		width:90%;
	}
	
	#cnt1 {
		height: 1800px;
	}
	
	#cnt2 {
		height: 1800px;
	}
	
	#cnt3 {
		height:1400px;
	}
	
	#cnt4 {
		height:2350px;
	}
	
	#cnt5 {
		height:5550px;
	}
	 
	h1 {
		font-family:"Indie Flower";
		font-size:5em;
	}
	 
	@keyframes slide {
		0% {
			transform:translateX(-25%);
		}
	 
		100% {
			transform:translateX(25%);
		}
	}

	div#container {
		height:790px;
		width:1088px;
		margin: 0 auto;
	}

	option:first {
		color: gray;
	}

	.button {
		margin-top:20px;
		border:1px solid gray;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
		background-color:white;
		border-radius:10px;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
		height:100px;
		cursor:pointer;
		font-family:Indie Flower;
		font-weight:bold;
		width:450px;
		font-size:50px;
		margin-top:70px;
	}

	textarea {
	  resize: none;
	  font-size:50px;
	  position:relative;
	  margin:0 auto;
	  width:100%;
	}

	.button:hover {
		background:lightyellow !important;
	}

	#button {
		background: rgb(1,34,105);
		background: linear-gradient(0deg, rgba(1,34,105,1) 0%, rgba(0,158,191,1) 100%);
		color:white;
		font-family: "sans-serif";
		margin-top:20px;
		border:1px solid white;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
		border-radius:10px;
		height:100px;
		width:500px;
		font-size:50px;
		cursor:pointer;
	}

	#button:hover {
		filter:brightness(1.25);
	}
	
	#password {
		border:1px solid gray;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
		background-color:white;
		border-radius:2px;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
		height:100px;
		width:600px;
		font-size:50px;
	}
	
	#submit {
		border:1px solid gray;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
		background-color:white;
		border-radius:2px;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
		height:100px;
		min-width:300px;
		font-size:50px;
		cursor:pointer;
		display:inline-block;
		margin-top:20px;
		
	}
	
	#insert {
		display:inline-block;
		margin:0 auto;
	}
	
	#explore {
		display:inline-block;
		margin:0 auto;
		margin-top:25px;
	}
	
	#sweep {
		display:inline-block;
		margin:0 auto;
		margin-top:25px;
	}

	div.selection {
		height:400px;
		padding:20px;
		width:500px;
		border-style:solid;
		border-width: 2px 2px 2px 2px;
		background-color:white;
		border-color:gray;
		border-radius:40px;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
		opacity:0.8;
		
	}
	
	div.selection:hover {
		opacity:1;
		cursor:pointer;
		
	}
	
	#people {
		border:1px solid gray;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
		background-color:white;
		border-radius:2px;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
		height:100px;
		width:500px;
		font-size:50px;
		text-align: center;
	}
	
	#people select {
		appearance:none;
		-moz-appearance: none; 
		-webkit-appearance: none; 
	}
	
	#people select::-ms-expand {
		display: none; 
	}
	
	.h1_selected {
		font-size:5em;
		color:darkblue;
	}

	.boxes {
		min-height:600px;
		width:400px;
		position:relative;
		margin: 0 auto;
		padding:10px;
		text-align:center;
		/*border-radius:10px;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
		border:1px solid gray;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);*/
	}
	.boxes:hover {
		cursor:pointer;
		filter:brightness(1.1);
	}

	.boxes-inner {
		min-height:800px;
		width:100%;
		position:relative;
		margin: 0 auto;
		margin-top:20px;
		padding:10px;
		border-radius:10px;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
		border:1px solid gray;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
	}

	table {
		width:100%;
	}

	td {
		text-align:center;
		display:block;
	}

	div.selection p {
		font-family:"Indie Flower";
		font-size: 50px;
		font-weight:bold;
	}

	div.selection img {
		width:200px;
		height:200px;
	}

	.image-box {
		position:relative;
		float:left;
		width:400px;
		padding:0;
		text-align:center;
	}
	.image-box img {
		width:400px;
		height:400px;
		box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.5);
		border-style: solid;
		border-width: 2px 2px 2px 2px;
		border-color: #FFFFFF;
		border-radius: 50% 50% 50% 50%;
	}
	.text-box {
		position:relative;
		width:100%;
		padding:0px;
		overflow-y: scroll;
		text-align: left;
		font-family: Trebuchet MS;
		height:780px;
		font-size:50px;
	}
	.mini-titles {
		padding:0;
		margin-bottom:15px;
		margin-top:0;
		margin-left:0;
		margin-right:0;
		text-align:center;
		font-size: 80px;
	}

	hr {
		border-top: 1px dashed gray;

	}	
	
	input[type="checkbox"] {
		height:35px;
		width:35px;
		outline: 1px solid darkblue;
		display:inline-block;
		margin-right:15px;
	}
	
	.successo {
		color:green;
		font-weight:bold;
		text-align:center;
		font-size:50px;
		font-family:Arial;
	}
	
	.fallimento {
		color:red;
		font-weight:bold;
		text-align:center;
		font-size:50px;
		font-family:Arial;
	}

}

/* desktop */
@media screen and (min-width:1091px) {
	html {
		height:100%;
	}
	 
	body {
		margin:0;
	}
	 
	div {
		word-wrap: normal;
		white-space: normal;
	}
	 
	.bg {
		animation:slide 3s ease-in-out infinite alternate;
		background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
		bottom:0;
		left:-50%;
		opacity:.5;
		position:fixed;
		right:-50%;
		top:0;
		z-index:-1;
	}
	 
	.bg2 {
		animation-direction:alternate-reverse;
		animation-duration:4s;
	}
	 
	.bg3 {
		animation-duration:5s;
	}

	.odd_email{
		visibility: hidden;
		width:0px;
		height:0px;
		padding:0px;
		margin:0px;
		border:0px;
		
	}
	 
	.content {
		background-color:rgba(255,255,255,.8);
		border-radius:.25em;
		box-shadow:0 0 .25em rgba(0,0,0,.25);
		box-sizing:border-box;
		padding-left:10vmin;
		padding-right:10vmin;
		padding-top:30px;
		padding-bottom:50px;
		position:relative;
		margin: 0 auto;
		text-align:center;
		top:50px;
		height:790px;
		width:1088px;
	}
	 
	h1 {
		font-family:"Indie Flower";
		font-size:40px;
	}
	 
	@keyframes slide {
		0% {
			transform:translateX(-25%);
		}
	 
		100% {
			transform:translateX(25%);
		}
	}

	div#container {
		height:790px;
		width:1088px;
		margin: 0 auto;
	}

	option:first {
		color: gray;
	}

	.button {
		margin-top:20px;
		border:1px solid gray;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
		background-color:white;
		border-radius:10px;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
		height:40px;
		cursor:pointer;
		font-family:Indie Flower;
		font-weight:bold;
		width:150px;
		font-size:18px;
		margin-top:70px;
	}

	textarea {
	  resize: none;
	  font-size:25px;
	  position:relative;
	  margin:0 auto;
	}

	.button:hover {
		background:lightyellow !important;
	}

	#button {
		background: rgb(1,34,105);
		background: linear-gradient(0deg, rgba(1,34,105,1) 0%, rgba(0,158,191,1) 100%);
		color:white;
		font-family: "sans-serif";
		margin-top:20px;
		border:1px solid white;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
		border-radius:10px;
		height:40px;
		width:200px;
		font-size:22px;
		cursor:pointer;
	}

	#button:hover {
		filter:brightness(1.25);
	}

	div.selection {
		height:180px;
		padding:20px;
		width:250px;
		border-style:solid;
		border-width: 2px 2px 2px 2px;
		background-color:white;
		border-color:gray;
		border-radius:40px;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
		opacity:0.8;
		
	}

	div.selection:hover {
		opacity:1;
		cursor:pointer;
		
	}

	.boxes {
		min-height:220px;
		width:165px;
		position:relative;
		margin: 0 auto;
		margin-top:20px;
		padding:10px;
		/*border-radius:10px;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
		border:1px solid gray;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);*/
	}
	.boxes:hover {
		cursor:pointer;
		filter:brightness(1.1);
	}

	.boxes-inner {
		min-height:500px;
		width:100%;
		position:relative;
		margin: 0 auto;
		margin-top:20px;
		padding:10px;
		border-radius:10px;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
		border:1px solid gray;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
	}

	table {
		width:100%;
	}

	td {
		text-align:center;
	}

	div.selection p {
		font-family:"Indie Flower";
		font-size: 25px;
		font-weight:bold;
	}

	div.selection img {
		width:80px;
		height:80px;
	}

	.image-box {
		position:relative;
		float:left;
		width:30%;
		padding:0;
		text-align:center;
		height:186px;
	}
	.image-box img {
		width:165px;
		height:165px;
		box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.5);
		border-style: solid;
		border-width: 2px 2px 2px 2px;
		border-color: #FFFFFF;
		border-radius: 50% 50% 50% 50%;
	}
	.text-box {
		position:relative;
		float:right;
		width:100%;
		padding:0px;
		overflow-y: scroll;
		text-align: left;
		font-family: Trebuchet MS;
		height:480px;
	}
	.mini-titles {
		padding:0;
		margin-bottom:15px;
		margin-top:0;
		margin-left:0;
		margin-right:0;
		text-align:center;
		font-size: 35px;
	}

	hr {
		border-top: 1px dashed gray;

	}
	
	#password {
		border:1px solid gray;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
		background-color:white;
		border-radius:2px;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
		height:40px;
		width:200px;
		font-size:19px;"
	}
	
	#submit {
		border:1px solid gray;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
		background-color:white;
		border-radius:2px;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
		height:40px;
		width:60px;
		font-size:19px;
		cursor:pointer;
	}
	#insert {
		float:left;
	}
	
	#explore {
		float:right;
	}
	
	#sweep {
		display:inline-block;
		margin:0 auto;
		margin-top:25px;
	}
	
	#people {
		border:1px solid gray;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
		background-color:white;
		border-radius:2px;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
		height:40px;
		width:200px;
		font-size:19px;
	}
	.h1_selected {
		font-size:35px;
		color:darkblue;
	}
	
	#cnt3 {
		height:875px;
	}
	
	#cnt4 {
		height:1160px;
	}
	
	#cnt5 {
		height:1200px;
	}
	
	.successo {
		color:green;
		font-weight:bold;
		text-align:center;
		font-size:18px;
		font-family:Arial;
	}
	
	.fallimento {
		color:red;
		font-weight:bold;
		text-align:center;
		font-size:18px;
		font-family:Arial;
	}
}