Отзывчивое модальное окно на CSS

by Andrey Dobrovoi

HTML

<a href="#win1" class="btn">Открыть</a>
<a href="#x" class="overlay" id="win1"></a>
<div class="modal">
  <h1>Responsive Modal <span>With absolute position</span></h1>
  <p>Mussum ipsum cacilds, vidis litro abertis, onsetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis.</p>
  <!-- modal close button -->
				<a href="#close" class="close" title="Закрыть"></a>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,cyrillic);

body {
  background: -webkit-linear-gradient(90deg, #abbaab 10%, #ffffff 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #abbaab 10%, #ffffff 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #abbaab 10%, #ffffff 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #abbaab 10%, #ffffff 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #abbaab 10%, #ffffff 90%); /* W3C */
  font-family: 'Open Sans',sans-serif;
}
.btn{
	text-align:center;
  text-decoration: none;
	margin:170px auto;
	padding: 20px 0px;
	display:block;
	height:30px;
	width:175px;
	cursor:pointer;
	font-size:25px;
	color:#F0F0F0;
	border-radius:10px;
	border-bottom:4px solid #0045A6;
	box-shadow: 6px 6px 6px #999;
	-webkit-user-select: none;        
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	background: -webkit-linear-gradient(#00C8F8, #0067F7);
    background: -o-linear-gradient(#00C8F8, #0067F7);
    background: -moz-linear-gradient(#00C8F8, #0067F7);
    background: linear-gradient(#00C8F8, #0067F7);
	
	-webkit-transition: background 0.05s linear;  
    -moz-transition: background 0.05s linear;  
    -o-transition: background 0.05s linear;  
    transition: background 0.05s linear;
	background-size:1px 200px;
	transition: all .05s linear;
}

.btn:hover{
	background-position:100px;
}

.btn:active {
	box-shadow: 2px 2px 2px #777;
	border-bottom:1px solid #0045A6;
	transform: translateY(3px);
}
.overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
/* фон затемнения */
     background-image: linear-gradient(-123deg, #2d363d 0%, #677274 20%, #7a8485 28%, #9d9c98 61%, #c3b5a8 100%);
    position: fixed; /* фиксированное поцизионирование */
    cursor: default; /* тип курсара */
     -moz-animation: move 1s 1;
    -webkit-animation: move 1s 1;
 ...