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

body {  padding: 0;  margin: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('rose-petals.svg') center center no-repeat; background-size: cover;}
#notfound {  position: relative;  height: 100vh;}

#notfound .notfound {  position: absolute;  left: 50%;  top: 50%;  -webkit-transform: translate(-50%, -50%);      -ms-transform: translate(-50%, -50%);          transform: translate(-50%, -50%);}

.notfound { width: 100%;  line-height: 1.4;  text-align: center;}
.notfound .notfound-404 {  position: relative;   margin-bottom: 20px;  z-index: -1;}

.notfound .notfound-404 h1 { display:block;  font-family: 'Roboto', sans-serif;  position: absolute;  left: 50%;  top: 20%;  -webkit-transform: translate(-50% , -50%);      -ms-transform: translate(-50% , -50%);          transform: translate(-50% , -50%);  font-size:60px;
  font-weight: 600;  margin-top:2px;  margin-bottom: 0px;  margin-left: -12px;  color: #FFF; }


.notfound .notfound-404 h2 {display:block;   font-family: 'Roboto', sans-serif;  position: absolute;  left: 50%;  top: 20%;  -webkit-transform: translate(-50% , -50%);      -ms-transform: translate(-50% , -50%);          transform: translate(-50% , -50%);  font-size:30px;
  font-weight: 400;  margin-top: 0px;  margin-bottom: 0px;  margin-left: -12px;  color: #FFF; padding-bottom:150px; }

.notfound a:hover {  color: #8400ff;}

@media only screen and (max-width: 767px) {    .notfound .notfound-404 h2 {        font-size: 24px;    }}

@media only screen and (max-width: 480px) {  .notfound .notfound-404 h1 {      font-size: 30px;  }}