@font-face { font-family: Roobert; src: url("../fonts/Roobert-Regular.woff"); src: url("../fonts/Roobert-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Roobert-Regular.woff2") format("woff2"), url("../fonts/Roobert-Regular.woff") format("woff"); }
@font-face { font-family: Roobert-SemiBold; src: url("../fonts/Roobert-SemiBold.woff"); src: url("../fonts/Roobert-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Roobert-SemiBold.woff2") format("woff2"), url("../fonts/Roobert-SemiBold.woff") format("woff"); }
@-webkit-keyframes wave { from { transform: rotate(-2deg); } to { transform: rotate(15deg); } }
@keyframes wave { from { transform: rotate(-2deg); } to { transform: rotate(15deg); } }

* { margin: 0; padding: 0; }
body { font-family: "Roobert", Helvetica, arial, sans-serif; font-size: 100%; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h2 { font-family: "Roobert-SemiBold", Helvetica, arial, sans-serif; font-size: 1.5rem; margin-bottom: 1rem; }
.container { padding: 2rem; }
.container .card { background: #fff; border-radius: 4px; border: 1px solid #d6e0e9; max-width: 600px; padding: 2rem; }
.container .image { margin-bottom: 2rem; }
.container .content { text-align: center; width: 100% }
.container p { color: #4D5866; }
.container .authy:hover .happy .hand { transform-origin: 80%; -webkit-animation: wave .4s ease-in-out 3s infinite alternate; animation: wave .4s ease-in-out 3s infinite alternate; }
.container .authy .sad { opacity: 1; transition: opacity 1s ease; }
.container .authy .sad:hover { opacity: 0; }