*,*:before,*:after{margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; outline:none;} 

html{font-size: 20px; height:100%; font-family: Arial, sans-serif;}
body{height:100%; color: #888888; background-color: #111418; font-family: Tahoma, sans-serif;}

.box {display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 0 20px;}
.note span{display: inline-block; font-family: 'Arial Black', Gadget, sans-serif; font-weight: bold; background-color: #DC3545; color: #ffffff; padding: 5px 15px; font-size: 42px; border-radius: 5px;}
h1{font-family: 'Arial Black', Gadget, sans-serif; font-size: 72px; color: #ffffff; font-weight: bold; padding: 10px 0;}
.offer{padding: 60px 0 0 0;}
.offer a{display: inline-block; background-color: #28A745; color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 16px; padding: 20px 25px; border-radius: 5px;}
.offer a:hover{background-color: #24a341;}


@media screen and (max-width: 800px) {
html{font-size: 18px;;}
.note span{font-size: 28px;}
h1{font-size: 38px;}
.offer a{font-size: 15px; padding: 15px 20px;}
}