body,html{height:100%}body{margin:0;background:#f0f7fa;font-family:'Roboto Condensed',sans-serif}h1,h2{font-size:16px}h2{font-weight:400;margin-top:10px;margin-bottom:20px}p{font-size:14px}.page{height:100%;padding:0;margin:0;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center}.middle{position:relative}.box{width:250px;height:300px;padding:30px;background:#089eed;border-radius:10px}.middle::before{content:'';position:absolute;z-index:-1;display:block;width:250px;height:300px;border-radius:10px;top:-50px;left:-50px;background:#f0f7fa;background:linear-gradient(90deg,#f0f7fa 0,#089eed 100%);border:1px solid #089eed;opacity:.1}.middle::after{content:'';position:absolute;z-index:-1;display:block;width:250px;height:300px;border-radius:10px;bottom:-50px;right:-50px;background:#a3dfff;opacity:.1}#button{width:180px;position:absolute;bottom:30px;left:50%;font-size:16px;font-weight:700;padding:15px 0;display:block;background:#d6ff27;border-radius:50px;border:none;margin-left:-90px;transition-duration:.2s;-webkit-box-shadow:0 0 20px 3px #9abe0f;-moz-box-shadow:0 0 20px 3px #9abe0f;box-shadow:0 0 20px 3px #9abe0f;color:#2e2e2e;text-decoration:none;cursor:pointer}#button:hover{width:200px;bottom:24px;margin-left:-100px;padding:21px 0;transition-duration:.2s}.faces-container{width:70%;height:80px;margin-left:15%;position:relative}.faces{width:100%;position:absolute;left:0}#happy-faces{opacity:0}#sad-faces{z-index:1}.fadeIn{animation-name:fadeIn;animation-duration:.4s;animation-fill-mode:forwards;animation-play-state:running}.fadeOut{animation-name:fadeOut;animation-duration:.4s;animation-fill-mode:forwards;animation-play-state:running}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}