@charset "utf-8";

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-family: "Open Sans", sans-serif;
	font-weight: bold;
  }
/* CSS Document */
body {
	font-family: "bebas_neueregular", sans-serif;
	background-color: rgb(20, 19, 19);
	transition: 0.8s;
	text-align: center;
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-ms-transition: 0.8s;
	-o-transition: 0.8s;
  }
#container {
	font-family: "bebas_neueregular", sans-serif;
	font-size: 1.5em;
	width: 50%;
}
h1 {
	text-align: center;
	margin-bottom: 1.5%;
	color: #fff;
  }
  h2 {
	text-align: center;
	margin-bottom: 1.5%;
	font-size: .8em;
	color: #fff;
  }
input {
	direction: rtl;
	padding: 25px;
	color: rgb(17, 16, 16);
	font-size: 1em;
	cursor: pointer;
	border: none;
	outline: none;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
  }
  button {
	border: none;
	background-color: rgb(39, 36, 36);
	padding: 10px;
	color: white;
	margin: 2px;
	cursor: pointer;
	outline: none;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
  }
button:hover {
	background-color:#4fc3f7; 
}



@media (orientation: landscape) {
	#container {
		width: 50%;
		margin:auto;
		display: grid;
		grid-template-columns: repeat(12,1fr);
		grid-gap:15px;
		grid-row: auto;

	}
	h1,input,h2 {
		grid-column: 1 / 13;
	}
	.first-row, .second-row {
		grid-column: span 4;
	}
	.third-row {
		grid-column: span 3;
	}

	}
	@media (orientation: portrait) {
		#container {
			margin: auto;
			display: grid;
			grid-template-columns: repeat(12,1fr);
			grid-gap:15px;
			grid-row: auto;
	
		}
		h1 {			
			width: 100%;
			font-size: 1.2em;

		}
		#igual {
			grid-row: span 3;
		}
		h2 {
			width: 100%;
			font-size: 0.5em;
		}
		h1,input,h2 {
			width: 100%;
			grid-column: span 12;
		}
		.first-row, .second-row {
			grid-column: span 4;
		}
		.third-row {
			grid-column: span 4;
			font-size: 0.5em;

		}
	
		}