html {
	font-size: 62.5%
}
body {
	background-color:#ccc ;
	color: #7c0808;
	text-align: center;
}
.wrapper-main{
	width: 100% ;
	padding: 100px;
	margin: 30px;
	border: 4px solid #00ff00;
}
h1 {
	font-size: 9.2rem;
}

p {
	font-size:  2.6rem;
	color: #051354;
}

a {
	display:  block;
	width: fit-content;
	border: 2px solid #2c2c2c;
	padding: 10px 20px;
	margin: 20px auto 0;
	font-size: 24px;
}

@media (max-width: 600px){
	wrapper-main {
		width:1000px;
		padding: 100px 0;
		margin: 0 auto;
		border: 4px  solid blueviolet;
		background-color: #334133;
	}
}
	

	@media (min-width: 601px){
		.wrapper-main {
			width: 100%;
			padding: 100px 0;
			margin: 0 auto;
			border: 4px solid blueviolet;
			background-color: #82ba6e;
		}
	}

	@media (min-width: 768px){
		.wrapper-main {
			width: 100%;
			padding: 100px 0;
			margin: 0 auto;
			border: 4px solid rgb(164, 31, 71);
			background-color: #9db934;
		}
	}

	@media (min-width: 992px){
		.wrapper-main {
			width: 100%;
			padding: 100px 0;
			margin: 0 auto;
			border: 4px solid rgb(197, 121, 29);
			background-color: #2c2c2c;
		}
	}
	@media only screen and (max-width: 600px) and (orientation: landscape) {
		.wrapper-main {
			width: 100%;
			padding: 100px 0;
			margin: 0 auto;
			border: 4px solid rgb(32, 117, 69);
			background-color: #d3d338;
		}
	}	

	
	@media only screen and (max-width: 600px) and (max-width:  768px) {
		.wrapper-main {
			width: 100%;
			padding: 100px 0;
			margin: 0 auto;
			border: 4px solid blueviolet;
			background-color: #1b1b18;
		}
	}