@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Montserrat+Subrayada);
@-ms-viewport{
  width: device-width;
}

 h1 { font-size: 2em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.17em; }
    h4 { font-size: 1.12em; }
    h5 { font-size: .83em; }
    h6 { font-size: .75em; }

html {
    font-family: 'Montserrat', sans-serif;
    height: 100%;
    width: 100%;
    overflow: hidden;

}

body {
    display: block;
    vertical-align: bottom;
    margin: 0;
    height: 100vh;
    width: 100vw;
    position: fixed;
}
.center{
    position: fixed;
  top: 10%;
  left: 53%;
  width: 50%;
  text-align: center;
  /* bring your own prefixes */
  transform: translate(-35%, -35%);
    transition-duration: .4s;
}

#center-text{
    position: fixed;
}

#particles-js{ 
		position:fixed;
		width: 100%; height: 100%;
		background-image: url("../statics/bg.jpeg");
		background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;
}


.resume{
        display: block;
        width:36%;
        margin-left: 32%;
        margin-right: 32%; 
        position: fixed;
        top: 100%;
        border:none;
        transition: 1s;
        transform-origin: 0% 0%;
        -webkit-transform: rotate(-30deg);
        -moz-transform: rotate(-30deg);
        -o-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
        transform: rotate(-30deg);
        transition-duration: .4s;
        
    }
    .resume:hover, .resume.hovered{
        display: block;
        width: 36%;
        margin-left: 32%;
        margin-right: 32%;  
        position: fixed;
        top: 10%;
        border:none;
        transform-origin: 0% 0%;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        transition-duration: .4s;
        transition-delay: .2s;

}

#resume-img{
    width: 100%;
}