/* Button */
.button {position: relative;overflow: visible;display: inline-block;padding: 0.5em 1em;border: 1px solid #d4d4d4;margin: 0;text-decoration: none;text-align: center;text-shadow: 1px 1px 0 #fff;font:11px/normal sans-serif;color: #333;white-space: nowrap;cursor: pointer;outline: none;background-color: #ececec;background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));background-image: -moz-linear-gradient(#f4f4f4, #ececec);background-image: -ms-linear-gradient(#f4f4f4, #ececec);background-image: -o-linear-gradient(#f4f4f4, #ececec);background-image: linear-gradient(#f4f4f4, #ececec);-moz-background-clip: padding;background-clip: padding-box;border-radius: 0.2em;zoom: 1;*display: inline;}.button:hover, .button:focus, .button:active, .button.active {border-color: #3072b3;border-bottom-color: #2a65a0;text-decoration: none;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);color: #fff;background-color: #3c8dde;background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));background-image: -moz-linear-gradient(#599bdc, #3072b3);background-image: -o-linear-gradient(#599bdc, #3072b3);background-image: linear-gradient(#599bdc, #3072b3);}.button:active, .button.active {border-color: #2a65a0;border-bottom-color: #3884cd;background-color: #3072b3;background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));background-image: -moz-linear-gradient(#3072b3, #599bdc);background-image: -ms-linear-gradient(#3072b3, #599bdc);background-image: -o-linear-gradient(#3072b3, #599bdc);background-image: linear-gradient(#3072b3, #599bdc);}.button::-moz-focus-inner {padding: 0;border: 0;}.button.icon:before {content: "";position: relative;top: 1px;float:left;width: 12px;height: 12px;margin: 0 0.75em 0 -0.25em;background: url(gh-icons.png) 0 99px no-repeat;}.button.arrowup.icon:before {background-position: 0 0;}.button.arrowup.icon:hover:before, .button.arrowup.icon:focus:before, .button.arrowup.icon:active:before {background-position: -12px 0;}.button.arrowdown.icon:before {background-position: 0 -12px;}.button.arrowdown.icon:hover:before, .button.arrowdown.icon:focus:before, .button.arrowdown.icon:active:before {background-position: -12px -12px;}.button.arrowleft.icon:before {background-position: 0 -24px;}.button.arrowleft.icon:hover:before, .button.arrowleft.icon:focus:before, .button.arrowleft.icon:active:before {background-position: -12px -24px;}.button.arrowright.icon:before {float:right;margin: 0 -0.25em 0 0.5em;background-position: 0 -36px;}.button.arrowright.icon:hover:before, .button.arrowright.icon:focus:before, .button.arrowright.icon:active:before {background-position: -12px -36px;}.button.approve.icon:before {background-position: 0 -48px;}.button.approve.icon:hover:before, .button.approve.icon:focus:before, .button.approve.icon:active:before {background-position: -12px -48px;}.button.add.icon:before {background-position: 0 -288px;}.button.add.icon:hover:before, .button.add.icon:focus:before, .button.add.icon:active:before {background-position: -12px -288px;}.button.remove.icon:before {background-position: 0 -60px;}.button.remove.icon:hover:before, .button.remove.icon:focus:before, .button.remove.icon:active:before {background-position: -12px -60px;}.button.log.icon:before {background-position: 0 -72px;}.button.log.icon:hover:before, .button.log.icon:focus:before, .button.log.icon:active:before {background-position: -12px -72px;}.button.calendar.icon:before {background-position: 0 -84px;}.button.calendar.icon:hover:before, .button.calendar.icon:focus:before, .button.calendar.icon:active:before {background-position: -12px -84px;}.button.chat.icon:before {background-position: 0 -96px;}.button.chat.icon:hover:before, .button.chat.icon:focus:before, .button.chat.icon:active:before {background-position: -12px -96px;}.button.clock.icon:before {background-position: 0 -108px;}.button.clock.icon:hover:before, .button.clock.icon:focus:before, .button.clock.icon:active:before {background-position: -12px -108px;}.button.settings.icon:before {background-position: 0 -120px;}.button.settings.icon:hover:before, .button.settings.icon:focus:before, .button.settings.icon:active:before {background-position: -12px -120px;}.button.comment.icon:before {background-position: 0 -132px;}.button.comment.icon:hover:before, .button.comment.icon:focus:before, .button.comment.icon:active:before {background-position: -12px -132px;}.button.fork.icon:before {background-position: 0 -144px;}.button.fork.icon:hover:before, .button.fork.icon:focus:before, .button.fork.icon:active:before {background-position: -12px -144px;}.button.like.icon:before {background-position: 0 -156px;}.button.like.icon:hover:before, .button.like.icon:focus:before, .button.like.icon:active:before {background-position: -12px -156px;}.button.favorite.icon:before {background-position: 0 -348px;}.button.favorite.icon:hover:before, .button.favorite.icon:focus:before, .button.favorite.icon:active:before {background-position: -12px -348px;}.button.home.icon:before {background-position: 0 -168px;}.button.home.icon:hover:before, .button.home.icon:focus:before, .button.home.icon:active:before {background-position: -12px -168px;}.button.key.icon:before {background-position: 0 -180px;}.button.key.icon:hover:before, .button.key.icon:focus:before, .button.key.icon:active:before {background-position: -12px -180px;}.button.lock.icon:before {background-position: 0 -192px;}.button.lock.icon:hover:before, .button.lock.icon:focus:before, .button.lock.icon:active:before {background-position: -12px -192px;}.button.unlock.icon:before {background-position: 0 -204px;}.button.unlock.icon:hover:before, .button.unlock.icon:focus:before, .button.unlock.icon:active:before {background-position: -12px -204px;}.button.loop.icon:before {background-position: 0 -216px;}.button.loop.icon:hover:before, .button.loop.icon:focus:before, .button.loop.icon:active:before {background-position: -12px -216px;}.button.search.icon:before {background-position: 0 -228px;}.button.search.icon:hover:before, .button.search.icon:focus:before, .button.search.icon:active:before {background-position: -12px -228px;}.button.mail.icon:before {background-position: 0 -240px;}.button.mail.icon:hover:before, .button.mail.icon:focus:before, .button.mail.icon:active:before {background-position: -12px -240px;}.button.move.icon:before {background-position: 0 -252px;}.button.move.icon:hover:before, .button.move.icon:focus:before, .button.move.icon:active:before {background-position: -12px -252px;}.button.edit.icon:before {background-position: 0 -264px;}.button.edit.icon:hover:before, .button.edit.icon:focus:before, .button.edit.icon:active:before {background-position: -12px -264px;}.button.pin.icon:before {background-position: 0 -276px;}.button.pin.icon:hover:before, .button.pin.icon:focus:before, .button.pin.icon:active:before {background-position: -12px -276px;}.button.reload.icon:before {background-position: 0 -300px;}.button.reload.icon:hover:before, .button.reload.icon:focus:before, .button.reload.icon:active:before {background-position: -12px -300px;}.button.rss.icon:before {background-position: 0 -312px;}.button.rss.icon:hover:before, .button.rss.icon:focus:before, .button.rss.icon:active:before {background-position: -12px -312px;}.button.tag.icon:before {background-position: 0 -324px;}.button.tag.icon:hover:before, .button.tag.icon:focus:before, .button.tag.icon:active:before {background-position: -12px -324px;}.button.trash.icon:before {background-position: 0 -336px;}.button.trash.icon:hover:before, .button.trash.icon:focus:before, .button.trash.icon:active:before {background-position: -12px -336px;}.button.user.icon:before {background-position: 0 -360px;}.button.user.icon:hover:before, .button.user.icon:focus:before, .button.user.icon:active:before {background-position: -12px -360px;}.button.primary {font-weight: bold;}.button.danger {color: #900;}.button.danger:hover, .button.danger:focus, .button.danger:active {border-color: #b53f3a;border-bottom-color: #a0302a;color: #fff;background-color: #dc5f59;background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));background-image: -moz-linear-gradient(#dc5f59, #b33630);background-image: -ms-linear-gradient(#dc5f59, #b33630);background-image: -o-linear-gradient(#dc5f59, #b33630);background-image: linear-gradient(#dc5f59, #b33630);}.button.danger:active, .button.danger.active {border-color: #a0302a;border-bottom-color: #bf4843;background-color: #b33630;background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59));background-image: -moz-linear-gradient(#b33630, #dc5f59);background-image: -ms-linear-gradient(#b33630, #dc5f59);background-image: -o-linear-gradient(#b33630, #dc5f59);background-image: linear-gradient(#b33630, #dc5f59);}.button.pill {border-radius: 50em;}.button.disable {opacity: 0.5;}.button.big {font-size: 14px;}.button.big.icon:before {top: 0;}.button-group {display: inline-block;list-style: none;padding: 0;margin: 0;zoom: 1;*display: inline;}.button + .button, .button + .button-group, .button-group + .button, .button-group + .button-group {margin-left: 15px;}.button-group li {float: left;padding: 0;margin: 0;}.button-group .button {float: left;margin-left: -1px;}.button-group > .button:not(:first-child):not(:last-child), .button-group li:not(:first-child):not(:last-child) .button {border-radius: 0;}.button-group > .button:first-child, .button-group li:first-child .button {margin-left: 0;border-top-right-radius: 0;border-bottom-right-radius: 0;}.button-group > .button:last-child, .button-group li:last-child > .button {border-top-left-radius: 0;border-bottom-left-radius: 0;}.button-group.minor-group .button {border: 1px solid #d4d4d4;text-shadow: none;background-image: none;background-color: #fff;}.button-group.minor-group .button:hover, .button-group.minor-group .button:focus {background-color: #599bdc;}.button-group.minor-group .button:active, .button-group.minor-group .button.active {background-color: #3072b3;}.button-group.minor-group .button.icon:before {opacity: 0.8;}.button-container .button, .button-container .button-group {vertical-align: top;}

/* Custom */
 body {
     background-color: #474747;
     font-family: 'Source Code Pro', monospace;
 }

 header {
     margin: 10vh 0 60px 0;
 }

 header h1 {
     text-align: center;
 }

 .container a {
     color: #fff;
     text-decoration: none !important;
     opacity: 0.5;
     transition: all 0.5s;
 }

 a:hover {
     opacity: 0.8;
     color: #fff;
 }

 iframe {
     margin-left: 10px;
 }

 main {
     margin: 0 auto;
     margin-bottom: 40px;
 }

 main #live {
     width: 100%;
     height: 500px;
     background-color: black;
     color: #fff;
     padding: 30px;
     resize: none;
 }

 main #code {
     display: none;
     width: 100%;
     height: 500px;
     padding: 30px;
     background-color: lightgray;
     font-weight: 600;
     transition: all 1s;
 }

 .docs {
     display: none;
     background-color: lightgray;
     margin: 30px 0;
     padding: 20px;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }

 .docs img {
     width: 100%;
 }

 .docs code {
     background-color: #fff;
 }

 .docs a {
     color: #000 !important;
     text-decoration: underline !important;
 }

 .w-full {
     max-width: 100% !important;
     flex: 100% !important;
     display: block !important;
 }

 .button {
     color: #000;
 }

 .button-bar {
     margin: 30px 0;
     text-align: center;
 }