@media all and (max-width: 500px) /*меньше 1000|||  0-500*/{
	body{
		font-family: sans-serif;
		margin: 0;

		background: linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 0, 191), rgb(255, 0, 0));
	}



	.flex-nav ul{
		border: 1px solid black;
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
	}

	.cl1{
		flex: 9 1 100%;  /*grow-коефициент пропорции по местам; shtink-размер сжатия за коефициентом; basis-ширина*/
	}

	.cl2{
		flex: 9 1 50%;
	}

}

@media all and (min-width: 500px) and (max-width: 1000px) /*500-1000*/{
	body{
		font-family: sans-serif;
		margin: 0;

		background: linear-gradient(90deg, rgb(0, 255, 255), rgb(255, 255, 0), rgb(0, 0, 255));
	}

	.flex-nav ul{
		border: 1px solid black;
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
	}

	.cl1{
		flex: 9 1 50%;
	}

	.cl2{
		flex: 9 1 25%;
	}
	a{
		font-size: 100px;
		font-weight: 500;
	}
}

@media all and (min-width: 1000px){ /*1000 ; +ОО*/
	body{
		font-family: sans-serif;
		margin: 0;

		background: linear-gradient(90deg, rgb(255, 0, 255), rgb(255, 255, 0), rgb(0,255, 0 ));
	}

	.flex-nav ul{
		border: 1px solid black;
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
	}

	.cl1{
		flex-grow: 3;
	}

	.cl2{
		flex-grow: 1;
	}
}
html{
	box-sizing: border-box;
}
*, *:before, *:after{
	box-sizing: inherit;
}



	body{
		font-family: sans-serif;
		margin: 0;

	/*	background: linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 0, 191), rgb(255, 0, 0));*/
	}


a{
	color:white;
	text-decoration: none;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	padding: 20px 5px;
	width: 100%;
	text-align: center;
	font-weight: 100;
	letter-spacing: 2px;
}
a:hover{
	background: rgba(0, 0, 0, 0.3);
}
.wrapper{
	max-width: 1000px;
	margin: 0 auto;
	padding: 50px;
/*	display: flex;
	justify-content: center;*/
}

/*.flex-nav ul{
	border: 1px solid black;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}*/
/*.cl1{
	flex-grow: 3;
}
.cl2{
	flex-grow: 1;
}*/