html,body,div{padding:0;margin:0}h1,h2,h3,p{-webkit-margin-before:0;-webkit-margin-after:0}ul{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-padding-start:0}html{font-size:12px}h1 {margin-top:-150px !important}.theanswer{font-family:"Sanchez","Aleo","Helvetica","Arial",sans-serif;font-size:1.2rem}.rnb{font-family:"Circular Std","Karla","Helvetica","Arial",sans-serif;font-size:7rem;line-height:7rem;display:block;text-align:center;color:#facfe9;text-shadow:7px 7px 0 rgba(0,0,0,0.8)}h2,h3,h4,h5,h6{font-family:"Sanchez","Aleo","Helvetica","Arial",sans-serif}p{font-family:"Circular Std","Karla","Helvetica","Arial",sans-serif}a{text-decoration:none;color:inherit}small{font-family:"Sanchez","Aleo","Helvetica","Arial",sans-serif;font-size:.8rem;font-style:italic;font-weight:400i;text-transform:uppercase}input{color:rgba(0,0,0,0.8);font-family:"Sanchez","Aleo","Helvetica","Arial",sans-serif;letter-spacing:2px}.intro{font-size:1.5rem;line-height:2.1rem}input[type="text"]{border:0;outline:0;padding:1em 0;margin:40px auto;font-size:1rem;text-align:center;border-radius:5px;-webkit-transition:width 1s, background-color 0.3s;-moz-transition:width 1s, background-color 0.3s;-o-transition:width 1s, background-color 0.3s;transition:width 1s background-color 0.3s;background-color:#bdd9fc;width:50%;cursor:pointer}input[type="text"]:hover{width:54%;transition:width .2s}input[type="text"]::-webkit-input-placeholder{color:rgba(0,0,0,0.8);text-transform:uppercase;font-size:.8rem}input[type="text"]:focus{width:100%;background-color:#facfe9;-webkit-transition:width 1s background-color 0.3s;-moz-transition:width 1s background-color 0.3s;-o-transition:width 1s background-color 0.3s;transition:width 1s background-color 0.3s}.active{width:100% !important;background-color:#facfe9 !important}html{height:100%;width:100%;background:#bdd9fc}body{width:100%;height:100%;color:rgba(0,0,0,0.8);font-family:"Circular Std","Karla","Helvetica","Arial",sans-serif;margin:0;letter-spacing:1px;text-align:center;background:url(../images/satin-bg-desktop.png);background-size:100% 100%}.container,.output{margin:80px 40px 80px;max-width:400px;padding:2em}.container{background:#fff;color:rgba(0,0,0,0.8);box-shadow:10px 10px 50px rgba(0,0,0,0.1)}.output{display:flex;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.output>div:not(.loader){background:#facfe9;box-shadow:10px 10px 50px rgba(0,0,0,0.1);padding:0 0 4rem;word-wrap:break-word}.output p{font-family:"Sanchez","Aleo","Helvetica","Arial",sans-serif}.output .answer{color:rgba(0,0,0,0.5);text-transform:uppercase;font-style:normal}.output .track{font-size:2.5rem;font-style:italic;padding:1rem 1rem 1.5rem}.output .artist{font-size:1rem}.output .image-container{padding:2rem;margin-top:-4rem;display:inline-block}.output .image-container img{box-shadow:10px 10px 30px rgba(0,0,0,0.1);margin:0 2rem}.output .image-container .play-button{border-radius:50%;width:60px;height:60px;background:#facfe9;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);box-shadow:10px 10px 30px rgba(0,0,0,0.1);display:flex;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;transition:width .2s, height .2s}.output .image-container .play-button:hover{width:64px;height:64px;transition:width .2s, height .2s}.output .image-container .play-button svg{width:30%;height:50%;margin-right:-3px}.alert{padding:2rem;box-shadow:10px 10px 30px rgba(0,0,0,0.1);background:#facfe9}.loader{border:12px solid #fff;border-top:12px solid #facfe9;border-radius:50%;width:60px;height:60px;animation:spin 2s linear infinite;z-index:1}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.animate-bottom{position:relative;-webkit-animation-name:animatebottom;-webkit-animation-duration:1s;animation-name:animatebottom;animation-duration:1s}@-webkit-keyframes animatebottom{from{bottom:-30px;opacity:0}to{bottom:0px;opacity:1}}@keyframes animatebottom{from{bottom:-30px;opacity:0}to{bottom:0;opacity:1}}@keyframes zoom{0%{background-size:100% 100%}50%{background-size:105% 105%}100%{background-size:100% 100%}}body{animation:zoom 17s ease infinite}@media screen and (min-width: 568px){html{font-size:13px}body{display:flex;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:wrap;-ms-flex:wrap;flex-wrap:wrap;width:100%;height:100%}.container,.output{width:310px;padding:4em}}@media screen and (min-width: 992px){html{font-size:14px}body{display:flex;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:100%;height:100%}}