html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;text-decoration:none;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

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

html{
   font-size: 62.5%;
   -webkit-font-smoothing: antialiased;
}

body{
   display: flex;
   min-height: 100vh;
   flex-direction: column;
   background: url("bg.svg");
   font-family: "Source Sans Pro", sans-serif;
}

section{
   display: flex;
   flex: 1;
   justify-content: center;
}

article{
   text-align: center;
   padding-top: calc(12vh);
}

h1{
   display: block;
   text-indent: -4700px;
   width: 120px;
   height: 86px;
   background: url("slinky.svg") no-repeat;
   margin:0 auto 38px;
   position: relative;
}

h1:before, h1:after{
   content: "";
   display: block;
   width: 292px;
   height: 28px;
   position: absolute;
   top:25px;
}
h1:before{
   background: url("slinky-left.svg") no-repeat;
   right: calc(100% + 32px);
}
h1:after{
   background: url("slinky-right.svg") no-repeat;
   left: calc(100% + 32px);
}

h2{
   display: block;
   color: #575759;
   line-height: 6.4rem;
   font-weight: 600;
   font-size: 4.8rem;
   width: 100%;
   max-width: 580px;
   margin:0 auto 64px;
}

article>a{
   display: inline-block;
   padding: 15px 32px;
   color: #fff;
   text-transform: uppercase;
   font-size: 1.8rem;
   font-weight: 700;
   background: #6079EA;
   box-shadow: 0 3px 0 0 #39F393;
   border-radius: 100px;
   letter-spacing: 1.23px;
   margin-bottom: 38px;
}

article>a:hover{
   background: #788FF4;
}

article>a:active{
   background: #5269D2;
   transform: translate(0, 3px);
   box-shadow: none;
}

footer p{
   color: #636465;
   font-size: 1.8rem;
   text-align: center;
   margin-bottom: 32px;
}

footer p a{
   color: #6079EA;
   text-decoration: underline;
   font-weight: 700;
}

@media screen and (max-width: 450px){

   h2{
      font-size: 3.6rem;
      line-height: 4.2rem;
   }

}

@media screen and (max-height: 580px){

   section{
      display: inline;
   }
}