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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
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: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

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

    *{
      box-sizing: border-box;
    }

    a{
      transition: all 0.3s ease;
    }

  	body{
/*   		background: #0f0c29;
		background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29); 
		background: linear-gradient(to right, #24243e, #302b63, #0f0c29); */

background: #C33764;
background: url('../img/yo1.png'), -webkit-linear-gradient(to top, #1D2671, #C33764);
background: url('../img/yo1.png'), linear-gradient(to top, #1D2671, #C33764);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;

  		margin: 0;
  		padding: 0;
     font-family: 'Poppins', sans-serif;
     font-weight: 600;
     color: #fff;
     line-height: 1em;
  	}

   	canvas, #gif{
  		border: 15px solid #000;
  		display: block;
  		width: 350px;
  		height: 350px;
  		margin:  0 auto;
  		display: block;
		transform: translate(-50%, -50%);
  		position: absolute;
  		top: 50%;
  		left: 50%;

  	}

    #gif{
    background: url('../img/yo.gif') no-repeat center center;
    background-size: cover;
    }

    h1{
      font-size: 52px;
      text-align: right;
      width: 400px;
      line-height: 60px;
      transform: translate(-50%, -50%);
      margin-top: -145px;
      margin-left: -270px;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      color: #fff;
      text-shadow: 0 0 1px #555;
    }

      h2{
      font-size: 52px;
      text-align: left;
      width: 350px;
      line-height: 60px;
      transform: translate(-50%, -50%);
      margin-top: 168px;
      margin-left: 220px;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      color: #fff;
      text-shadow: 0 0 1px #555;
    }

    #contact{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      text-align: right;
      width: 100%;
    }

     #contact a{
      font-size: 22px;
      margin-right: 20px;
      display: inline-block;
      width: 20px;
      line-height: 32px;
     }

     #contact a i{
      transition: all 0.2s ease;
      color: #fff;
      font-weight: normal;
     }

       #contact a:hover i{
      transform: scale(1.15);
     }


@media screen and (max-width: 780px) {
  
  canvas, #gif{
      width: 260px;
      height: 260px;
    }

    h1{
      font-size: 50px;
      text-align: right;
      width: 100%;
      line-height: 58px;
      margin-top: -154px;
      margin-left:0;
      padding-right: 15px;
    }

      h2{
      font-size: 50px;
      text-align: left;
      width: 100%;
      line-height: 58px;
      margin-top: 122px;
      margin-left: 0;
      padding-left: 15px;
    }

     #contact{
      bottom: 15px;
      top: auto;
      transform: none;
      text-align: center;
      width: 100%;
    }

    #contact br{
    display: none;
    }

     #contact a{
      font-size: 28px;
      margin: 15px 12px;
      display: inline;
      width: 30px;
     }

}