* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body{font-family:system-ui, sans-serif;height:100%;background:#fafafa;line-height:1.5;}
.safirWrapper{display:flex;align-items:center;height:100%;color:#333;justify-content:center;text-align:center;}
.safirWrapper .inner{max-width:500px;width:100%;}
.image{margin:0 auto 15px;}
.image img{width:80px;height:80px;}
h1{font-size:26px;}
p {
font-size: 18px;
margin-bottom: 15px;
} a{color:#66c;text-decoration:none;}
.info{margin-bottom:15px;font-size:12px;color:#818181;}
form{display:flex;}
input[type=text]{padding:10px;border:2px solid #dedede;border-right:0;width:calc(100% - 50px);outline:0;background:#fff;font-size:14px;font-family:monospace;height:50px;border-radius:4px 0 0 4px;-webkit-appearance:none;}
button{display:block;width:50px;height:50px;background:#dedede;border:0;cursor:pointer;line-height:50px;outline:0;border-radius:0 4px 4px 0;}
button:hover{background:#cdcdcd;}
button svg{width:20px;vertical-align:middle;}
#warning{margin-top:10px;line-height:20px;height:20px;color:#f22;font-weight:500;animation:shake .2s cubic-bezier(.19,.49,.38,.79) both;animation-iteration-count:3;transform:translateX(0);}
@keyframes shake{
25%{transform:translateX(-10px)}
75%{transform:translateX(10px)}
100%{transform:translateX(0)}
}
@media all and (max-width: 600px) {
.safirWrapper .inner {
max-width: 100%;
padding: 0 10px;
}
h1 {
font-size: 22px;
}
}