*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}body,html{height:100%;background-color:#fff}body{--hue:180;--random-hue:hsl(var(--hue), 100%, 75%);position:relative;margin:0;font-family:sans-serif}h1{position:relative;margin:0;padding:1em;width:100%;z-index:1;background-color:#fff;font-size:1.25rem;text-transform:uppercase;text-align:center;letter-spacing:1px;font-family:Inconsolata,'Courier New',monospace}h1::after{content:'';position:absolute;left:50%;bottom:-4em;border:2em solid transparent;border-top-color:#fff;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.main__wrap{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:100%;max-width:100%;margin:0;padding:2rem;background-color:#7fffe9;background-color:var(--random-hue);color:#111;-webkit-transition:background-color 350ms;transition:background-color 350ms}.numfact__container{margin:auto auto 0;width:100%;max-width:80%;line-height:1.5;text-align:center;opacity:0;-webkit-transform:translateY(5%);transform:translateY(5%)}.numfact__container.fade-in{opacity:1;-webkit-transition:opacity 350ms,-webkit-transform 350ms;transition:opacity 350ms,-webkit-transform 350ms;transition:opacity 350ms,transform 350ms;transition:opacity 350ms,transform 350ms,-webkit-transform 350ms;-webkit-transform:translateY(0);transform:translateY(0)}.numfact__num{display:block;position:relative;margin-bottom:1.5rem;font-family:'Yeseva One',sans-serif;font-size:5rem;font-size:8vmax;text-align:center;letter-spacing:1px}.numfact__num::after{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:5px;background-color:#fff;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:left;transform-origin:left}.numfact__num.slide-in::after{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transition:-webkit-transform 350ms cubic-bezier(.785,.135,.15,.86);transition:-webkit-transform 350ms cubic-bezier(.785,.135,.15,.86);transition:transform 350ms cubic-bezier(.785,.135,.15,.86);transition:transform 350ms cubic-bezier(.785,.135,.15,.86),-webkit-transform 350ms cubic-bezier(.785,.135,.15,.86)}.numfact__fact{font-size:1.1rem;font-size:5vmin;font-family:Inconsolata,'Courier New',monospace;text-align:left}.numfact__generate{margin-top:auto;margin-bottom:1.5rem;padding:.75em 1em;border:2px solid;background-color:transparent;font-size:1em;font-family:inherit;text-transform:uppercase;cursor:pointer;-webkit-transition:background-color .2s,-webkit-transform .2s;transition:background-color .2s,-webkit-transform .2s;transition:transform .2s,background-color .2s;transition:transform .2s,background-color .2s,-webkit-transform .2s}.numfact__generate:focus,.numfact__generate:hover{outline:0;background-color:#fff}.numfact__generate:active{-webkit-transform:translateY(2px);transform:translateY(2px)}.footer{padding:1rem;background-color:#111;text-align:center;line-height:1.5;color:#fff;font-family:Inconsolata,'Courier New',monospace;letter-spacing:1px}.footer__link{position:relative;z-index:1;display:inline-block;padding:0 .25em;text-decoration:none;color:#fff}.footer__link:active{background-color:#ff0}.footer__link:focus,.footer__link:hover{color:#111}.footer__link:focus{outline:0}.footer__link::after,.footer__link::before{content:'';position:absolute;left:0;width:100%;background-color:#7fffe9;background-color:var(--random-hue)}.footer__link::before{z-index:-1;top:0;height:100%;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:bottom left;transform-origin:bottom left;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}.footer__link::after{bottom:-3px;height:3px;opacity:1;-webkit-transition:opacity .2s;transition:opacity .2s}.footer__link:focus::before,.footer__link:hover::before{-webkit-transform:scaleY(1);transform:scaleY(1)}.footer__link:focus::after,.footer__link:hover::after{opacity:0}@media screen and (min-width:30em){html{padding:5vmin}h1{position:absolute;top:0;right:0;width:auto;min-height:50%;padding:.5em .25em;font-size:1.75rem;-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;-webkit-transform:rotate(0);transform:rotate(0)}h1::after{left:auto;right:0;bottom:-2em;z-index:-1;height:2em;width:100%;border:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%);-webkit-transform:none;transform:none}.numfact__container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.numfact__num{margin-right:.5em;margin-bottom:0;-ms-flex-item-align:center;align-self:center;-ms-flex-negative:1;flex-shrink:1}.numfact__fact{display:block;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-item-align:center;align-self:center;font-size:3vmin}.footer{background-color:transparent;color:#111}.footer__link{color:inherit}}@media screen and (min-width:75em){.numfact__num{font-size:6rem}.numfact__fact{font-size:1.35rem}}