html, body, ul, p, ol { margin: 0; padding: 0; }

body { margin: 0 auto; line-height: 1; tab-size: 4; }

button, input { box-sizing: border-box; line-height: inherit; color: inherit; margin: 0; padding: 0; }

input[type="text"] { background-color: inherit; font-size: inherit; font-family: inherit; }

.hidden { display: none; }

.bordered { border: 1px solid red; }

:root { color-scheme: light dark; --text-color: #2b303a; --text-inverted-color: #ffffff; --page-background-color: #f5f5ff; --brand-color: #5dcb83; --test-color: red; --primary-accent-color: #2b303a; --primary-inverted-accent-color: #d8d8d8; --secondary-accent-color: #e7e7f1; --line-number-color: #525252; --line-number-emphasized-color: #c3c3c3; --inverted-code-color: #303541; --code-color: #e9e9f2; }

/*@media screen and (prefers-color-scheme: dark) { :root { --text-color: #e7e7f1; --text-inverted-color: #e7e7f1; --page-background-color: #2b303a; --test-color: blue; --banner-primary-color: #000000; --banner-secondary-color: #e7e7f1; } } */
body { font-family: 'Source Sans Pro', sans-serif; color: var(--text-color); background-color: var(--page-background-color); }

a { color: inherit; }

a:hover { color: var(--brand-color); }

ul li { padding: 5px; font-size: 1.3em; line-height: 140%; }

h1 { font-weight: 700; font-size: 2.8em; text-align: center; margin: 30px auto 30px auto; }

@media all and (max-width: 768px) { h1 { font-size: 1.6em; } }

@media all and (max-width: 380px) { h1 { font-size: 1.4em; } }

h2 { font-size: 1.2em; color: inherit; font-weight: 700; line-height: 140%; }

@media all and (max-width: 380px) { h2 { font-size: 1.0em; } }

h3 { font-size: 1.2em; color: inherit; }

img { max-width: 100%; }

.content { padding: 0px 40px; margin: 0px auto; max-width: 800px; overflow: hidden; }

@media all and (max-width: 768px) { .content { padding: 0px 20px; } }

.content p { font-weight: 400; font-size: 1.3em; line-height: 160%; margin: 20px 0px; }

@media all and (max-width: 768px) { .content p { margin: 10px 0px; } }

@media all and (max-width: 380px) { .content p { font-size: 1.0em; } }

.content ul { margin-left: 40px; }

.content .hex1 { top: 70px; right: 0px; stroke-width: 0.01; stroke: var(--secondary-accent-color); }

.content .hex2 { bottom: -40px; left: -80px; stroke-width: 0.04; stroke: var(--secondary-accent-color); }

.content_container { margin: 0px auto; max-width: 1200px; }

.brand_color { color: var(--brand-color); }

.decoration { position: absolute; z-index: -1; }

.decoration_container { position: relative; }

.hexagon { fill: none; position: absolute; z-index: -1; }

svg.background { width: 100%; height: 101%; top: 0px; left: 0px; z-index: -2; }

@keyframes hex_spin { 100% { transform: rotate(360deg); } }

@keyframes hex_spin_reverse { 100% { transform: rotate(-360deg); } }

svg.hexagon.primary { stroke: var(--primary-accent-color); }

.inverted svg.hexagon.primary { stroke: white; }

svg.hexagon.brand { stroke: var(--brand-color); }

polygon.primary { fill: var(--primary-accent-color); }

polygon.secondary { fill: var(--secondary-accent-color); }

polygon.brand { fill: var(--brand-color); }

.button_container { margin: 30px auto; }

.button { border-radius: 6px; margin: 0px auto; width: 200px; }

.button a { padding: 15px 0px; font-size: 1.5em; text-align: center; margin: 0px; display: block; text-decoration: none; }

@media all and (max-width: 768px) { .button { padding: 10px 0px; margin: 5px auto; } .button a { padding: 6px 0px; font-size: 1.2em; } }

@media all and (max-width: 380px) { .button a { font-size: 1.0em; } }

.button.normal { border: 2px solid var(--brand-color); }

.inverted { color: white; }

.inverted a { text-decoration: none; }

.button.inverted { background-color: var(--primary-accent-color); border: 2px solid var(--primary-accent-color); }

.column_row_container { display: flex; justify-content: center; align-items: center; margin: 0px auto; max-width: 750px; }

@media all and (max-width: 768px) { .column_row_container { flex-direction: column; } }

.column_row_container h4 { font-size: 1.6em; margin: 10px 0px; }

@media all and (max-width: 768px) { .column_row_container h4 { text-align: center; font-size: 1.2em; } }

.column_row_container p { font-size: 1.2em; line-height: 140%; margin: 0px; }

@media all and (max-width: 768px) { .column_row_container p { font-size: 1.0em; line-height: 120%; margin-left: 30px; margin-bottom: 20px; } }

.column_row_container div { flex: 1; padding: 5px 30px; margin: 0px auto; }

.banner_start { height: 90px; }

.banner { background-color: var(--primary-accent-color); }

.banner_end { height: 90px; }

.next_previous_posts { margin-bottom: 50px; display: flex; }

.next_previous_posts div { flex: 1; }

.next_previous_posts div:nth-child(2) { flex: 1; text-align: right; }

.fine_print p { text-align: center; font-weight: 400; font-size: 0.7em; line-height: 140%; margin: 0px 40px; }

@media all and (max-width: 768px) { .fine_print p { line-height: 110%; } }

.contact_section { margin: 20px 30px; }

.blog_callout { margin-top: 20px; text-align: center; font-size: 1.6em; font-weight: 300; }

@media all and (max-width: 768px) { .blog_callout { font-size: 1.2em; } }

table { border-collapse: collapse; }

header { color: var(--text-inverted-color); margin: 0px auto 10px auto; height: 220px; }

@media all and (max-width: 768px) { header { height: 180px; margin-bottom: 20px; } }

@media all and (max-width: 380px) { header { height: 150px; margin-bottom: 10px; } }

header a { text-decoration: none; }

header h1 { font-weight: 900; font-size: 4.0em; margin: 0px; }

@media all and (max-width: 380px) { header h1 { font-size: 3.0em; } }

header h1 a:hover { color: inherit; }

header div.flex-container { padding: 30px 60px 20px 20px; display: flex; justify-content: space-between; align-items: center; }

header ol { list-style: none; display: flex; align-items: center; font-weight: 600; font-size: 1.0em; }

@media all and (max-width: 768px) { header ol { display: none; } }

header ol li { padding: 0px 10px; }

header ol li div { padding: 8px 0px; }

header ol li.current div { border-bottom: 1px solid var(--brand-color); }

header .hex1 { top: 30px; left: 220px; stroke-width: 0.2; stroke: var(--primary-inverted-accent-color); }

@media all and (max-width: 380px) { header .hex1 { left: auto; right: 50px; } }

header .hex2 { top: 30px; left: 232px; stroke-width: 0.05; stroke: var(--brand-color); }

@media all and (max-width: 380px) { header .hex2 { left: auto; right: 10px; } }

header .hex3 { top: 85px; left: 210px; stroke-width: 0.1; stroke: var(--primary-inverted-accent-color); animation: hex_spin 20s linear infinite; }

@media all and (max-width: 380px) { header .hex3 { left: auto; right: 10px; } }

footer { padding: 100px 50px 30px 50px; margin: 0px auto; font-weight: 200; }

@media all and (max-width: 768px) { footer { padding: 100px 20px 30px 20px; } }

footer p { margin: 0px; font-weight: 200; }

footer a { text-decoration: none; }

footer div.content_container { display: flex; justify-content: center; align-items: center; }

@media all and (max-width: 768px) { footer div.content_container { flex-direction: column; } }

footer .social { order: 1; flex: 1; display: flex; align-items: center; }

footer .social img { height: 30px; width: 30px; margin: 0px 5px; }

@media all and (max-width: 768px) { footer .social { margin: 30px; } }

footer .legal { max-width: 330px; order: 2; }

footer .legal p { font-size: 0.8em; line-height: 140%; text-align: center; }

@media all and (max-width: 768px) { footer .legal { order: 3; margin: 30px; } }

footer .credits { order: 3; flex: 1; }

footer .credits p { font-size: 0.8em; text-align: right; line-height: 110%; }

@media all and (max-width: 768px) { footer .credits { order: 2; } footer .credits p { text-align: center; } }

footer.inverted .social img { filter: invert(1); }

footer .hex1 { top: -60px; left: -15px; stroke-width: 0.1; }

footer .hex2 { top: -25px; left: 30px; stroke-width: 0.05; }

@media all and (max-width: 768px) { footer .hex2 { display: none; } }

footer .hex3 { top: -10px; left: 105px; stroke-width: 0.02; animation: hex_spin_reverse 50s linear infinite; }

@media all and (max-width: 768px) { footer .hex3 { display: none; } }

footer .hex4 { top: -80px; right: 5px; stroke-width: 0.05; animation: hex_spin 80s linear infinite; }

footer .hex5 { top: -50px; right: 115px; stroke-width: 0.05; }

@media all and (max-width: 768px) { footer .hex5 { display: none; } }

footer .hex6 { top: -35px; right: 155px; stroke-width: 0.02; }

@media all and (max-width: 768px) { footer.inverted .hex1 { top: 0px; } }

@media all and (max-width: 768px) { footer.inverted .hex4 { top: -10px; } }

@media all and (max-width: 768px) { footer.inverted .hex6 { top: -10px; right: 35px; } }

.main_content { overflow: hidden; }

.main_content h1 { margin: 30px auto 10px auto; }

.main_content h3 { font-weight: 300; text-align: center; font-size: 2.0em; padding: 0px; margin: 0px auto; }

@media all and (max-width: 768px) { .main_content h3 { font-size: 1.2em; } }

@media all and (max-width: 380px) { .main_content h3 { font-size: 0.9em; } }

.main_content h2 { font-weight: 700; text-align: center; font-size: 2.8em; margin: 0; }

@media all and (max-width: 768px) { .main_content h2 { font-size: 1.6em; } }

@media all and (max-width: 380px) { .main_content h2 { font-size: 1.4em; } }

.hero { margin: 0px auto; max-width: 1440px; padding-bottom: 110px; }

@media all and (max-width: 768px) { .hero { padding-bottom: 30px; } }

.hero .button_container { width: 320px; display: flex; align-items: center; justify-content: center; margin-top: 60px; }

@media all and (max-width: 768px) { .hero .button_container { margin-top: 20px; width: 80%; } }

.hero .button { margin: 0px 10px; flex: 1; }

.hero .screenshot_container { padding: 50px; text-align: center; overflow: hidden; }

.hero .screenshot_container img { margin: 0px auto; max-width: 100%; }

@media all and (max-width: 768px) { .hero .screenshot_container { padding: 0px 0px 0px 20px; text-align: left; } .hero .screenshot_container img { max-width: none; height: 390px; } }

@media all and (max-width: 380px) { .hero .screenshot_container img { height: 320px; } }

.hero .hex1 { top: 180px; right: 70px; stroke-width: 0.01; stroke: var(--primary-accent-color); }

@media all and (max-width: 768px) { .hero .hex1 { display: none; } }

.hero .hex2 { top: 140px; right: 150px; stroke-width: 0.08; stroke: var(--brand-color); animation: hex_spin_reverse 70s linear infinite; }

@media all and (max-width: 768px) { .hero .hex2 { display: none; } }

.hero .hex3 { top: 100px; right: 60px; stroke-width: 0.05; stroke: var(--primary-accent-color); }

@media all and (max-width: 768px) { .hero .hex3 { right: -30px; } }

.hero .hex4 { bottom: 120px; left: 0px; stroke-width: 0.02; stroke: var(--primary-accent-color); animation: hex_spin 60s linear infinite; }

@media all and (max-width: 768px) { .hero .hex4 { display: none; } }

.hero .hex5 { bottom: 30px; left: 75px; stroke-width: 0.04; stroke: var(--brand-color); }

@media all and (max-width: 768px) { .hero .hex5 { bottom: 0px; left: -30px; } }

.hero .hex6 { bottom: 0px; left: 10px; stroke-width: 0.12; stroke: var(--primary-accent-color); }

@media all and (max-width: 768px) { .hero .hex6 { animation: hex_spin 60s linear infinite; left: -30px; } }

.features svg.traffic_lights { top: 70px; left: 25px; width: 90px; height: 20px; }

@media all and (max-width: 768px) { .features svg.traffic_lights { top: 50px; } }

.features svg.traffic_lights circle:nth-child(1) { fill: #ff6159; }

.features svg.traffic_lights circle:nth-child(2) { fill: #ffbd2d; }

.features svg.traffic_lights circle:nth-child(3) { fill: #27CC41; }

.features svg.line_numbers { top: 85px; left: 10px; width: 100%; height: 100%; }

@media all and (max-width: 768px) { .features svg.line_numbers { top: 70px; left: 0px; } }

.features svg.line_numbers text { font-family: 'Monaco', monospace; font-weight: 400; font-size: 1.4em; }

@media all and (max-width: 768px) { .features svg.line_numbers text { font-size: 1.1em; } }

.features svg.line_numbers tspan.line { font-family: 'Futura', sans-serif; fill: var(--line-number-color); }

.features svg.line_numbers tspan.emphasized { fill: var(--line-number-emphasized-color); }

.features svg.line_numbers tspan.code { fill: var(--code-color); }

.features svg.line_numbers tspan.inverted.code { fill: var(--inverted-code-color); }

@media all and (max-width: 768px) { .features svg.line_numbers tspan.code { display: none; } }

@media all and (max-width: 600px) { .features svg.line_numbers tspan.line.overflow { display: none; } }

@media all and (max-width: 768px) { .features .column_row_container p { margin-left: 30px; } }

.features .column_row_container div { flex: auto; }

.features .column_row_container div:nth-child(1) { order: 2; width: 40%; margin: 0px 20px 0px 0px; padding: 0px 0px 0px 60px; }

@media all and (max-width: 768px) { .features .column_row_container div:nth-child(1) { order: 1; margin-right: 0px; padding-left: 0px; margin: 0px 0px 20px 0px; width: 80%; } }

.features .column_row_container div:nth-child(2) { order: 1; width: 60%; margin: 0px 0px 0px 20px; padding: 0px; }

@media all and (max-width: 768px) { .features .column_row_container div:nth-child(2) { order: 2; margin: 0px; width: 80%; } }

.mac_os .column_row_container { padding: 180px 0px 145px 0px; color: var(--text-inverted-color); }

@media all and (max-width: 768px) { .mac_os .column_row_container { padding: 90px 0px 60px 0px; } }

.less_is_more .column_row_container { padding: 125px 0px; color: var(--text-color); }

@media all and (max-width: 768px) { .less_is_more .column_row_container { padding: 40px 0px; margin-bottom: 20px; } }

.semantics .column_row_container { padding: 50px 0px 160px 0px; color: var(--text-inverted-color); }

@media all and (max-width: 768px) { .semantics .column_row_container { padding: 30px 0px 80px 0px; } }

.main_content .contact_section { margin: 80px auto; }

.blog_callout { margin-top: 20px; text-align: center; font-size: 1.6em; font-weight: 300; }

@media all and (max-width: 768px) { .blog_callout { font-size: 1.2em; } }

.buy { margin: 50px auto 0px auto; }

@media all and (max-width: 768px) { .buy { margin: 10px auto; } }

.buy .purchase { width: 450px; margin: 20px auto; text-align: center; }

@media all and (max-width: 768px) { .buy .purchase { width: auto; margin: 10px auto; display: flex; flex-direction: column; align-items: center; } }

.buy .purchase h2 { font-size: 1.5em; }

@media all and (max-width: 768px) { .buy .purchase h2 { font-size: 1.2em; } }

.buy .purchase ul { text-align: left; line-height: 200%; margin-left: 30px; }

.buy .purchase ul li { font-weight: 300; }

@media all and (max-width: 768px) { .buy .purchase ul { line-height: 120%; } }

.buy .purchase .price { position: absolute; z-index: 2; top: 30px; right: 260px; background-color: var(--brand-color); padding: 40px 20px; }

@media all and (max-width: 768px) { .buy .purchase .price { position: default; z-index: default; top: 10px; right: auto; padding: 20px; } }

.buy .purchase .price h4 { margin: 0px 0px 10px 0px; font-size: 1.1em; font-weight: 500; font-style: italic; }

@media all and (max-width: 768px) { .buy .purchase .price h4 { font-size: 0.9em; } }

.buy .purchase .price p { font-size: 3.0em; font-weight: 700; }

@media all and (max-width: 768px) { .buy .purchase .price p { font-size: 2.0em; } }

.buy .purchase .details { margin: 0px 0px 50px 140px; padding: 0px 60px; border: 2px solid var(--primary-accent-color); }

@media all and (max-width: 768px) { .buy .purchase .details { margin: 90px 10px 10px 10px; padding: 10px 20px 0px 20px; } }

@media all and (max-width: 768px) { .buy .purchase .details .button_container { margin: 20px auto; } }

.buy .purchase .details .button { width: 120px; }

.buy .purchase .details .button a { font-size: 1.0em; padding: 10px; }

@media all and (max-width: 768px) { .buy .purchase .details .button a { padding: 0px; } }

.links_container { font-weight: 600; font-size: 0.8em; padding: 10px 0px; margin: 0px auto; width: 600px; }

@media all and (max-width: 768px) { .links_container { width: auto; padding: 20px 0px; } }

.links_container a { text-decoration: none; }

.links_container ol { list-style: none; display: flex; justify-content: space-evenly; align-content: space-around; flex-wrap: wrap; }

.links_container li { width: 33%; padding: 20px 0px; text-align: center; font-size: 1.3em; }

@media all and (max-width: 768px) { .links_container li { font-size: 1.0em; padding: 10px 0px; } }

.links svg { width: 100%; height: 100%; }

.inverted .links_container { padding: 100px 0px; }

@media all and (max-width: 768px) { .inverted .links_container { padding: 50px 0px; } }

.contact .title { margin: 40px auto; }

.contact h2 { text-align: center; font-size: 2.2em; font-weight: 300; margin: 5px auto; }

.contact h3 { text-align: center; font-size: 2.2em; margin: 0px auto; }

.contact img { width: 60px; }

@media all and (max-width: 768px) { .contact img { width: 30px; } }

.contact .inverted img { filter: invert(1); }

.contact .channel_container { display: flex; flex-direction: row; align-items: center; align-content: center; justify-content: center; }

.contact .channel { display: flex; flex-direction: column; }

.contact .channel a { color: inherit; }

.contact .channel_item { margin: 20px 0px; display: flex; flex-direction: row; align-items: center; }

.contact .channel_item div:nth-child(1) { margin-right: 50px; text-align: center; height: 60px; }

@media all and (max-width: 768px) { .contact .channel_item div:nth-child(1) { margin-right: 20px; height: 30px; } }

.contact .fine_print { padding: 30px; font-size: 1.2em; font-weight: 300; }

.contact .contact_section { text-align: center; }

.contact .contact_section h3 { font-weight: 300; font-size: 1.5em; }

@media all and (max-width: 768px) { .contact .contact_section h3 { font-size: 1.2em; } }

@media all and (max-width: 380px) { .contact .contact_section h3 { font-size: 0.9em; } }

.contact .contact_section h2 { font-weight: 700; font-size: 2.2em; margin: 0; }

@media all and (max-width: 768px) { .contact .contact_section h2 { font-size: 1.6em; } }

@media all and (max-width: 380px) { .contact .contact_section h2 { font-size: 1.4em; } }

.contact .hex1 { bottom: 80px; left: 30px; stroke-width: 0.02; }

@media all and (max-width: 768px) { .contact .hex1 { display: none; } }

.contact .hex2 { bottom: 100px; right: -50px; stroke-width: 0.04; }

@media all and (max-width: 768px) { .contact .hex2 { display: none; } }

.contact .hex3 { bottom: 30px; right: 50px; stroke-width: 0.08; }

.contact .hex4 { bottom: -50px; right: 50px; stroke-width: 0.06; }

@media all and (max-width: 768px) { .contact .hex4 { bottom: -20px; right: 20px; } }

@media all and (max-width: 600px) { .contact .hex4 { bottom: -30px; right: -20px; } }

.thankyou { text-align: center; }

.thankyou h2 { font-size: 3.0em; }

@media all and (max-width: 768px) { .thankyou h2 { font-size: 2.0em; } }

.thankyou .image_container img { width: 160px; }

.thankyou .instructions { width: 500px; margin: 30px auto; text-align: left; font-size: 2.0em; font-weight: 300; }

@media all and (max-width: 768px) { .thankyou .instructions { font-size: 1.2em; width: 300px; } }

.thankyou .instructions ul { margin: 20px; list-style-position: inside; font-size: 0.6em; line-height: 100%; }

@media all and (max-width: 768px) { .thankyou .instructions ul { margin-left: 40px; } }

.thankyou .instructions ul li { padding: 10px 5px; }

.thankyou { overflow: hidden; }

.thankyou .fine_print { width: 700px; margin: 80px auto; }

.thankyou .fine_print p { font-size: 1.2em; }

@media all and (max-width: 768px) { .thankyou .fine_print { width: 300px; margin: 40px auto; } .thankyou .fine_print p { font-size: 0.9em; } }

.thankyou .hex1 { top: 0px; left: 50px; stroke-width: 0.01; }

@media all and (max-width: 1024px) { .thankyou .hex1 { top: -50px; left: -100px; } }

@media all and (max-width: 768px) { .thankyou .hex1 { top: -50px; left: -200px; } }

.thankyou .hex2 { top: 0px; right: -220px; stroke-width: 0.02; }

@media all and (max-width: 1024px) { .thankyou .hex2 { top: 0px; right: -300px; } }

@media all and (max-width: 600px) { .thankyou .hex2 { top: -50px; right: -400px; } }

@media all and (max-width: 380px) { .thankyou .hex2 { display: none; } }

.download { margin: 50px auto 0px auto; }

.download .details { text-align: center; font-size: 0.8em; }

.download .details .value { font-weight: 100; }

.download .beta { text-align: center; font-size: 1.1em; margin-top: 15px; }

.faq { margin: 0px auto 30px 0px; }

@media all and (max-width: 768px) { .faq { margin-bottom: 10px; } }

.faq p { margin: 20px 0px 20px 0px; }

.faq a { color: var(--brand-color); }

.faq .banner { padding: 30px 0px; }

.faq .column_row_container { align-items: flex-start; }

.download .hex1 { bottom: -80px; left: -100px; stroke-width: 0.01; }

@media all and (max-width: 768px) { .download .hex1 { display: none; } }

.download .hex2 { top: -80px; right: -60px; stroke-width: 0.05; }

@media all and (max-width: 600px) { .download .hex2 { display: none; } }

.download .hex3 { top: 10px; right: 100px; stroke-width: 0.1; }

@media all and (max-width: 768px) { .download .hex3 { right: 20px; } }

.download .hex4 { top: -10px; right: 40px; stroke-width: 0.08; animation: hex_spin_reverse 70s linear infinite; }

@media all and (max-width: 768px) { .download .hex4 { right: -10px; } }

.download .hex5 { bottom: -100px; left: -80px; stroke-width: 0.01; }

@media all and (max-width: 768px) { .download .hex5 { display: none; } }

.download .hex6 { bottom: -30px; right: 40px; stroke-width: 0.05; }

#mc_embed_signup { padding: 0px 10px; }

#mc_embed_signup form .button { color: var(--text-color); background: none; border: 1px solid var(--brand-color); max-width: 120px; }

.release h2 { margin: 0px; }

.release p { margin: 0px auto; font-size: 0.8em; font-weight: 500; }

.release ul { margin-top: 10px; margin-bottom: 10px; }

.release li { padding: 0px; font-size: 1.0em; }

.release .details .value { font-weight: 100; }

div.highlighter-rouge { background: #2E3440; line-height: 120%; color: #eceff4; margin: 0px 40px 0px 40px; padding: 10px 20px; overflow: scroll; }

@media all and (max-width: 768px) { div.highlighter-rouge { margin: 0px 10px 0px 10px; padding: 10px 10px; } }

code.highlighter-rouge { font-family: monospace; }

.highlighter-rouge .kd { color: #81a1c1; }

.highlighter-rouge .k { color: #81a1c1; }

.highlighter-rouge .kt { color: #8fbcbb; }

.highlighter-rouge .s { color: #a3be8c; }

.highlighter-rouge .c1 { color: #4c566a; }

.highlighter-rouge .n { color: #d8dee9; }

.highlighter-rouge .nf { color: #88c0d0; }

.blog ol { list-style: none; }

.blog ol li { padding: 10px 0px; font-size: 1.3em; }

figure.image { text-align: center; margin: 0px; }

figure.hello_ruby img { min-width: 600px; margin-bottom: -30px; }

@media all and (max-width: 768px) { figure.hello_ruby img { margin-left: -40px; } }

figure.xc_perf_1 img { max-width: 320px; }

@media all and (max-width: 768px) { figure.xc_perf_1 img { max-width: 240px; } }

@media all and (max-width: 600px) { figure.xc_perf_1 img { max-width: 200px; } }

figure.xcode_project img { max-width: 450px; margin-bottom: 0px; }

@media all and (max-width: 768px) { figure.xcode_project img { max-width: 240px; } }

figure.extensions img { max-width: 450px; margin-bottom: 0px; padding: 30px 0px 30px 0px; }

@media all and (max-width: 768px) { figure.extensions img { max-width: 240px; } }

.renew { text-align: center; margin: 0px auto; width: 450px; }

.renew h2 { font-size: 3.0em; margin: 0px; }

@media all and (max-width: 768px) { .renew h2 { font-size: 2.0em; } }

.renew form { margin: 10px 0px 30px 0px; }

.renew .form_row { display: flex; align-items: center; padding: 10px 5px; font-size: 1.2em; }

.renew label { text-align: right; padding-right: 5px; flex: 1; }

.renew input { flex: 4; line-height: 40px; text-align: center; background-color: white; }

.renew input[type="submit"] { margin-top: 10px; background: var(--page-background-color); border: 2px solid var(--brand-color); font-size: 1.2em; }

.renew input[type="submit"]:active { background: var(--primary-accent-color); color: var(--brand-color); }

.renew .fine_print { padding: 20px; }

.renew .help { padding: 20px; }

.renew p { line-height: 1.2em; }

.renew #expiry_date { font-weight: bold; }

#renewable .button { margin-top: 30px; }

.extensions .title { margin: 40px auto; }

.extensions h2 { text-align: center; font-size: 2.5em; margin: 0px auto; }

@media all and (max-width: 768px) { .extensions h2 { font-size: 2.0em; margin: 10px auto; } }

.extensions h4 { margin: 0px 0px 10px 0px; }

.extensions img { width: 60px; }

@media all and (max-width: 768px) { .extensions img { width: 30px; } }

.extensions .types { display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; }

.extensions .types section { margin: 20px 0px; display: flex; flex-direction: row; align-items: center; justify-content: center; }

.extensions .types section .caption { width: 300px; }

@media all and (max-width: 768px) { .extensions .types section .caption { width: 200px; } }

.extensions .types section div:nth-child(1) { margin-right: 20px; text-align: center; }

@media all and (max-width: 768px) { .extensions .types section div:nth-child(1) { margin-right: 20px; } }

.extensions .note { text-align: center; font-size: 0.8em; font-weight: 700; }

.extensions .chimekit { margin: 0px auto; padding: 20px 0px; text-align: center; max-width: 580px; }

.extensions .chimekit p { line-height: 1.4em; margin-top: 20px; font-size: 1.2em; }

@media all and (max-width: 768px) { .extensions .chimekit p { font-size: 1.0em; margin: 30px; } }

.extensions .chimekit img { width: 300px; padding: 40px 0px; }

@media all and (max-width: 768px) { .extensions .chimekit img { width: 200px; } }

.extensions .chimekit a { text-decoration: underline; }

.extensions .hex1 { bottom: 80px; left: 30px; stroke-width: 0.02; }

@media all and (max-width: 768px) { .extensions .hex1 { display: none; } }

.extensions .hex2 { bottom: 100px; right: -50px; stroke-width: 0.04; }

@media all and (max-width: 768px) { .extensions .hex2 { display: none; } }

.extensions .hex3 { bottom: 30px; right: 50px; stroke-width: 0.08; }

.extensions .hex4 { bottom: -50px; right: 50px; stroke-width: 0.06; }

@media all and (max-width: 768px) { .extensions .hex4 { bottom: -20px; right: 20px; } }

@media all and (max-width: 600px) { .extensions .hex4 { bottom: -30px; right: -20px; } }

.extensions .available h2 { margin: 0px; padding: 40px 40px 4px 40px; }

@media all and (max-width: 768px) { .extensions .available h2 { padding-top: 20px; } }

.extensions .available .list { margin: 0px auto; padding: 30px 0px; width: 400px; }

@media all and (max-width: 768px) { .extensions .available .list { width: 240px; } }

.extensions .available .list .column_row_container { padding: 4px 0px; justify-content: center; border-bottom: 1px solid #bbbbbb; }

.extensions .available .list .column_row_container p { margin: 0px; }

@media all and (max-width: 768px) { .extensions .available .list .column_row_container { padding: 12px 0px; flex-direction: column; } }

.extensions .available .list .column_row_container div { padding: 0px; text-align: center; }

.extensions .available .list .column_row_container div.image { display: none; flex: 1; }

.extensions .available .list .column_row_container div.image img { margin: 0px; height: 30px; width: auto; }

.extensions .available .list .column_row_container div.name { flex: 2 4; font-weight: 700; }

@media all and (max-width: 768px) { .extensions .available .list .column_row_container div.name { padding-bottom: 4px; } }

.extensions .available .list .column_row_container div.summary { flex: 4; }

@media all and (max-width: 768px) { .extensions .available .list .column_row_container div.summary { width: 100%; } }

.extensions .available .list .column_row_container div.summary .preview { font-weight: 300; color: #bbbbbb; }

.extensions .available .list .column_row_container:last-of-type { border-bottom: none; }

/*# sourceMappingURL=style.css.map */