html {

	scroll-behavior: smooth;

	font-family: "Open Sans";

	overflow-x: hidden;

	background: var(--colorBackground);

	margin-top: 4vh;

	transition: .2s;

}

.container {

	display: grid;
	grid-template-columns: 1.35fr 2fr;
	grid-template-areas:
		"tituloHome tituloHome"
		"ubicacionHome ubicacionHome"
		"temperaturaHome climaHome"
		"errorUbicacionDesactivada errorUbicacionDesactivada"
		". ."
		". ."
		"tituloOpciones tituloOpciones"
		"subContainerOpciones subContainerOpciones"
		". ."
		". ."
		"tituloClimaMundo tituloClimaMundo"
		"inputClima inputClima"
		"errorInput errorInput"
		"subContainer subContainer";
	grid-gap: 10px;
	width: 70%;
	margin: 0 auto;
}

#tituloHome {
	grid-area: tituloHome;
}

#ubicacionHome {
	grid-area: ubicacionHome;
}

#temperaturaHome {
	grid-area: temperaturaHome;
}

#climaHome {
	grid-area: climaHome;
}

#errorUbicacionDesactivada{
	grid-area: errorUbicacionDesactivada;
}

#tituloOpciones {
	grid-area: tituloOpciones;
}

#subContainerOpciones {
	grid-area: subContainerOpciones;
	display: grid;
	grid-template-columns: repeat(3, 0.5fr);
	grid-gap: 10px;
}

#tituloClimaMundo {
	grid-area: tituloClimaMundo;
}

#errorInput {
	grid-area: errorInput;
}

#inputNuevosClimas {
	grid-area: inputClima;
}


@media (min-width: 1200px) {

	#subContainer {
		grid-area: subContainer;
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-gap: 20px;
	}
	
}

@media (max-width: 1200px) {

	#subContainer {
		grid-area: subContainer;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 20px;
	}
	
}

@media (max-width: 768px) {

	#subContainer {
		grid-area: subContainer;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20px;
	}
	
}

@media (max-width: 576px) {


	#subContainer {
		grid-area: subContainer;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20px;
	}


	.container {

		display: grid;
		grid-template-columns: 1.35fr 2fr;
		grid-template-areas:
			"tituloHome tituloHome"
			"ubicacionHome ubicacionHome"
			"temperaturaHome climaHome"
			"errorUbicacionDesactivada errorUbicacionDesactivada"
			". ."
			". ."
			"tituloOpciones tituloOpciones"
			"subContainerOpciones subContainerOpciones"
			". ."
			". ."
			"tituloClimaMundo tituloClimaMundo"
			"inputClima inputClima"
			"errorInput errorInput"
			"subContainer subContainer";
		grid-gap: 10px;
		width: 90%;
		margin: 0 auto;
	}
}