*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}

body,html{
  height:100%;
  width:100%
}

body{
  margin:0;
  color:#fff;
  background: #654ea3;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #eaafc8, #654ea3);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #eaafc8, #654ea3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border: 24px solid #33333f;
  line-height: 1;
}

::-moz-selection {
  background: #f2d5e0;
  text-shadow: none;
}

::selection {
  background: #f2d5e0;
  text-shadow: none;
}


.wrapper{
  overflow:hidden;
  width:800px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-400px;
  margin-top:-150px;
  text-align:center
}

.f-dmd{font-family:'DM Serif Display', serif}
.f-dms{font-family:'DM Sans',sans-serif}

h1,h2,h3{margin:0}

h1{
  font-size:96px;
  font-weight:400;
  font-style: none;
  margin-bottom:16px;
  line-height:1.4;
  color: #fff;
}

h2{
  font-size:30px;
  font-weight:400;
  font-style: italic;
}

h3{
  font-size:20px;
  font-weight:400;
  letter-spacing:.25em;
  margin-bottom:1.5em;
}

p{
  font-size: 16px;
}

a {
  color: #fff;
  position: relative; /* 1 */
  text-decoration: none; /* 2 */
  display: inline-block; /* 3 */
}


a::before,
a::after {
  content: '';
  position: absolute; /* 1 */
  top: 100%; /* 1 */
  height: 1px; /* 2 */
  width: 50%; /* 2 */
  transform: scaleX(0); /* 3 */
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); /* 4 */
  background-color: currentcolor; /* 5 */
}

a::before {
  left: 0;
  transform-origin: left;
}

a::after {
  right: 0;
  transform-origin: right;
}

a:active::before,
a:hover::before,
a:active::after,
a:hover::after {
  transform: scaleX(1); /* 1 */
}

hr{border:solid #fff;border-width:1px 0 0;margin:60px 10px 60px}


@media (max-width:899px){
  body{border-width:10px}
  h1{font-size:40px}
  h2{font-size: 18px;}
  h3{font-size:14px; line-height: 1.2; padding: 50px 0px 10px; margin-bottom: 0}
  p {font-size: 14px}

  a::before,
  a::after {
    content: '';
    position: absolute; /* 1 */
    top: 100%; /* 1 */
    height: 1px; /* 2 */
    width: 50%; /* 2 */
    transform: scaleX(1); /* 3 */
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); /* 4 */
    background-color: rgba(255, 255, 255, .5); /* 5 */
  }

  a:active::before,
  a:hover::before,
  a:active::after,
  a:hover::after {
    background-color: rgba(255, 255, 255, 1); /* 5 */
  }


  hr{display:none;}
  .wrapper{width:auto;position:static;left:auto;top:auto;margin:90px 0 0}
}