* {
	margin: 0;
	padding: 0;
}

body {
		background-image: url('pc.gif');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 100vh; /* Altura el 100% para la imagen de fondo */
		font-family: 'Roboto', sans-serif;
		
}

.contenedor {
	margin: 0 auto;
	overflow: hidden;
	width: 80%;
	max-width: 1000px;
	
}

.main {
	height: 70vh;
	color: white;

}


.header {
	height: 25%;
	background-color:transparent;
}

.footer {
	height: 10px;
	background-color:transparent;
}

h1{
	color:white;
	font-size:4em;
	right:0;
	left:0;	
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	line-height: 55px;
	width:100%;
}
h2{
	color:#ffc043;
	font-size:22px;
	right:0;
	left:0;	
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	width:100%;
}

	@media only screen and (max-width: 600px) {
		body {
			background-image: url(movil.gif);
			color: #FFF;
			margin: 0 auto;
			overflow: hidden;
			width: 90%;
			font-size: 18px;
		}

		.header {
			height: 45%;
			background-color:transparent;
			margin-top: 20%;
		}

		h1{
			color:white;
			font-size:2.5em;
			right:0;
			left:0;	
			font-family: 'Roboto', sans-serif;
			font-weight: 900;
			line-height: 40px;
			width:100%;
		}

		h2{
			color:#ffc043;
			font-size:18px;
			right:0;
			left:0;	
			font-family: 'Roboto', sans-serif;
			font-weight: 500;
			width:100%;
		}
	} 

	@media only screen and (max-width: 800px) {
		body {
			background-image: url(movil.gif);
			color: #FFF;
			margin: 0 auto;
			overflow: hidden;
			width: 90%;
			font-size: 22px;
		}

		.header {
			height: 45%;
			background-color:transparent;
			margin-top: 20%;
		}

		h1{
			color:white;
			font-size:2.5em;
			right:0;
			left:0;	
			font-family: 'Roboto', sans-serif;
			font-weight: 900;
			line-height: 40px;
			width:100%;
		}

		h2{
			color:#ffc043;
			font-size:22px;
			right:0;
			left:0;	
			font-family: 'Roboto', sans-serif;
			font-weight: 500;
			width:100%;
		}
	} 

	@media only screen and (max-width: 400px) {
		body {
			background-image: url(movil.gif);
			color: #FFF;
			margin: 0 auto;
			overflow: hidden;
			width: 93%;
			font-size:15px;
		}

		.header {
			height: 45%;
			background-color:transparent;
			margin-top: 20%;
		}

		h1{
			color:white;
			font-size:2.5em;
			right:0;
			left:0;	
			font-family: 'Roboto', sans-serif;
			font-weight: 900;
			line-height: 40px;
			width:100%;
		}

		h2{
			color:#ffc043;
			right:0;
			left:0;	
			font-family: 'Roboto', sans-serif;
			font-weight: 500;
			width:100%;
		}
	} 

	@media only screen and (max-width: 300px) {
		body {
			background-image: url(movil.gif);
			color: #FFF;
			margin: 0 auto;
			overflow: hidden;
			width: 98%;
			font-size: 16px;
		}

		.header {
			height: 5%;
			background-color:transparent;
			margin-top: 5%;
		}

		h1{
			color:white;
			font-size:1.5em;
			right:0;
			left:0;	
			font-family: 'Roboto', sans-serif;
			font-weight: 800;
			line-height: 30px;
			width:100%;
		}

		h2{
			color:#ffc043;
			font-size:16px;
			right:0;
			left:0;	
			font-family: 'Roboto', sans-serif;
			font-weight: 500;
			width:100%;
		}
	}