* { -webkit-box-sizing: border-box; box-sizing: border-box; } body { padding: 0; margin: 0; } #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 { max-width: 520px; width: 100%; text-align: center; line-height: 1.4; } .notfound .notfound-404 { height: 190px; } .notfound .notfound-404 h1 { font-family: 'Montserrat', sans-serif; font-size: 146px; font-weight: 700; margin: 0px; color: #fff; } .notfound h2 { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 700; margin: 0; text-transform: uppercase; color: #fff; } .notfound p { font-family: 'Montserrat', sans-serif; color: #fff; font-weight: 300; } .notfound a { font-family: 'Montserrat', sans-serif; display: inline-block; padding: 12px 30px; font-weight: 700; background-color: #8b0000; color: #fff; border-radius: 40px; text-decoration: none; -webkit-transition: 0.2s all; transition: 0.2s all; } .notfound a:hover { opacity: 0.8; } body { background: black; color: white; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-image: url('https://scape05.com/css/img/bg.jpg'); background-position: top center; background-repeat: repeat-y; text-align: center; margin: 0; } @media only screen and (max-width: 767px) { .notfound .notfound-404 { height: 115px; } .notfound .notfound-404 h1 { font-size: 86px; } .notfound .notfound-404 h1>span { width: 86px; height: 86px; } }