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

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

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

@media (max-width: 600px){
	wrapper-main {
		width:1000px;
		padding-left: 10px;
		padding-right: 10px;
		margin: 0 auto;
		border: 4px  solid rgb(8, 8, 8);
		background-color: #c4c4c4;
	}
}
	

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

	@media (min-width: 768px){
		.wrapper-main {
			width: 100%;
			padding-left: 10px;
			padding-right: 10px;
			margin: 20px auto;
			border: 4px solid rgb(222, 155, 175);
			background-color: #babea8;
		}
	}

	@media (min-width: 992px){
		.wrapper-main {
			width: 100%;
			padding-left: 10px;
			padding-right: 10px;
			margin: 0 auto;
			border: 4px solid rgb(197, 121, 29);
			background-color: #2c2c2c;
		}
	}