* { box-sizing: border-box; }

*:target { padding-top: 70px; margin-top: -70px; }

html { box-sizing: border-box; padding: 0; margin: 0; min-height: 100vh; }

body { margin: 0; padding: 0; padding-top: 70px; min-height: 100vh; min-width: 100%; font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; color: #333333; font-size: 18px; display: flex; flex-direction: column; }

@media (max-width: 850px) { body { padding-top: 50px; } }

h1, h2, h3, h4, h5, h6 { font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; }

h1 { font-weight: 600; font-size: 64px; }

h2 { font-weight: 600; font-size: 32px; }

h3 { font-weight: 500; font-size: 18px; }

p { line-height: 1.5; font-weight: 400; }

label { font-size: 12px; font-weight: 400; }

ul > li { line-height: 1.5; }

@media (min-width: 850px) { .word-splitter { display: none; } }

.container { padding: 0 1em; }

.container-fill { flex: 1 0 auto; }

.container-restricted { margin: auto; width: 1400px; max-width: 100vw; }

@media (min-width: 850px) { .container-restricted { max-width: calc(100vw - 3em); } }

.list-unstyled { padding: 0; margin: 0; list-style: none; }

.text-teachla { color: #5EDA12; }

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

@media (min-width: 850px) { .text-desktop-right { text-align: right; } }

.text-it { font-style: italic; }

.text-normal { font-weight: normal; }

.title { font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; margin-bottom: 0; font-size: 32px; font-weight: 600; }

.text-1x { font-size: 1rem !important; }

.text-2x { font-size: 2em; }

.text-12x { font-size: 1.2em; }

.text-15x { font-size: 1.5em; }

.text-25x { font-size: 2.5em; }

.font-display { font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; }

.tla-descrip { font-size: 5.5vw; }

@media (min-width: 850px) { .tla-descrip { font-size: 1.5em; } }

.page-title { font-size: 10vw; margin-bottom: 0; }

@media (min-width: 850px) { .page-title { font-size: 3em; } }

.divider { border-top: 1px solid #5EDA12; }

.justify-center { justify-content: center; }

.auto-height { height: auto; }

.flex-center { align-self: center; justify-self: center; }

.img-responsive { display: block; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; }

@media (min-width: 850px) { .img-half-on-large { max-width: 50%; } }

.img-push-down { margin-top: 2em; }

.img-curved { border-radius: 4px; }

.img-push-up { margin-top: 16px; }

@media (min-width: 850px) { .img-push-up { margin-top: 32px; } }

.img-decorated { border: 5px solid #5EDA12; }

.no-margin { margin: 0; }

.mb-10 { margin-bottom: 10px; }

.mb-32 { margin-bottom: 32px; }

.mb-50 { margin-bottom: 50px; }

.my-3 { margin: 3em 0; }

.schedule-table-header { border-collapse: collapse; width: 100%; font-size: 24px; font-weight: 600; border-bottom: 2px solid transparent; background-image: linear-gradient(90deg, #5EDA12, #BCF223); background-origin: border-box; background-size: 100% 4px; background-position: bottom; background-repeat: no-repeat; table-layout: fixed; }

.schedule-table-header td { text-align: left; padding: 3vw; padding-top: 15px; padding-bottom: 15px; }

@media (min-width: 850px) { .schedule-table-header td { padding: 60px 0 17px 65px; } }

.schedule-table { border-collapse: collapse; width: 100%; border-radius: 15px; overflow: hidden; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1); margin: 38px 0; table-layout: fixed; }

.schedule-table tr:last-child { border-bottom: 2px solid transparent; }

.schedule-table tr .middle-column { color: #5EDA12; font-weight: 600; }

.schedule-table tr .middle-column a { color: #5EDA12; text-decoration: none; }

.schedule-table tr td { border-bottom: 1px solid #5EDA12; text-align: left; padding: 3vw; padding-top: 15px; padding-bottom: 15px; }

@media (min-width: 850px) { .schedule-table tr td { padding: 28px 0 28px 65px; } }

.tla-link { color: inherit; font-weight: bold; text-decoration: none; background-position: left bottom; background-image: linear-gradient(white 0%, #5EDA12 0%); background-size: 100% 15%; background-repeat: no-repeat; }

@media (min-width: 850px) { .tla-link { transition: all 500ms ease; } .tla-link:hover { background-size: 100% 85%; color: inherit; } }

.pronouns { font-size: 0.6em; }

.img-sponsor { max-width: 80%; }

.v-center-children { display: flex; flex-direction: column; justify-content: center; }

.alert { border: 2px solid #5EDA12; border-radius: 4px; padding: 0.5em; }

.resource-logo { max-height: 200px; max-width: 200px; width: auto; height: auto; margin: auto; }

@media (max-width: 850px) { .resource-logo { width: 90%; } }

.resource-card { margin-top: 1em; margin-bottom: 1em; height: 100%; max-width: 100%; display: grid; grid-template-columns: 1fr 2fr; align-items: center; }

@media (max-width: 850px) { .resource-card { grid-template-columns: 100%; } }

.resource-card-container { padding-left: 1em; padding-right: 1em; margin: 2em; border: 2px solid #5eda12; border-radius: 10px; }

.landing-top { background-image: url("../img/landing-illustration.svg"); background-size: cover; background-repeat: no-repeat; height: 100vh; /* Adjust this value based on the aspect ratio of the background image */ margin: 0; padding: 20vh 0; }

@media (min-width: 850px) { .row-desktop-ratio-1-1 { display: grid; grid-template-columns: 1fr 1fr; } .row-desktop-ratio-1-1 .col-padded { padding-left: 1em; padding-right: 1em; } .row-desktop-ratio-1-1 .col-padded:nth-child(2n) { padding-left: 1em; padding-right: 0; } .row-desktop-ratio-1-1 .col-padded:nth-child(2n + 1) { padding-left: 0; padding-right: 1em; } .row-desktop-ratio-1-1.row-desktop-reverse { grid-template-columns: 1fr 1fr; } }

@media (min-width: 850px) { .row-desktop-ratio-1-2 { display: grid; grid-template-columns: 1fr 2fr; } .row-desktop-ratio-1-2 .col-padded { padding-left: 1em; padding-right: 1em; } .row-desktop-ratio-1-2 .col-padded:nth-child(2n) { padding-left: 1em; padding-right: 0; } .row-desktop-ratio-1-2 .col-padded:nth-child(2n + 1) { padding-left: 0; padding-right: 1em; } .row-desktop-ratio-1-2.row-desktop-reverse { grid-template-columns: 2fr 1fr; } }

@media (min-width: 850px) { .row-desktop-ratio-2-1 { display: grid; grid-template-columns: 2fr 1fr; } .row-desktop-ratio-2-1 .col-padded { padding-left: 1em; padding-right: 1em; } .row-desktop-ratio-2-1 .col-padded:nth-child(2n) { padding-left: 1em; padding-right: 0; } .row-desktop-ratio-2-1 .col-padded:nth-child(2n + 1) { padding-left: 0; padding-right: 1em; } .row-desktop-ratio-2-1.row-desktop-reverse { grid-template-columns: 1fr 2fr; } }

@media (min-width: 850px) { .row-desktop-ratio-1-1-1 { display: grid; grid-template-columns: 1fr 1fr 1fr; } .row-desktop-ratio-1-1-1 .col-padded { padding-left: 1em; padding-right: 1em; } .row-desktop-ratio-1-1-1 .col-padded:nth-child(3n) { padding-left: 1em; padding-right: 0; } .row-desktop-ratio-1-1-1 .col-padded:nth-child(3n + 1) { padding-left: 0; padding-right: 1em; } .row-desktop-ratio-1-1-1.row-desktop-reverse { grid-template-columns: 1fr 1fr 1fr; } }

@media (min-width: 850px) { .row-desktop-ratio-1-1-1-1 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } .row-desktop-ratio-1-1-1-1 .col-padded { padding-left: 1em; padding-right: 1em; } .row-desktop-ratio-1-1-1-1 .col-padded:nth-child(4n) { padding-left: 1em; padding-right: 0; } .row-desktop-ratio-1-1-1-1 .col-padded:nth-child(4n + 1) { padding-left: 0; padding-right: 1em; } .row-desktop-ratio-1-1-1-1.row-desktop-reverse { grid-template-columns: 1fr 1fr 1fr 1fr; } }

@media (min-width: 0) { .row-ratio-1-3 { display: grid; grid-template-columns: 1fr 3fr; } .row-ratio-1-3 .col-padded { padding-left: 1em; padding-right: 1em; } .row-ratio-1-3 .col-padded:nth-child(2n) { padding-left: 1em; padding-right: 0; } .row-ratio-1-3 .col-padded:nth-child(2n + 1) { padding-left: 0; padding-right: 1em; } .row-desktop-ratio-1-3.row-desktop-reverse { grid-template-columns: 3fr 1fr; } }

@media (min-width: 850px) { .row-desktop-reverse div:nth-child(2) { grid-row: 1; } .row-desktop-reverse .col-padded:first-child { padding-right: 0; padding-left: 1em; } .row-desktop-reverse .col-padded:last-child { padding-left: 0; padding-right: 1em; } .grid-column-gap-2 { column-gap: 2rem; } }

.TEAM-SPECIAL .grid-row { display: flex; justify-content: flex-start; width: 100%; height: 100%; }

.TEAM-SPECIAL .grid-col { display: flex; flex-direction: column; justify-content: center; }

/* Vertical Sliding - taken from https://codepen.io/amritleone/pen/qERPmW */
.vertical-slide { display: inline; text-indent: 8px; }

.vertical-slide span { animation: topToBottom 12.5s linear infinite 0s; opacity: 0; overflow: hidden; position: absolute; }

.vertical-slide span:nth-child(2) { animation-delay: 2.5s; }

.vertical-slide span:nth-child(3) { animation-delay: 5s; }

.vertical-slide span:nth-child(4) { animation-delay: 7.5s; }

.vertical-slide span:nth-child(5) { animation-delay: 10s; }

@keyframes topToBottom { 0% { opacity: 0; }
  5% { opacity: 0;
    transform: translateY(-50px); }
  10% { opacity: 1;
    transform: translateY(0px); }
  25% { opacity: 1;
    transform: translateY(0px); }
  30% { opacity: 0;
    transform: translateY(50px); }
  80% { opacity: 0; }
  100% { opacity: 0; } }

@keyframes heartbeat { 0% { transform: scale(0.75); }
  25% { transform: scale(1); }
  50% { transform: scale(0.75); }
  75% { transform: scale(1); }
  100% { transform: scale(0.75); } }

.animated-heartbeat { animation: heartbeat 2s infinite; }

.button { display: inline-block; background: white; border-radius: 4px; padding: 10px 20px; color: #5EDA12; border: 2px solid #5EDA12; text-decoration: none; text-align: center; font-weight: bold; }

.button:hover { color: white; background: #5EDA12; cursor: pointer; }

.button:active { background-color: #262938; border: 2px solid #262938; }

.button > .fa, .button .fab, .button .fas { margin-right: 0.5em; }

.button.button-sm { padding: 4px 12px; }

.button-dark { color: #262938; border: 2px solid #262938; }

.button-dark:hover { color: #5EDA12; background: #262938; cursor: pointer; }

.button-dark:active { background-color: white; border: 2px solid #262938; }

.button-block { display: block; margin-bottom: 0.5em; }

.button-container { display: flex; flex-direction: column; }

.button-container a { margin-top: 0.5em; }

@media (min-width: 850px) { .button-container { flex-direction: row; } .button-container a { margin-top: 0; margin-right: 0.5em; } }

.bottom-button-container { display: flex; flex-direction: column; }

.bottom-button-container a { margin-top: 0.5em; }

@media (min-width: 850px) { .bottom-button-container { flex-direction: row; justify-content: center; } .bottom-button-container a { margin-top: 0; margin-left: 0.5em; } .bottom-button-container a:nth-child(1) { margin-left: 0; } }

.footer { flex-shrink: 0; padding-top: 2rem; padding-bottom: 2rem; font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; background-color: FFFFFF; color: #5EDA12; }

.footer a { color: #313235; text-decoration: none; }

.footer .footer-content { display: grid; box-shadow: 0px -2px 7px rgba(0, 0, 0, 0.1); position: absolute; padding-top: 50px; padding-bottom: 50px; left: 0; right: 0; }

@media (min-width: 850px) { .footer .footer-content { grid-template-columns: 2fr 4fr; column-gap: 2rem; } }

.footer .footer-aside { margin: 0 auto; position: relative; }

.footer .logo { position: relative; top: 100px; }

.footer .footer-links { position: relative; left: 5px; column-gap: 12px; }

.footer .footer-main { display: grid; padding-left: 15px; height: 300px; }

@media (min-width: 850px) { .footer .footer-main { grid-template-columns: repeat(5, 1fr); column-gap: 1rem; } .footer .footer-main #row2first { grid-area: 2 / 1 / 2 / 3; } .footer .footer-main #row2second { grid-area: 2 / 3 / 2 / 3; } .footer .footer-main #row2third { grid-area: 2 / 4 / 2 / 6; } }

.footer #row2second { display: flex; flex-direction: column; max-height: 10 rem; flex-wrap: wrap; }

.footer .footer-col { padding-bottom: 1rem; }

.footer .footer-col.no-title { padding-top: 3rem; }

.footer .footer-title { margin-top: 0; margin-bottom: 0.5rem; font-size: 8vw; }

@media (min-width: 850px) { .footer .footer-title { font-size: 2.2rem; margin-bottom: 2rem; } }

.footer .footer-subtitle { margin: 0; font-size: 14px; line-height: 2.5; font-weight: normal; }

.footer .footer-links { display: flex; flex-direction: row; padding-left: 0; margin: 0; list-style-type: none; }

.footer .footer-links li { padding-right: 1rem; }

.footer .footer-links li:last-child { padding-right: 0; }

.footer .footer-link { display: flex; align-items: center; }

.footer .footer-link .icon { font-size: 1.3rem; }

.footer .footer-link.email { margin: 0; margin-top: 0.5rem; }

.footer .footer-link.email .icon { margin-right: 0.5rem; }

.footer .footer-copyright { margin-top: 2rem; }

.footer .footer-nav { margin: 0; padding: 0; font-size: 14px; list-style: none; }

.footer .footer-nav a { line-height: 1.5rem; }

.generated-content h1, .generated-content h2, .generated-content h3, .generated-content h4, .generated-content h5, .generated-content h6 { font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; margin-bottom: 0; }

.generated-content a { color: inherit; font-weight: bold; text-decoration: none; background-position: left bottom; background-image: linear-gradient(white 0%, #5EDA12 0%); background-size: 100% 15%; background-repeat: no-repeat; }

@media (min-width: 850px) { .generated-content a { transition: all 500ms ease; } .generated-content a:hover { background-size: 100% 85%; color: inherit; } }

.generated-content p { line-height: 1.5; }

.generated-content img { display: block; max-width: 100%; height: auto; }

#navbar { position: absolute; z-index: 10; top: 0; left: 0; height: 70px; width: 100%; background: white; box-shadow: 0px 1px 4px #E2E2E2; font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; color: #333333; }

#navbar #navbar-inner { width: 100%; margin: auto; max-width: 1400px; }

#navbar .nav-section.left { float: left; margin-left: 20px; }

#navbar .nav-section.right { margin-right: 20px; float: right; }

#navbar #acm-tla-wordmark { height: 50px; width: auto; margin-top: 10px; background-color: white; }

#navbar ul.nav-items { list-style: none; height: 100%; margin: 0; padding: 0; display: inline-block; }

#navbar ul.nav-items li { display: inline-block; text-transform: lowercase; font-size: 0.95em; padding: 0px 20px; line-height: 40px; margin-top: 13px; font-weight: 600; transition: 0.2s; }

#navbar ul.nav-items li.nav-button { background: white; border-radius: 10px; margin-left: 15px; color: #5EDA12; border: 2px solid #5EDA12; }

#navbar ul.nav-items li.nav-button:hover { color: white; background: #5EDA12; }

#navbar ul.nav-items li.nav-button:active { background-color: #262938; border: 2px solid #262938; }

#navbar ul.nav-items li a:hover { color: #999999; cursor: pointer; }

#navbar a, #navbar a:visited { color: inherit; }

#navbar #mobile-nav { display: none; }

#navbar .hamburger-icon { height: 50px; width: 50px; margin: 10px 0; display: flex; justify-content: center; flex-direction: column; }

#navbar .hamburger-icon:hover { cursor: pointer; }

#navbar .hamburger-icon:hover .bar { margin: 3px 0px; background-color: #333333; }

#navbar .hamburger-icon .bar { align-self: center; width: 50%; height: 3px; border-radius: 4px; margin: 2px 0px; transition: 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98); background-color: #777777; }

#navbar #menu-toggle { display: none; }

#navbar #hamburger-menu { position: fixed; top: 0; left: 0; bottom: 0; height: 100%; width: 100%; z-index: -20; transform: translate3d(0, -100%, 0); background: rgba(255, 255, 255, 0.95); display: flex; flex-direction: column; justify-content: center; transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98); }

#navbar #hamburger-menu ul.nav-items { list-style: none; display: block; margin: auto; margin-top: 100px; display: flex; flex-direction: column; justify-content: center; text-align: center; float: none; padding: 0px; }

#navbar #hamburger-menu ul.nav-items li { display: block; margin: 30px auto; padding: 0px; text-transform: lowercase; transform: translate3d(0, -50%, 0); opacity: 0; font-size: 1.8em; font-weight: 600; transition: all 1.25s cubic-bezier(0.05, 1.04, 0.72, 0.98); }

#navbar #hamburger-menu ul.nav-items li.nav-button { padding: 10px 20px; }

#navbar #hamburger-menu ul.nav-items li.nav-button:hover { color: white; }

#navbar #hamburger-menu ul.nav-items li:hover { color: #999999; cursor: pointer; }

#navbar #menu-toggle:checked + #hamburger-menu { transform: translate3d(0, 0, 0); }

#navbar #menu-toggle:checked + #hamburger-menu ul.nav-items li { transform: translate3d(0, 0, 0); opacity: 1; }

#navbar a { text-decoration: none; }

#navbar a.active li, #navbar a.active ul.nav-items li:hover { color: #5EDA12 !important; }

@media (max-width: 850px) { #navbar #desktop-nav { display: none; } #navbar #mobile-nav { display: inline-block; } }

.budget-table { border-collapse: collapse; width: 100%; }

.budget-table tr th, .budget-table tr td { border-bottom: 2px solid black; padding-top: 15px; padding-bottom: 15px; }

@media (min-width: 850px) { .budget-table tr th, .budget-table tr td { padding: 15px; } }

.budget-table tr th { font-weight: bold; }

.budget-table tr:nth-child(even) { background-color: #5EDA12; }

.class-card { padding: 2em; margin-top: 2em; border: 2px solid #5EDA12; border-radius: 10px; }

.class-content { padding-left: 2em; padding-right: 2em; }

.class-content-container { display: grid; grid-template-columns: 230px auto 70%; min-height: 100vh; }

@media (max-width: 1150px) and (min-width: 850px) { .class-content-container { grid-template-columns: 230px auto; } }

@media (max-width: 850px) { .class-content-container { grid-template-columns: 100%; min-height: 70vh; } }

.lesson-card-content { flex: 1 0 auto; }

.dev-content { padding-left: 2em; padding-right: 2em; }

.dev-project-card { padding: 0.5em; margin-top: 2em; border: 2px solid #5EDA12; border-radius: 10px; width: 90%; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; }

.dev-project-card-content { flex: 1 0 auto; }

.dev-project-title { margin: 0; font-size: 1.4em; }

.dev-project-badge { width: 1em; height: 1em; display: inline-block; border-radius: 100px; position: relative; top: 0.125em; margin-right: 0.25em; }

.dev-project-badge.lang-js { background-color: #EFDF6A; }

.dev-project-badge.lang-ts { background-color: #efaa6a; }

.dev-project-badge.lang-go { background-color: #4AABD5; }

.dev-project-badge.lang-html { background-color: #D35A31; }

.dev-project-info-row { margin-top: 0.25em; font-size: 1em; }

.dev-project-tag-container { flex-shrink: 0; }

.dev-project-tech-tag { display: inline-block; border: 2px solid #5EDA12; border-radius: 10px; padding: 0.25em 0.5em; text-align: center; margin-right: 0.5em; margin-top: 0.25em; margin-bottom: 0.25em; }

:root { --primary: #5eda12; --neutral: #585858; --black: #313235; }

.top-padding { padding-top: 3.5rem; }

.blogs { display: grid; grid-template-columns: repeat(2, minmax(300px, 1fr)); gap: 4rem; }

@media (max-width: 768px) { .blogs { grid-template-columns: 1fr; gap: 2rem; } }

.post-card { display: flex; gap: 2rem; width: 100%; padding: 3rem; padding-right: 6rem; border-radius: 15px; border: 1px solid var(--primary); -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3); }

@media (max-width: 768px) { .post-card { flex-direction: column; gap: 1rem; padding: 2rem; } }

.post-card.small-post-card { flex-direction: column; gap: 1rem; padding: 2rem; border: 0px; height: 100%; }

.post-card .small-post-card--image { max-height: 200px; max-width: 100%; border-radius: 15px; }

.post-card--description { flex: 1 1 0px; color: var(--black); }

.post-card--description h1 { font-size: 24px; }

.post-card--description h2 { font-size: 18px; }

.post-card--description h4 { font-size: 12px; font-weight: 400; }

.post-card--description span { color: var(--primary); font-size: 18px; letter-spacing: 0.3rem; text-transform: uppercase; }

.post-card--description hr { border: 1px solid var(--primary); margin: 10px 0; }

.post-card--description * { margin: 0.3rem; padding: 0; }

.post-card--image { flex: 1 1 0px; object-fit: cover; max-width: 40%; }

@media (max-width: 768px) { .post-card--image { max-width: 100%; max-height: 200px; border-radius: 15px; } }

@media (min-width: 850px) { .post-preview { display: grid; align-items: center; grid-template-rows: 1fr; grid-template-columns: 5fr 8fr; } }

.post-preview-img { margin: 0.5em; margin-right: 1em; width: 100%; height: auto; align-self: center; }

.post-info { margin: 1.5em 0; padding: 0.5em 10px; padding-left: 1em; }

@media (min-width: 850px) { .post-info { border-left: 10px solid #5EDA12; margin-left: 1em; margin-right: 0.5em; } }

.post-info a { color: inherit; font-weight: bold; text-decoration: none; background-position: left bottom; background-image: linear-gradient(white 0%, #5EDA12 0%); background-size: 100% 15%; background-repeat: no-repeat; }

@media (min-width: 850px) { .post-info a { transition: all 500ms ease; } .post-info a:hover { background-size: 100% 85%; color: inherit; } }

.post-container { max-width: 40em; margin-left: auto; margin-right: auto; }

.post-main-img { display: block; margin-left: auto; margin-right: auto; max-width: 60%; height: auto; }

.post-author-grid { height: 100%; max-width: 100%; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 2em; }

.post-author-grid > div { margin-bottom: 1em; }

@media (max-width: 850px) { .post-author-grid { grid-template-columns: 100%; } .post-author-grid > div { margin-bottom: 2em; } }

.post-author-img { width: 4em; height: 4em; display: block; border-radius: 10px; }

.post-author-info { padding-left: 1.5em; }

.post-want-more { font-size: 1.5rem; margin-top: 1em; margin-bottom: 2em; }

@media (min-width: 850px) { .post-want-more { margin: 2em; } }

.post-recommendations { font-size: 1.25rem; }

@media (max-width: 330px) { .post-recommendations { font-size: 1rem; } }

.post-recommend-container { margin-top: 1.5em; }

@media (min-width: 850px) { .post-recommend-container { display: grid; grid-template-columns: 1fr 1fr 1fr; } }

.post-recommend-card { display: grid; grid-template-columns: auto; padding: 1em; margin: 1em; margin-left: 0.25em; margin-right: 0.25em; border: 2px solid #5EDA12; border-radius: 10px; }

.post-recommend-img { align-self: center; width: 90%; height: auto; margin: 1em; margin-left: auto; margin-right: auto; }

.post-recommend-info { align-self: flex-end; margin: 1em; font-size: 0.9rem; }

.post-img { padding: 2%; max-width: 96%; }

.social { font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.social-buttons { display: flex; flex-direction: row; }

[hidden] { display: none; }

.fa-rss-square { color: orange; }

.social-RSS-icon { font-size: 2rem; }

a { text-decoration: none; }

.profile-img-container { padding-top: 1.2em; padding-bottom: 1.2em; padding-right: 1.2em; width: 7em; }

@media (max-width: 850px) { .profile-img-container { width: 40vw; } }

.profile-img { display: block; width: 100%; height: auto; border-radius: 4px; }

.team-member-content { word-wrap: break-word; }

@media (max-width: 850px) { .team-member-content > h3 { font-size: 1em; } .team-member-content > .team-member-position { font-size: .75em; } }

@media (min-width: 850px) { .team-member-content > p { margin: 0; } }

.team-profile { margin-top: 2em; }

.team-posts { margin-top: 3em; }

@media (max-width: 850px) { .grid-col .team-member-content { width: 40vw; } .grid-col .tla-link { overflow-wrap: break-word; width: 1vw; font-size: .75em; } }

@media (max-width: 850px) { .team-row { flex-flow: column nowrap; } }

.sidebar { top: 70px; left: 0; width: 300px; height: 100%; display: flex; justify-content: flex-end; padding: 25px 10px 0px 10px; position: sticky; }

@media (max-width: 850px) { .sidebar { display: none; } }

.sidebar-content { width: 250px; }

#dev-setup-button:checked + #dev-setup ol.sidebar-items li { display: list-item; }

#add-to-team-page-button:checked + #add-to-team-page ol.sidebar-items li { display: list-item; }

input { display: none; }

label { color: #333333; cursor: pointer; font-size: 1.3em; }

label:hover { color: black; }

ol.sidebar-items li { display: none; }

ol.sidebar-items li a { background-image: none; color: #333333; font-weight: normal; }

#selected { font-weight: bold; }

ol.sidebar-items li a:hover { color: black; }

#docs-pages-content { padding: 0 7.5px 0 7.5px; width: 100%; max-width: 1100px; /* This will get rid some of the extra white space on the sidebar*/ }

#docs-pages-content-width { width: 1000px; max-width: calc(100vw - 300px); }

@media (max-width: 850px) { #docs-pages-content-width { max-width: calc(100vw - 3em); } }

#docs-pages { left: 0; display: flex; justify-content: center; }

.generated-content img { max-height: 25rem; max-width: 94%; padding: 2%; }

.generated-content pre { white-space: pre-wrap; border-radius: 4px; padding: 15px; border: 2px solid #5EDA12; }

.generated-content code { font-family: "Source Code Pro", monospace; font-size: 0.8em; }

.generated-content .highlight { padding-left: 1em; background: #FCFCFC; /* Comment */ /* Error */ /* Keyword */ /* Operator */ /* Comment.Multiline */ /* Comment.Preproc */ /* Comment.Single */ /* Comment.Special */ /* Generic.Deleted */ /* Generic.Emph */ /* Generic.Error */ /* Generic.Heading */ /* Generic.Inserted */ /* Generic.Output */ /* Generic.Prompt */ /* Generic.Strong */ /* Generic.Subheading */ /* Generic.Traceback */ /* Keyword.Constant */ /* Keyword.Declaration */ /* Keyword.Namespace */ /* Keyword.Pseudo */ /* Keyword.Reserved */ /* Keyword.Type */ /* Literal.Number */ /* Literal.String */ /* Name.Attribute */ /* Name.Builtin */ /* Name.Class */ /* Name.Constant */ /* Name.Decorator */ /* Name.Entity */ /* Name.Exception */ /* Name.Function */ /* Name.Label */ /* Name.Namespace */ /* Name.Tag */ /* Name.Variable */ /* Operator.Word */ /* Text.Whitespace */ /* Literal.Number.Float */ /* Literal.Number.Hex */ /* Literal.Number.Integer */ /* Literal.Number.Oct */ /* Literal.String.Backtick */ /* Literal.String.Char */ /* Literal.String.Doc */ /* Literal.String.Double */ /* Literal.String.Escape */ /* Literal.String.Heredoc */ /* Literal.String.Interpol */ /* Literal.String.Other */ /* Literal.String.Regex */ /* Literal.String.Single */ /* Literal.String.Symbol */ /* Name.Builtin.Pseudo */ /* Name.Variable.Class */ /* Name.Variable.Global */ /* Name.Variable.Instance */ /* Literal.Number.Integer.Long */ }

.generated-content .highlight pre { padding: 2%; line-height: 1.2; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; font-family: "Source Code Pro", monospace; }

.highlighter-rouge .generated-content .highlight { background: #FCFCFC; }

.generated-content .highlight .hll { background-color: #ffffcc; }

.generated-content .highlight .c { color: #999988; font-style: italic; }

.generated-content .highlight .err { color: #a61717; background-color: #e3d2d2; }

.generated-content .highlight .k { color: #000000; font-weight: bold; }

.generated-content .highlight .o { color: #000000; font-weight: bold; }

.generated-content .highlight .cm { color: #999988; font-style: italic; }

.generated-content .highlight .cp { color: #999999; font-weight: bold; font-style: italic; }

.generated-content .highlight .c1 { color: #999988; font-style: italic; }

.generated-content .highlight .cs { color: #999999; font-weight: bold; font-style: italic; }

.generated-content .highlight .gd { color: #000000; background-color: #ffdddd; }

.generated-content .highlight .ge { color: #000000; font-style: italic; }

.generated-content .highlight .gr { color: #aa0000; }

.generated-content .highlight .gh { color: #999999; }

.generated-content .highlight .gi { color: #000000; background-color: #ddffdd; }

.generated-content .highlight .go { color: #888888; }

.generated-content .highlight .gp { color: #555555; }

.generated-content .highlight .gs { font-weight: bold; }

.generated-content .highlight .gu { color: #aaaaaa; }

.generated-content .highlight .gt { color: #aa0000; }

.generated-content .highlight .kc { color: #000000; font-weight: bold; }

.generated-content .highlight .kd { color: #000000; font-weight: bold; }

.generated-content .highlight .kn { color: #000000; font-weight: bold; }

.generated-content .highlight .kp { color: #000000; font-weight: bold; }

.generated-content .highlight .kr { color: #000000; font-weight: bold; }

.generated-content .highlight .kt { color: #445588; font-weight: bold; }

.generated-content .highlight .m { color: #009999; }

.generated-content .highlight .s { color: #d01040; }

.generated-content .highlight .na { color: #008080; }

.generated-content .highlight .nb { color: #0086B3; }

.generated-content .highlight .nc { color: #445588; font-weight: bold; }

.generated-content .highlight .no { color: #008080; }

.generated-content .highlight .nd { color: #3c5d5d; font-weight: bold; }

.generated-content .highlight .ni { color: #800080; }

.generated-content .highlight .ne { color: #990000; font-weight: bold; }

.generated-content .highlight .nf { color: #990000; font-weight: bold; }

.generated-content .highlight .nl { color: #990000; font-weight: bold; }

.generated-content .highlight .nn { color: #555555; }

.generated-content .highlight .nt { color: #000080; }

.generated-content .highlight .nv { color: #008080; }

.generated-content .highlight .ow { color: #000000; font-weight: bold; }

.generated-content .highlight .w { color: #bbbbbb; }

.generated-content .highlight .mf { color: #009999; }

.generated-content .highlight .mh { color: #009999; }

.generated-content .highlight .mi { color: #009999; }

.generated-content .highlight .mo { color: #009999; }

.generated-content .highlight .sb { color: #d01040; }

.generated-content .highlight .sc { color: #d01040; }

.generated-content .highlight .sd { color: #d01040; }

.generated-content .highlight .s2 { color: #d01040; }

.generated-content .highlight .se { color: #d01040; }

.generated-content .highlight .sh { color: #d01040; }

.generated-content .highlight .si { color: #d01040; }

.generated-content .highlight .sx { color: #d01040; }

.generated-content .highlight .sr { color: #009926; }

.generated-content .highlight .s1 { color: #d01040; }

.generated-content .highlight .ss { color: #990073; }

.generated-content .highlight .bp { color: #999999; }

.generated-content .highlight .vc { color: #008080; }

.generated-content .highlight .vg { color: #008080; }

.generated-content .highlight .vi { color: #008080; }

.generated-content .highlight .il { color: #009999; }

.py1-link { color: inherit; font-weight: bold; text-decoration: none; background-position: left bottom; background-image: linear-gradient(white 0%, #d0bc0a 0%); background-size: 100% 15%; background-repeat: no-repeat; }

@media (min-width: 850px) { .py1-link { transition: all 500ms ease; } .py1-link:hover { background-size: 100% 85%; color: white; } }

.py1-wrapper { display: flex; flex-direction: column; justify-content: center; margin: 0; margin-top: 40px; margin-bottom: 40px; }

@media (min-width: 850px) { .py1-wrapper { flex-direction: row; } }

.py1-list { margin: 0; padding: 0; padding-left: 0.5em; }

.py1-list > * { margin: 0; padding: 0; padding-left: 0.5em; }

.py1-sidebar { display: flex; flex-direction: column; }

@media (min-width: 850px) { .py1-sidebar { max-width: 25%; } }

.py1-learned-skills-wrapper > * { margin: 0; }

.py1-learned-skills-list { list-style-type: "\2013"; }

.py1-divider { margin-left: 60px; margin-right: 40px; width: 1px; background-color: #1758d7; color: #1758d7; }

@media (min-width: 850px) { .py1-curriculum { width: 70%; margin-left: 30px; } }

.py1-lessons-wrapper { display: flex; flex-direction: column; justify-content: space-between; margin: 1% 0; }

@media (min-width: 850px) { .py1-lessons-wrapper { flex-flow: row wrap; } }

.py1-lessons-wrapper > * { margin: 1% 0%; }

@media (min-width: 850px) { .py1-lessons-wrapper > * { width: 45%; } }

.py1-lesson { border: solid 1px #1758d7; border-radius: 10px; margin: 1% 0; padding: 2% 2%; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; font-size: 1rem; }

.py1-lesson-link { color: inherit; font-weight: bold; text-decoration: none; background-position: left bottom; background-image: linear-gradient(white 0%, #1758d7 white 0%); background-size: 100% 15%; background-repeat: no-repeat; }

@media (min-width: 850px) { .py1-lesson-link { transition: all 500ms ease; } .py1-lesson-link:hover { background-size: 100% 85%; color: inherit; } }

.py1-lesson-title-bar { margin: 0; margin-bottom: 5%; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }

.py1-lesson-title-bar * { color: black; text-decoration: none; font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; font-weight: bold; font-size: 1em; margin: 0; }

.py1-step-number { font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; font-weight: bold; font-size: 1rem; margin-right: 0.3em; }

.py1-lesson-body { margin: 0; margin-bottom: 5%; }

.py1-lesson-goal-list { list-style-type: "\2022"; }

.py1-lesson-action-bar { margin: 0; margin-top: auto; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-end; }

.py1-lesson-action-bar * { margin: 0; }

.py1-action-group { display: flex; flex-flow: column nowrap; align-items: flex-start; }

@media (min-width: calc(850px + 150px)) { .py1-action-group { flex-flow: row nowrap; align-items: flex-end; } }

@media (max-width: calc(850px - 1px)) { .py1-action-group { flex-flow: row nowrap; align-items: flex-end; } }

.py1-lesson-action { border: solid 1px #1758d7; border-radius: 10px; margin: 0; margin-top: 0.42em; padding: 0.07em 0.63em; background: #1758d7; background-repeat: no-repeat; background-size: 100%; color: white; box-sizing: border-box; display: inline-block; width: intrinsic; width: -webkit-max-content; width: -moz-max-content; width: max-content; font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; font-weight: normal; font-size: 0.7em; line-height: 1.5; text-decoration: none; text-align: center; transition: all 500ms ease; }

@media (min-width: calc(850px + 150px)) { .py1-lesson-action { margin-top: 0; margin-right: 0.42em; } }

@media (max-width: calc(850px - 1px)) { .py1-lesson-action { margin-top: 0; margin-right: 0.42em; } }

.py1-lesson-action:hover { border: 1px solid #1758d7; background: white; color: #1758d7; }

.py1-lesson-duration { display: inline-block; font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; font-size: 0.7em; }

.py1-lesson-duration::before { content: "\1f552"; margin-right: 0.3em; }

.py1-subtitle { font-weight: bold; font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; width: 100%; font-size: 2em; margin-top: .67em; margin-bottom: .67em; }

.py1-fancy-title { text-decoration: underline 7px #1758d7; text-underline-offset: 22%; }

.py1-lesson-content { width: 40%; display: flex; flex-direction: column; align-items: center; margin-top: 40px; margin-left: 50px; }

@media (max-width: 850px) { .py1-lesson-content { width: 100%; margin-left: 0px; } }

.py1-lesson-content iframe { border: solid 2px #ADDF7F; width: 100%; margin-bottom: 50px; }

@media (max-width: 850px) { .py1-lesson-content iframe { max-width: 480px; height: 300px; } }

.py1-lesson-page-action-bar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-right: 5%; margin-bottom: 180px; margin-top: 50px; padding: 0; list-style: none; }

.py1-lesson-page-action-bar a { padding: 5px 30px 5px 30px; border-radius: 10px; font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; text-decoration: none; font-weight: bold; transition: ease-in-out 0.2s; text-align: center; cursor: pointer; background-color: #1758d7; color: white; border: none; }

.py1-lesson-page-action-bar a:hover { background-color: #1246ac; }

.py1-lesson-page-action-bar a:focus { outline: 0px; }

.py1-lesson-practice { margin-bottom: 32px; padding: 24px; border: #ADDF7F solid 2px; border-radius: 10px; width: 100%; box-sizing: border-box; }

.py1-lesson-practice p { margin-bottom: 10px; margin-top: 20px; }

.py1-lesson-practice button { padding: 5px 30px 5px 30px; border-radius: 10px; font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; text-decoration: none; font-weight: bold; transition: ease-in-out 0.2s; text-align: center; cursor: pointer; background-color: #ADDF7F; color: white; border: none; }

.py1-lesson-practice button:hover { background-color: #9cc972; }

.py1-lesson-practice button:focus { outline: 0px; }

.py1-lesson-practice .py1-lesson-solution { display: none; }

.py1-lesson-practice .py1-lesson-solution p { margin-bottom: 0px; }

.py1-outline-button { display: flex; justify-content: center; border: solid 2px #1758d7; background-color: white; margin-bottom: 10px; border-radius: 10px; transition: ease-in-out 0.2s; }

.py1-outline-button a { padding: 5px 30px 5px 30px; border-radius: 10px; font-family: "Poppins", "Helvetica Neue", "Helvetica", sans-serif; text-decoration: none; font-weight: bold; transition: ease-in-out 0.2s; text-align: center; cursor: pointer; color: #1758d7; width: 100%; padding: 10px; }

.py1-outline-button:hover { background-color: #e8e8e8; }

.py1-lesson-page-agenda { margin-top: 50px; margin-bottom: 0px; }

.button.button-ai { color: #5ABBEF; border: 2px solid #5ABBEF; }

.button.button-ai:hover { color: white; background: #5ABBEF; cursor: pointer; }

.button.button-ai:active { color: #5ABBEF; background-color: white; border: 2px solid #5ABBEF; }

.ai-link { color: inherit; font-weight: bold; text-decoration: none; background-position: left bottom; background-image: linear-gradient(white 0%, #5ABBEF 0%); background-size: 100% 15%; background-repeat: no-repeat; }

@media (min-width: 850px) { .ai-link { transition: all 500ms ease; } .ai-link:hover { background-size: 100% 85%; color: inherit; } }

.border-ai { border-color: #5ABBEF !important; }

.divider-ai { border-top: 1px solid #5ABBEF; }

.page-container { display: grid; }

.page-container #desktop-sidebar { margin-left: calc(50vw - (0.5 * 1000px + 220px + 16px)); }

@media (max-width: 1472px) { .page-container { display: flex; } .page-container #desktop-sidebar { margin-left: 10px; } }

@media (max-width: 1472px) { .main-content { margin-left: 0px; } }

.top-left-grid-position { grid-column: 1/2; grid-row: 1/2; }

.ai-lesson-card { padding: 0.5em; margin-top: 1em; border: 2px solid #5ABBEF; border-radius: 10px; width: 90%; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; }

.ai-content-card { margin-top: 3em; padding: 1em; border-radius: 10px; border: 1px solid #5ABBEF; }

@media (max-width: 1150px) and (min-width: 850px) { .ai-content-card { grid-column: 2 / span 2; grid-row: 1 /2; } }

.ai-slide-iframe { display: block; width: 100%; height: calc(100% * 1469/2559); }

@media (max-width: 1150px) and (min-width: 850px) { .ai-slide-iframe { grid-column: 2 / span 2; grid-row: 2 / 3; height: 100%; } }

@media (max-width: 850px) { .ai-slide-iframe { height: 100%; } }

.iframe-container { padding: 3em; width: calc(100% - 6em); position: relative; }

.current-dot { height: 10px; width: 10px; background-color: #5ABBEF; border-radius: 50%; display: inline-block; box-shadow: 1px 1px 3px grey; }

#desktop-sidebar { top: 80px; width: 200px; margin: 48px 10px; padding: 10px 10px; padding-bottom: 0px; height: calc(100vh - 176px); max-height: 759px; border: solid; border-radius: 10px; overflow-y: auto; overflow-x: hidden; position: -webkit-sticky; position: sticky; flex-shrink: 0; border-color: #5ABBEF; z-index: 1; display: inline-block; }

@media (max-width: 1150px) and (min-width: 850px) { #desktop-sidebar { grid-row: 1 / span 2; } }

@media (max-width: 850px) { #desktop-sidebar { display: none; } }

#desktop-sidebar .sidebar-item { padding-bottom: 15px; }

#mobile-sidebar { position: fixed; top: 70px; left: 16px; width: 50px; display: none; z-index: 1; }

@media (max-width: 850px) { #mobile-sidebar { display: inline-block; } }

#hamburger-content { flex-direction: column; position: fixed; top: 71px; left: 0px; z-index: 10; height: calc(100vh - 71px); width: 100vw; background: white; overflow-y: auto; padding-top: 25px; }

.hamburger-item { width: 350px; padding: 15px 10px; margin: 0px auto; flex-direction: column; font-size: 1.3em; }

#sidebar-btn-container { display: flex; flex-direction: row; justify-content: flex-start; width: 90vw; }

#sidebar-btn-container button { z-index: 15; background: white; opacity: 90%; border-radius: 10px; padding: 3px 3px; margin-top: 10px; border: 2px solid #777777; outline: 0; width: fit-content; font-family: inherit; font-size: inherit; }

#sidebar-btn-container button:hover { cursor: pointer; }

.d-flex { display: flex; }

.d-none { display: none; }

.button.button-rnative { color: #61DAFB; border: 2px solid #61DAFB; }

.button.button-rnative:hover { color: white; background: #61DAFB; cursor: pointer; }

.button.button-rnative:active { color: #61DAFB; background-color: white; border: 2px solid #61DAFB; }

.rnative-link { color: inherit; font-weight: bold; text-decoration: none; background-position: left bottom; background-image: linear-gradient(white 0%, #61DAFB 0%); background-size: 100% 15%; background-repeat: no-repeat; }

@media (min-width: 850px) { .rnative-link { transition: all 500ms ease; } .rnative-link:hover { background-size: 100% 85%; color: inherit; } }

.divider-rnative { border-top: 1px solid #61DAFB; }

.rnative-lesson-card { padding: 0.5em; margin-top: 1em; border: 2px solid #61DAFB; border-radius: 10px; width: 90%; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; }

.rnative-content-card { margin-top: 3em; padding: 1em; border-radius: 10px; border: 1px solid #61DAFB; }

#rnative-markdown { padding: 3em; }

#rnative-markdown a { color: inherit; font-weight: bold; text-decoration: none; background-position: left bottom; background-image: linear-gradient(white 0%, #61DAFB 0%); background-size: 100% 15%; background-repeat: no-repeat; }

@media (min-width: 850px) { #rnative-markdown a { transition: all 500ms ease; } #rnative-markdown a:hover { background-size: 100% 85%; color: inherit; } }

#rnative-markdown pre { overflow: auto; border-color: #61DAFB; }

label { font-size: 20px; font-weight: 200; }

.image-title { display: flex; align-items: end; gap: 1.5rem; }

.image-title img { height: 10rem; }

.image-title div { display: flex; flex-direction: column; height: 100%; }

.image-title div h1 { margin: 0; }

@media (max-width: 600px) { .image-title { flex-direction: column; align-items: start; } }

.lesson-contact { display: grid; grid-gap: 1rem; width: 100%; }

.lesson-contact h3 { font-size: 24px; font-weight: 600px; margin-bottom: 0; text-decoration: #5EDA12 underline; text-decoration-thickness: 0.3rem; text-underline-offset: 7px; }

.lesson-contact p { margin-top: 10px; }

@media (min-width: 768px) { .lesson-contact { /* For tablets and above */ grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; } }

@media (max-width: 767px) { .lesson-contact { /* For tablets and below */ grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); } }

.rounded-green-border { border: 1px solid #5EDA12; border-radius: 2rem; padding: 1rem; }

.spacedlist li { margin: 10px 0; }

.two-by-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-gap: 20px; }

@media (min-width: 768px) { .two-by-two { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } }

.two-by-two div h3 { color: #5EDA12; }

.lesson-w-chip { width: 100%; padding: 1.5rem; height: 100%; display: flex; flex-direction: column; gap: 2rem; -webkit-box-shadow: 0px 0px 10px 5px rgba(158, 158, 158, 0.3); -moz-box-shadow: 0px 0px 10px 5px rgba(158, 158, 158, 0.3); box-shadow: 0px 0px 10px 5px rgba(158, 158, 158, 0.3); border-radius: 0.5rem; }

.lesson-w-chip h3 { padding: 0; margin: 0; }

.lesson-w-chip p { padding: 0; margin: 0; }

.green-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.green-chips div { background-color: #016d3a; color: white; border-radius: 25px; padding: 5px 15px 5px 15px; width: fit-content; font-size: 14px; }

.lesson-triple-col { display: grid; grid-template-columns: repeat(auto-fill, minmax(0, 1fr)); grid-gap: 40px; /* Adjust the gap as needed */ max-width: fit-content; }

@media (min-width: 1000px) { .lesson-triple-col { /* For tablets and above */ grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 1000px) { .lesson-triple-col { /* For tablets and below */ grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) { .lesson-triple-col { /* For mobile and below */ grid-template-columns: repeat(1, 1fr); } }

.center { width: 100%; display: flex; justify-content: center; }

.page { margin-top: 5rem; margin: 3rem; display: flex; justify-content: center; }

@media (max-width: 767px) { .page { margin: 1rem; margin-top: 3rem; gap: 1rem; } }

.content { max-width: 900px; display: flex; flex-direction: column; gap: 4rem; }

.reset { padding: 0; margin: 0; }

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