/*! * hourglass * * Made with ❤ by Steve Ottoz * * Copyright (c) 2020 Steve Ottoz */ :root{--linear:cubic-bezier(0.25,0.25,0.75,0.75);--ease:cubic-bezier(0.25,0.1,0.25,1);--ease-in:cubic-bezier(0.42,0,1,1);--ease-out:cubic-bezier(0,0,0.58,1);--ease-in-out:cubic-bezier(0.42,0,0.58,1);--easeInQuad:cubic-bezier(0.55,0.085,0.68,0.53);--easeInCubic:cubic-bezier(0.55,0.055,0.675,0.19);--easeInQuart:cubic-bezier(0.895,0.03,0.685,0.22);--easeInQuint:cubic-bezier(0.755,0.05,0.855,0.06);--easeInSine:cubic-bezier(0.47,0,0.745,0.715);--easeInExpo:cubic-bezier(0.95,0.05,0.795,0.035);--easeInCirc:cubic-bezier(0.6,0.04,0.98,0.335);--easeInBack:cubic-bezier(0.6,-0.28,0.735,0.045);--easeOutQuad:cubic-bezier(0.25,0.46,0.45,0.94);--easeOutCubic:cubic-bezier(0.215,0.61,0.355,1);--easeOutQuart:cubic-bezier(0.165,0.84,0.44,1);--easeOutQuint:cubic-bezier(0.23,1,0.32,1);--easeOutSine:cubic-bezier(0.39,0.575,0.565,1);--easeOutExpo:cubic-bezier(0.19,1,0.22,1);--easeOutCirc:cubic-bezier(0.075,0.82,0.165,1);--easeOutBack:cubic-bezier(0.175,0.885,0.32,1.275);--easeInOutQuad:cubic-bezier(0.455,0.03,0.515,0.955);--easeInOutCubic:cubic-bezier(0.645,0.045,0.355,1);--easeInOutQuart:cubic-bezier(0.77,0,0.175,1);--easeInOutQuint:cubic-bezier(0.86,0,0.07,1);--easeInOutSine:cubic-bezier(0.445,0.05,0.55,0.95);--easeInOutExpo:cubic-bezier(1,0,0,1);--easeInOutCirc:cubic-bezier(0.785,0.135,0.15,0.86);--easeInOutBack:cubic-bezier(0.68,-0.55,0.265,1.55);--easeCustom:cubic-bezier(.3,0,0,1.3);--color-accent:#9013fe;--color-white:#fff;--color-white-transparent:hsla(0,0%,100%,.5);--color-off-white:#f0f0f0;--color-black:#000;--zindex1:100;--zindex2:200;--zindex3:300;--zindex4:400;--zindex5:500;--zindex6:600;--zindex7:700;--zindex8:800;--zindex9:900;--zindex10:1000;--font-family-sans-serif:system,-apple-system,BlinkMacSystemFont,".SFNSText-Regular","San Francisco","Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,Oxygen-Sans,Ubuntu,Cantarell,"Lucida Grande",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-family-serif:Constantia,"Lucida Bright",Lucidabright,"Lucida Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation Serif",Georgia,Cambria,"Hoefler Text",Utopia,"Liberation Serif","Nimbus Roman No9 L Regular","Times New Roman",Times,serif;--font-family-monospace:"SFMono-Regular",Menlo,Monaco,Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L","Courier New",Courier,monospace;--font-family-base:var(--font-family-monospace);--font-size-root:16px;--font-size-base:1rem;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-lg:1.25rem;--line-height-base:1.3;--body-bg:#fff;--text-color:#333;--link-color:#0447da;--link-decoration:underline;--link-hover-color:#033ca3;--link-hover-decoration:none;--ratio-16-9:56.25%;--ratio-16-10:62.5%;--ratio-4-3:75%;--ratio-3-4:133.33333%;--ratio-1-1:100%;--ratio-portrait:var(--ratio-3-4);--ratio-landscape:var(--ratio-16-9);--ratio-square:var(--ratio-1-1);--xxs-min:20;--xs-min:30;--sm-min:48;--md-min:62;--lg-min:75;--xl-min:90;--xxl-min:120;--xxxl-min:140;--screen-xxs-min:var(--xxs-min)em;--screen-xs-min:var(--xs-min)em;--screen-sm-min:var(--sm-min)em;--screen-md-min:var(--md-min)em;--screen-lg-min:var(--lg-min)em;--screen-xl-min:var(--xl-min)em;--screen-xxl-min:var(--xxl-min)em;--screen-xxxl-min:var(--xxxl-min)em;--link-transition:0.3s var(--easeInOutQuad)}@-ms-viewport{width:device-width}*,:after,:before{box-sizing:inherit}html{box-sizing:border-box;font-size:16px;font-size:var(--font-size-root);-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{width:100%}body{background-color:#fff;background-color:var(--body-bg);color:#333;color:var(--text-color);font-family:SFMono-Regular,Menlo,Monaco,Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Courier New,Courier,monospace;font-family:var(--font-family-base);font-size:1rem;font-size:var(--font-size-base);line-height:1.3;line-height:var(--line-height-base);overflow:auto;overflow:overlay;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-ms-font-smoothing:antialiased;-o-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-text-rendering:optimizeLegibility;-moz-text-rendering:optimizeLegibility;-ms-text-rendering:optimizeLegibility;-o-text-rendering:optimizeLegibility;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{-moz-column-break-inside:avoid;break-inside:avoid;margin-top:0;margin-bottom:1.5rem}.link,a{color:#0447da;color:var(--link-color);text-decoration:underline;-webkit-text-decoration:var(--link-decoration);text-decoration:var(--link-decoration);transition:.3s cubic-bezier(.455,.03,.515,.955);transition:var(--link-transition);word-break:break-all}@media (any-hover:hover){.link:hover,a:hover{color:#033ca3;color:var(--link-hover-color);text-decoration:none;-webkit-text-decoration:var(--link-hover-decoration);text-decoration:var(--link-hover-decoration)}}.link:focus,a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}hr{border:0;border-bottom:1px solid #ccc;margin:1.5rem 0}img{max-width:100%;height:auto}dl,ol,ul{margin-top:0;margin-bottom:1.5rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}blockquote{margin:0 0 1.5rem}[role=button]{cursor:pointer}[role=button],a,area,button,input,label,select,summary,textarea{touch-action:manipulation}[hidden]{display:none!important}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{--background:#000;--foreground:#fff;background:#000;background:var(--background,#000);display:flex;padding:1rem}.wrapper{margin:auto}.hourglass{cursor:pointer;display:block;margin:0 auto;transform:rotate(-90deg);height:80vmin;max-height:30rem}.hourglass--initialized{transform:rotate(-180deg)}.hourglass--active{transform:rotate(0deg);transition:transform .2s ease-out}.time{color:var(--foreground);display:block;font-size:2.5em;font-weight:700;margin-top:.5em;opacity:.3;text-align:center}@media (min-width:48em){.time{font-size:5em}}