.highlight .c { color: #998; font-style: italic; }
.highlight .err { color: #a61717; background-color: #e3d2d2; }
.highlight .k { font-weight: bold; }
.highlight .o { font-weight: bold; }
.highlight .cm { color: #998; font-style: italic; }
.highlight .cp { color: #999; font-weight: bold; }
.highlight .c1 { color: #998; font-style: italic; }
.highlight .cs { color: #999; font-weight: bold; font-style: italic; }
.highlight .gd { color: #000; background-color: #fdd; }
.highlight .gd .x { color: #000; background-color: #faa; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #a00; }
.highlight .gh { color: #999; }
.highlight .gi { color: #000; background-color: #dfd; }
.highlight .gi .x { color: #000; background-color: #afa; }
.highlight .go { color: #888; }
.highlight .gp { color: #555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #aaa; }
.highlight .gt { color: #a00; }
.highlight .kc { font-weight: bold; }
.highlight .kd { font-weight: bold; }
.highlight .kp { font-weight: bold; }
.highlight .kr { font-weight: bold; }
.highlight .kt { color: #458; font-weight: bold; }
.highlight .m { color: #099; }
.highlight .s { color: #d14; }
.highlight .na { color: #008080; }
.highlight .nb { color: #0086B3; }
.highlight .nc { color: #458; font-weight: bold; }
.highlight .no { color: #008080; }
.highlight .ni { color: #800080; }
.highlight .ne { color: #900; font-weight: bold; }
.highlight .nf { color: #900; font-weight: bold; }
.highlight .nn { color: #555; }
.highlight .nt { color: #000080; }
.highlight .nv { color: #008080; }
.highlight .ow { font-weight: bold; }
.highlight .w { color: #bbb; }
.highlight .mf { color: #099; }
.highlight .mh { color: #099; }
.highlight .mi { color: #099; }
.highlight .mo { color: #099; }
.highlight .sb { color: #d14; }
.highlight .sc { color: #d14; }
.highlight .sd { color: #d14; }
.highlight .s2 { color: #d14; }
.highlight .se { color: #d14; }
.highlight .sh { color: #d14; }
.highlight .si { color: #d14; }
.highlight .sx { color: #d14; }
.highlight .sr { color: #009926; }
.highlight .s1 { color: #d14; }
.highlight .ss { color: #990073; }
.highlight .bp { color: #999; }
.highlight .vc { color: #008080; }
.highlight .vg { color: #008080; }
.highlight .vi { color: #008080; }
.highlight .il { color: #099; }

html { font-size: 16px; }

/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font: 400 16px/1.5 -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif; color: #111111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; overflow-wrap: break-word; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }

hr { margin-top: 30px; margin-bottom: 30px; }

/** `main` element */
main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 14px; }

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

/** Links */
a { color: #2a7ae2; text-decoration: none; }
a:visited { color: #1756a9; }
a:hover { color: #111111; text-decoration: underline; }
.social-media-list a:hover, .pagination a:hover { text-decoration: none; }
.social-media-list a:hover .username, .pagination a:hover .username { text-decoration: underline; }

/** Blockquotes */
blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 1.125rem; font-style: italic; }
blockquote > :last-child { margin-bottom: 0; }
blockquote i, blockquote em { font-style: normal; }

/** Code formatting */
pre, code { font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace; font-size: 0.9375em; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eeeeff; }

code { padding: 1px 5px; }

pre { padding: 8px 12px; overflow-x: auto; }
pre > code { border: 0; padding-right: 0; padding-left: 0; }

.highlight { border-radius: 3px; background: #eeeeff; }
.highlighter-rouge .highlight { background: #eeeeff; }

/** Wrapper */
.wrapper { max-width: calc(1000px - (30px)); margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; }
@media screen and (min-width: 1200px) { .wrapper { max-width: calc(1000px - (30px * 2)); padding-right: 30px; padding-left: 30px; } }

/** Clearfix */
.wrapper:after { content: ""; display: table; clear: both; }

/** Icons */
.orange { color: #f66a0a; }

.grey { color: #828282; }

.svg-icon { width: 1.25em; height: 1.25em; display: inline-block; fill: currentColor; vertical-align: text-bottom; }

/** Tables */
table { margin-bottom: 30px; width: 100%; text-align: left; color: #3f3f3f; border-collapse: collapse; border: 1px solid #e8e8e8; }
table tr:nth-child(even) { background-color: #f7f7f7; }
table th, table td { padding: 10px 15px; }
table th { background-color: #f0f0f0; border: 1px solid #e0e0e0; }
table td { border: 1px solid #e8e8e8; }
@media screen and (max-width: 1000px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } }

/** Site header */
.site-header { border-top: 5px solid #424242; border-bottom: 1px solid #e8e8e8; min-height: 55.95px; line-height: 54px; position: relative; }

.site-title { font-size: 1.625rem; font-weight: 300; letter-spacing: -1px; margin-bottom: 0; float: left; }
@media screen and (max-width: 800px) { .site-title { padding-right: 45px; } }
.site-title, .site-title:visited { color: #424242; }

.site-nav { position: absolute; top: 9px; right: 15px; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; }
.site-nav .nav-trigger { display: none; }
.site-nav .menu-icon { float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
.site-nav .menu-icon > svg path { fill: #424242; }
.site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; }
.site-nav input ~ .trigger { clear: both; display: none; }
.site-nav input:checked ~ .trigger { display: block; padding-bottom: 5px; }
.site-nav .page-link { color: #111111; line-height: 1.5; display: block; padding: 5px 10px; margin-left: 20px; }
.site-nav .page-link:not(:last-child) { margin-right: 0; }
@media screen and (min-width: 1000px) { .site-nav { position: static; float: right; border: none; background-color: inherit; }
  .site-nav label[for="nav-trigger"] { display: none; }
  .site-nav .menu-icon { display: none; }
  .site-nav input ~ .trigger { display: block; }
  .site-nav .page-link { display: inline; padding: 0; margin-left: auto; }
  .site-nav .page-link:not(:last-child) { margin-right: 20px; } }

/** Site footer */
.site-footer { border-top: 1px solid #e8e8e8; padding: 30px 0; }

.footer-heading { font-size: 1.125rem; margin-bottom: 15px; }

.feed-subscribe .svg-icon { padding: 5px 5px 2px 0; }

.contact-list, .social-media-list, .pagination { list-style: none; margin-left: 0; }

.footer-col-wrapper, .social-links { font-size: 0.9375rem; color: #828282; }

.footer-col { margin-bottom: 15px; }

.footer-col-1, .footer-col-2 { width: calc(50% - (30px / 2)); }

.footer-col-3 { width: calc(100% - (30px / 2)); }

@media screen and (min-width: 1200px) { .footer-col-1 { width: calc(35% - (30px / 2)); }
  .footer-col-2 { width: calc(20% - (30px / 2)); }
  .footer-col-3 { width: calc(45% - (30px / 2)); } }
@media screen and (min-width: 1000px) { .footer-col-wrapper { display: flex; }
  .footer-col { width: calc(100% - (30px / 2)); padding: 0 15px; }
  .footer-col:first-child { padding-right: 15px; padding-left: 0; }
  .footer-col:last-child { padding-right: 0; padding-left: 15px; } }
/** Page content */
.page-content { padding: 30px 0; flex: 1 0 auto; }

.page-heading { font-size: 2rem; }

.post-list-heading { font-size: 1.75rem; }

.post-list { margin-left: 0; list-style: none; }
.post-list > li { margin-bottom: 30px; }

.post-meta { font-size: 14px; color: #828282; }

.post-link { display: block; font-size: 1.5rem; }

/** Posts */
.post-header { margin-bottom: 30px; }

.post-title, .post-content h1 { font-size: 2.625rem; letter-spacing: -1px; line-height: 1.15; }
@media screen and (min-width: 1200px) { .post-title, .post-content h1 { font-size: 2.625rem; } }

.post-content { margin-bottom: 30px; }
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { margin-top: 30px; }
.post-content h2 { font-size: 1.75rem; }
@media screen and (min-width: 1200px) { .post-content h2 { font-size: 2rem; } }
.post-content h3 { font-size: 1.375rem; }
@media screen and (min-width: 1200px) { .post-content h3 { font-size: 1.625rem; } }
.post-content h4 { font-size: 1.25rem; }
.post-content h5 { font-size: 1.125rem; }
.post-content h6 { font-size: 1.0625rem; }

.social-media-list, .pagination { display: table; margin: 0 auto; }
.social-media-list li, .pagination li { float: left; margin: 5px 10px 5px 0; }
.social-media-list li:last-of-type, .pagination li:last-of-type { margin-right: 0; }
.social-media-list li a, .pagination li a { display: block; padding: 10px 12px; border: 1px solid #e8e8e8; }
.social-media-list li a:hover, .pagination li a:hover { border-color: #dbdbdb; }

/** Pagination navbar */
.pagination { margin-bottom: 30px; }
.pagination li a, .pagination li div { min-width: 41px; text-align: center; box-sizing: border-box; }
.pagination li div { display: block; padding: 7.5px; border: 1px solid transparent; }
.pagination li div.pager-edge { color: #e8e8e8; border: 1px dashed; }

/** Grid helpers */
@media screen and (min-width: 1200px) { .one-half { width: calc(50% - (30px / 2)); } }
/*-----------------------------------*/
/*--- IMPORT STYLES FOR Mortpages ---*/
.post img { display: block; vertical-align: top; margin-left: auto; margin-right: auto; }

img.emoji { display: inline !important; vertical-align: baseline !important; }

.post figcaption { text-align: center; font-size: .8rem; font-style: italic; color: light-grey; }

.page-content { -webkit-font-smoothing: antialiased !important; text-rendering: optimizeLegibility !important; font-family: "Segoe UI", SegoeUI, Roboto, "Segoe WP", "Helvetica Neue", "Helvetica", "Tahoma", "Arial", sans-serif !important; }

.post-content p, .post-content li { font-size: 20px; color: #515151; }

.post-link { font-weight: normal; }

h1 { margin-top: 2.5rem !important; }

h2 { margin-top: 2rem !important; }

h3, h4 { margin-top: 1.5rem !important; }

p { margin-top: 1rem !important; margin-bottom: 1rem !important; }

h1, h2, h3, h4 { font-weight: normal !important; margin-bottom: 0.5rem !important; }
h1 code, h2 code, h3 code, h4 code { font-size: 100%; }

pre { margin-bottom: 1.5rem !important; }

.post-title { margin-top: .5rem !important; }

li h3, li h4 { margin-top: .05rem !important; margin-bottom: .05rem !important; }
li .post-meta-description { color: #585858; font-size: 15px; margin-top: .05rem !important; margin-bottom: .05rem !important; }

details.description[open] summary::after { content: attr(data-open); }

details.description:not([open]) summary::after { content: attr(data-close); }

.notebook-badge-image { border: 0 !important; }

.footnotes { font-size: 12px !important; }
.footnotes p, .footnotes li { font-size: 12px !important; }

.social-media-list .svg-icon, .pagination .svg-icon { width: 25px !important; height: 23px !important; }

.anchor-link { opacity: 0; padding-left: 0.375em; \-webkit-text-stroke: 1.75px white; \-webkit-transition: opacity 0.2s ease-in-out 0.1s; \-moz-transition: opacity 0.2s ease-in-out 0.1s; \-ms-transition: opacity 0.2s ease-in-out 0.1s; }

h1:hover .anchor-link, h2:hover .anchor-link, h3:hover .anchor-link, h4:hover .anchor-link, h5:hover .anchor-link, h6:hover .anchor-link { opacity: 1; }

.category-tags { margin-top: .25rem !important; margin-bottom: .25rem !important; font-size: 105%; }

.post-meta-title, .post-meta { margin-top: .25em !important; margin-bottom: .25em !important; font-size: 105%; }

.page-description { margin-top: .5rem !important; margin-bottom: .5rem !important; color: #585858; font-size: 115%; }

.category-tags-icon { font-size: 75% !important; padding-left: 0.375em; opacity: 35%; }

.category-tags-link { color: #bb8181 !important; font-size: 13px !important; }

.js-search-results { padding-top: 0.2rem; }

.search-results-list-item { padding-bottom: 1rem; }

.search-results-list-item .search-result-title { font-size: 16px; color: #d9230f; }

.search-result-rel-url { color: silver; }

.search-results-list-item a { display: block; color: #777; }

.search-results-list-item a:hover, .search-results-list-item a:focus { text-decoration: none; }

.search-results-list-item a:hover .search-result-title { text-decoration: underline; }

.search-result-rel-date { color: #6d788a; font-size: 14px; }

.search-result-preview { color: #777; font-size: 16px; margin-top: .02rem !important; margin-bottom: .02rem !important; }

.search-result-highlight { color: #2e0137; font-weight: bold; }

table { white-space: normal; max-width: 100%; font-size: 100%; border: none; }
table th { text-align: center !important; }

::-webkit-scrollbar { width: 14px; height: 18px; }

::-webkit-scrollbar-thumb { height: 6px; border: 4px solid rgba(0, 0, 0, 0); background-clip: padding-box; -webkit-border-radius: 7px; background-color: #9D9D9D; -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); }

::-webkit-scrollbar-button { width: 0; height: 0; display: none; }

::-webkit-scrollbar-corner { background-color: transparent; }

.output_text.output_execute_result pre { white-space: pre-wrap; }

.output_wrapper { overflow: auto; }

.svg-icon.orange { width: 30px; height: 23px; }

.code_cell { margin: 1.5rem 0px !important; }

pre code { font-size: 15px !important; }

.youtube-iframe-wrapper { position: relative; padding-bottom: 56.10%; height: 0; overflow: hidden; }

.youtube-iframe-wrapper iframe, .youtube-iframe-wrapper object, .youtube-iframe-wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*-----------------------------------*/
/*--- CUSTOM STYLES FOR Nighthawkpages ---*/
/*-----------------------------------*/
/*----- ADD YOUR STYLES BELOW -------*/
.language-python + .language-plaintext { border-left: 1px solid grey; margin-left: 1rem !important; }

[class^="language-"]:not(.language-plaintext) pre, [class^="language-"]:not(.language-plaintext) code { background-color: #323443 !important; color: #f8f8f2; }

.language-python + .language-plaintext code { background-color: none !important; }

.language-python + .language-plaintext pre { background-color: #323443 !important; }

.input_area pre, .input_area div { margin-bottom: 1.0rem !important; margin-top: 1.5rem !important; padding-bottom: 0 !important; padding-top: 0 !important; background: #323443 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: Menlo, Monaco, Consolas, "Lucida Console", Roboto, Ubuntu, monospace; border-radius: 5px; font-size: 105%; }

.output_area pre, .output_area div { margin-bottom: 1rem !important; margin-top: 0rem !important; padding-bottom: 0 !important; padding-top: 0 !important; }

.input_area pre { border-left: 1px solid lightcoral; }

.output_area pre { border-left: 1px solid grey; margin-left: 1rem !important; font-size: 16px; }

.code_cell table { width: auto; }

/* Dracula Theme v1.2.5  https://github.com/zenorocha/dracula-theme  Copyright 2016, All rights reserved  Code licensed under the MIT license  */
.highlight { background: #323443 !important; color: #f8f8f2 !important; }
.highlight pre, .highlight code { background: #323443; color: #f8f8f2; font-size: 110%; }
.highlight .hll, .highlight .s, .highlight .sa, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .s1, .highlight .ss { color: #e7997a; }
.highlight .go { color: #44475a; }
.highlight .err, .highlight .g, .highlight .l, .highlight .n, .highlight .x, .highlight .ge, .highlight .gr, .highlight .gh, .highlight .gi, .highlight .gp, .highlight .gs, .highlight .gu, .highlight .gt, .highlight .ld, .highlight .no, .highlight .nd, .highlight .pi, .highlight .ni, .highlight .ne, .highlight .nn, .highlight .nx, .highlight .py, .highlight .w, .highlight .bp { color: #f8f8f2; background-color: #323443 !important; }
.highlight .p { font-weight: bold; color: #66d9ef; }
.highlight .ge { text-decoration: underline; }
.highlight .bp { font-style: italic; }
.highlight .c, .highlight .ch, .highlight .cm, .highlight .cpf, .highlight .cs { color: #6272a4; }
.highlight .c1 { color: gray; }
.highlight .kd, .highlight .kt, .highlight .nb, .highlight .nl, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm { color: #8be9fd; }
.highlight .kd, .highlight .nb, .highlight .nl, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm { font-style: italic; }
.highlight .fm, .highlight .na, .highlight .nc, .highlight .nf { color: #ace591; }
.highlight .k, .highlight .o, .highlight .cp, .highlight .kc, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .nt, .highlight .ow { color: #ff79c6; }
.highlight .kc { color: #ace591; }
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .il { color: #bd93f9; }
.highlight .gd { color: #ff5555; }

p code { font-size: 19px; }

:root { --default-canvas-filter: invert(100%); }

html, body, input, textarea, select, button { color: rgba(255, 255, 255, 0.87) !important; background-color: #121212 !important; }

a { color: #4bbaff !important; }

a:hover { color: rgba(255, 255, 255, 0.87) !important; }

.site-title, .site-title:visited, .site-nav, .page-link { color: rgba(255, 255, 255, 0.87) !important; }

.site-nav { background-color: #121212; border-color: #333333; }

* { scrollbar-color: #121212 #333333; }

pre, code { border-color: #333333; background-color: #1e1e1e; }

.page-description { color: rgba(255, 255, 255, 0.69); }

.post-meta { color: rgba(255, 255, 255, 0.38); }

.post-content p, .post-content li { color: rgba(255, 255, 255, 0.69); }

.btn { background-color: #1e1e1e !important; color: rgba(255, 255, 255, 0.87) !important; border-color: #333333 !important; }

.btn:hover { background-color: #121212 !important; }

table th { background-color: #1e1e1e; border-color: #333333; color: rgba(255, 255, 255, 0.87); }

table td { background-color: #121212; border-color: #333333; color: rgba(255, 255, 255, 0.69); }

.flash { color: #121212 !important; filter: brightness(80%); }

canvas { filter: var(--default-canvas-filter); }

.post-list > li > div { box-shadow: none !important; background-color: #1e1e1e; border: none !important; }

li .post-meta-description { color: rgba(255, 255, 255, 0.69) !important; }

.search-result-preview { color: lightgray !important; }

.search-result-highlight { color: yellow !important; font-weight: bold !important; }

.search-results-list-item .search-result-title { color: cornflowerblue !important; }

#score { position: relative; z-index: 2; padding: 5px; color: #ff5555 !important; }

#gameBegin, #gameOver, #settings, #leaderboard { position: relative; z-index: 2; }

.submenu { color: rgba(255, 255, 255, 0.87) !important; background-color: #121212 !important; border: 1px solid #6272a4; border: none; position: fixed; z-index: 3; top: 55.95px; }
.submenu #score, .submenu #gameBegin, .submenu #gameOver, .submenu #settings, .submenu #leaderboard { display: inline-block; margin-right: 30px; }

.sidebar { color: rgba(255, 255, 255, 0.87) !important; background-color: #121212 !important; border: 1px solid #6272a4; border: none; position: fixed; z-index: 3; top: 0; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; /* Disable horizontal scroll */ transition: 0.5s; /* 0.5-second transition effect to slide in the sidebar */ width: 0px; padding-left: 0px; padding-right: 0px; }

.table.levels tr { cursor: pointer; }
.table.levels tr td { border: 1px solid #6272a4; }
.table.levels tr:hover { background-color: #6272a4; }
.table.levels tr:hover td { background-color: inherit; }

.input.userID { color: rgba(255, 255, 255, 0.87) !important; background-color: #121212 !important; border: 1px solid #6272a4; height: 30px; border-radius: 5px; padding: 5px; width: 100px; }

.input.gameSpeed, .input.gravity { color: rgba(255, 255, 255, 0.87) !important; background-color: #121212 !important; border: 1px solid #6272a4; height: 30px; border-radius: 5px; padding: 5px; width: 40px; text-align: right; }

/* define class for redifined button */
.button, .calculator-number, .calculator-operation, .calculator-clear, .calculator-equals { width: auto; height: auto; border-radius: 10px; background-color: #21807c; border: 3px solid black; font-size: 1.5em; display: flex; justify-content: center; align-items: center; grid-column: span 1; grid-row: span 1; transition: all 0.5s; }

/* darkens the background color on hover to create a selecting effect */
.button:hover, .calculator-number:hover, .calculator-operation:hover, .calculator-clear:hover, .calculator-equals:hover { background-color: #373737; }

/* "row style" is flexible size and aligns pictures in center */
.row { align-items: center; display: flex; }

/* "column style" is one-third of the width with padding */
.column { flex: 16.66%; padding: 3px; }

/* class to create the calculator's container; uses CSS grid dsiplay to partition off buttons */
.calculator-container { width: 90vw; /* this width and height is specified for mobile devices by default */ height: 80vh; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); /* fr is a special unit; learn more here: https://css-tricks.com/introduction-fr-css-unit/  */ grid-template-rows: 0.5fr repeat(4, 1fr); gap: 10px 10px; }

@media (min-width: 600px) { .calculator-container { width: 40vw; height: 80vh; } }
/* styling for the calculator number button */
/* styling for the calculator operation button */
/* styling for the calculator clear button */
.calculator-clear { background-color: #e68b1c; }

/* styling for the calculator equals button */
.calculator-equals { background-color: #e70f0f; }

@font-face { font-family: "Avant"; src: url("https://assets.codepen.io/383755/avant-garde.woff2") format("woff2"); }
.containerS { position: relative; width: auto; overflow: hidden; padding: 0.5rem; display: flex; justify-content: flex-end; mix-blend-mode: darken; z-index: 1; margin: 0 -1rem; }
.containerS:last-of-type { justify-content: start; }
.containerS:hover { z-index: 2; }
.containerS:nth-of-type(2) { --lightest: #ffd986; --light: #fdbb2d; --dark: #b21f1f; --darkest: #1a2a6c; }
.containerS .inner { display: inline-block; position: relative; pointer-events: all; z-index: 2; cursor: pointer; box-shadow: 0 0 0 500vmin #e8e6de; }
.containerS .inner:hover:active:before { background-size: 35% 60%, 100% 100%, 100%; }
.containerS .inner:hover:before { filter: blur(2px) brightness(1); background-size: 0px 0px, 100% 100%, 100%; transition: transform 0.5s var(--elastic), background-size 0.25s ease-in-out; }
.containerS .inner:before { content: ""; position: absolute; width: 200%; height: 200%; top: 0rem; left: 0rem; filter: blur(2px) brightness(0); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, var(--t) 20%), radial-gradient(circle at center, var(--lightest), var(--light) 5%, var(--dark) 30%, var(--darkest) 50%), var(--darkest); background-size: 0px 0px, 0px 0px, 100%; background-position: 50% 50%; background-repeat: no-repeat; opacity: 1; mix-blend-mode: lighten; z-index: 2; transition: transform 0.5s var(--elastic), background-size 0.25s ease-in-out, filter 0.5s ease-in-out; transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)); z-index: 2; pointer-events: none; }
.containerS .buttonS { padding: 3.5rem 6rem; border: none; font-size: 1.5rem; position: relative; background: transparent; color: #fff; z-index: 2; cursor: pointer; font-weight: 100; letter-spacing: 2px; text-transform: uppercase; font-family: "Avant", "Futura", sans-serif; text-shadow: clamp(-8px, calc((var(--width) / 2 - var(--x)) / 8), 8px) clamp(-8px, calc((var(--height) / 2 - var(--y)) / 8), 8px) 12px rgba(0, 0, 0, 0); transition: text-shadow 500ms var(--elastic); }
.containerS .buttonS:hover { --shadow: max( calc( (var(--width) / 2 - var(--x)) / 8 + ((var(--height) / 2 - var(--y)) / 3) ), calc( ( ((var(--width) / 2 - var(--x)) / 8) + ((var(--height) / 2 - var(--y)) / 3) ) * -1 ), 5px ); text-shadow: clamp(-6px, calc((var(--width) / 2 - var(--x)) / 12), 6px) clamp(-4px, calc((var(--height) / 2 - var(--y)) / 16), 4px) var(--shadow) #000; }
.containerS .buttonS:hover ~ .blob:before { transition: transform 500ms var(--elastic), box-shadow 1000ms var(--elastic); transform: translate(clamp(5%, calc(var(--x) - 50%), 550%), clamp(1rem, calc(var(--y) - 50%), 5rem)) scale(1.25); box-shadow: 0 0 0 0.05rem #fff, 0 -6rem 0 1.25rem #fff, 0 6rem 0 1.25rem #fff; }
.containerS .buttonS:active { cursor: grab; }
.containerS .buttonS:active:hover ~ .blob:before { box-shadow: 0 0 0 0rem #fff, 0 -5rem 0 1.75rem #fff, 0 5rem 0 1.75rem #fff; transition: transform 500ms var(--elastic), box-shadow 500ms var(--elastic); transform: translate(clamp(5%, calc(var(--x) - 50%), 550%), clamp(calc(50% + 1rem), calc(var(--y) - 50%), calc(50% + 1.5rem))) scale(1); }
.containerS .blob { position: absolute; pointer-events: none; width: 100%; height: 100%; top: 0; left: 0; background: #fff; filter: blur(12px) contrast(25); z-index: 1; }
.containerS .blob:before, .containerS .blob:after { content: ""; position: absolute; background: #000; }
.containerS .blob:before { width: 15%; height: auto; z-index: 2; transition: transform 750ms var(--elastic), box-shadow 500ms var(--elastic); aspect-ratio: 1/1; box-shadow: 0 0 0 0.75rem #fff, 0 -8rem 0 -2rem #fff, 0 8rem 0 -2rem #fff; left: 0; top: 0; border-radius: 100%; transform: translate(clamp(10%, calc(var(--x) - 50%), 550%), clamp(1rem, calc(var(--y) - 50%), 5rem)) scale(0); }
.containerS .blob:after { width: calc(100% - 4rem); height: calc(100% - 4rem); top: 2rem; left: 2rem; border-radius: 5rem; box-shadow: 0 0 0 8rem #fff; }