body,html{width:100%;height:100%}body{background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@include keyframes ("color-flash"){0%{border-color:#4967d5}14%{border-color:#604ec4}28%{border-color:#9f31aa}42%{border-color:#ba348d}56%{border-color:#db4755}70%{border-color:#f46d36}84%{border-color:#fdd170}to{border-color:#f2da7a}}.qr-logo{position:relative;height:200px;width:200px;@include border-radius(40px);background-color:#222;margin:20px auto;i{display:inline-block;width:120px;height:120px;border:10px solid #fff;@include border-radius(32px);margin:15%;@include animation(color-flash 2s infinite alternate);@include animation-timing-function(cubic-bezier(0.39, 0.575, 0.565, 1));&:before{width:60px;height:60px;border:10px solid #fff;@include border-radius(60px);margin:17%;@include animation(color-flash 2s infinite alternate);@include animation-timing-function(cubic-bezier(0.39, 0.575, 0.565, 1))}&:after,&:before{content:"";display:inline-block}&:after{position:absolute;top:52px;right:52px;border:8px solid #fff;@include border-radius(40px);@include animation(color-flash 2s infinite alternate);@include animation-timing-function(cubic-bezier(0.39, 0.575, 0.565, 1))}}}