body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@keyframes fadeIn{0%{transform:translateY(-1rem);border:2px solid #fff;opacity:0;visibility:visible}to{transform:translateY(0);border:2px solid grey;opacity:1;visibility:visible}}@keyframes scale{0%{transform:scale(.9);border:1px solid #fff;opacity:1}to{transform:scale(1.5);border:1px solid #888;opacity:0}}.next{visibility:hidden;border-radius:3rem;position:fixed;bottom:3rem;left:calc(50vw - 1.5rem);text-align:center;border:2px solid grey;line-height:calc(3rem - 4px);cursor:pointer;transform-origin:center;transition:all .5s;animation:fadeIn 1s;animation-delay:3s;animation-fill-mode:forwards;z-index:5}.next,.next:after{display:inline-block;width:3rem;height:3rem}.next:after{content:"";position:absolute;left:-1px;top:-1px;border-radius:3rem;animation:scale 1s;animation-direction:alternate-reverse;animation-iteration-count:infinite}.btn{font-size:2rem;color:#fff;transition:all .3s;color:grey;transform:rotate(0)}.next:hover{border-color:transparent}.next:hover .btn{transition:all .3s;color:#fff;transform:rotate(45deg)}.content{display:none;padding:6rem}.content.show{display:block}.shades{width:100vw;overflow:hidden;font-size:0;z-index:4}.shade:first-child.hide{transform:translateX(-100%) rotate(0)}.shade:last-child.hide{transform:translateX(100%) rotate(0)}.shade{width:100%;height:50vh;background:#323742;margin:0;transition:all .5s}.code-block,.shade{display:inline-block;font-size:1rem}.code-block{transition:all 5s;position:absolute;max-width:48rem;top:50%;left:50%;transform:translate3d(-50%,-50%,0);border-radius:.4rem;padding:0 1.5rem;background:#282c34;text-align:start;z-index:5;transition:all .5s linear}.code-block.hide{opacity:0;transform-origin:center;animation:hide .5s linear;animation-fill-mode:forwards;animation-delay:.5s}.content{width:100%;font-size:1rem;position:absolute;top:0;padding:0 4rem;box-sizing:content-box}.code-block code{border:none}@keyframes hide{0%{transform:rotateX(90deg)}to{transform:rotateX(90deg)}}body,html{width:100%;height:100%;margin:0;padding:0;position:relative;font-size:14px}