@media screen and (max-width: 1023px) {
.noMobile {
  display: none;
}
h1, h2, h3, h4, h5, p {
  text-align: center;
}




/****************************************************************************************
 * NAVBAR                                                                               *
 ****************************************************************************************/
nav {
  display: none;
}
#hamburger {
  font-size: 42px;
  background: var(--greenSeeThrough);
  padding: 6px 12px;
  color: white;
  border: none;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
              0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 10;
}
.show {
  display: flex;
  flex-direction: column;
  position: fixed;
  background-color: var(--green);
  color: white;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 20;
}
#closeMobileMenu {
  display: block;
  font-size: 42px;
  background: var(--green);
  padding: 6px 12px;
  color: white;
  border: none;
  cursor: pointer;
  position: fixed;
}
nav>ul {
  display: flex;
  list-style: none;
  padding-left: 0;
}
nav>#navLinks {
  flex-direction: column;
  align-items: center;
  margin: auto 0;
}
nav>#navLinks li {
  margin-top: 26px;
}
nav>#navSocials {
  margin: auto;
}
nav>#navSocials a {
  display: block;
  margin: 0 20px;
}
nav>ul>li>a {
  color: white;
  text-align: center;
  font-size: 32px;
  text-transform: uppercase;
}
nav>ul>li> .active {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  padding: 3px 6px;
}




/****************************************************************************************
  * FOOTER                                                                               *
  ****************************************************************************************/
footer {
  background-color: var(--darkGreen);
  margin-top: 200px;
  padding: 200px 10px 10px 10px;
  color: white;
  font-size: 20px;
}
footer a {
  font-size: 20px;
  color: white;
  text-decoration: underline;
}
footer a:hover {
  text-decoration: none;
  color: var(--lightGreen);
}
footer h2 {
  font-family: 'Caveat', sans-serif;
  font-size: 72px;
  line-height: 1;
  margin-bottom: 6px;
  font-weight: 400;
}
/* Footer: Newsletter form */
footer #newsletterForm {
  width: 90%;
  margin: 0 auto 200px auto;
  padding: 40px 10px;
  border-radius: 10px;
  background-color: #00FF0033;
}
footer #newsletterForm form {
  margin-top: 40px;
}
footer #newsletterForm form input[type="email"],
footer #newsletterForm form button {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  background-color: var(--green);
  color: white;
  border: none;
  border-radius: 5px;
}
footer #newsletterForm form input[type="email"]::placeholder {
  color:white;
}
footer #newsletterForm form button {
  cursor: pointer;
}
footer #newsletterForm form button:hover {
  background-color: var(--lightGreen);
}
footer #newsletterForm form>div {
  margin: 10px 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}
footer #newsletterForm form>div>input[type="checkbox"] {
  width: 38px;
  height: 38px;
  accent-color: var(--lightGreen);
}
footer #newsletterForm form>div>label,
footer #newsletterForm form>div>label>a {
  font-size: 16px;
  text-align: start;
}
footer #codexSections > section {
  margin: 0 0 200px 0;
}
footer #codexSections h2 {
  margin-bottom: 20px;
}
footer #codexSections article {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 40px;
}
footer #codexSections article img {
  width: 30%;
  height: auto;
}
footer #codexSections article div {
  width: 70%;
}
footer #codexSections article p,
footer #codexSections article h3 {
  text-align: start;
}
footer #legalSections section {
  text-align: center;
  margin: 0 0 40px 0;
}
/* Footer: Back to top CTA */
#toTopCta {
  position: fixed;
  bottom: 6px;
  right: 6px;
  color: white;
  background-color: var(--greenSeeThrough);
  font-size: 32px;
  border-radius: 50%;
  padding: 5px 12px;
  z-index: 10;
  cursor: pointer;
}
#toTopCta:hover {
  color: var(--green);
  background-color: var(--lightGreen);
}




/****************************************************************************************
  * INDEX PAGE                                                                           *
  ****************************************************************************************/
/* Index: Intro */
#index #intro {
  margin: 0 10px 200px 10px;
}
#index #intro h1 {
  font-size: 120px;
  font-weight: 500;
  margin: 40px 0 460px 0;
  color: var(--darkGreen);
}
#index #intro img {
  position: absolute;
  top: 160px;
  width: 95%;
}
#index #intro p {
  font-size: 24px;
  margin: 20px 0 0 0;
}
#index #intro a {
  font-size: 24px;
}
#index #intro ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;
}
/* Index: Blog sections */
#index section {
  margin: 200px 0;
}
#index section header,
#index section article h3,
#index section article p {
  margin: 0 10px;
}
#index section header {
  margin-bottom: 40px;
}
#index section header h2 {
  font-size: 72px;
  font-weight: 400;
  margin-bottom: 12px;
}
#index section header p {
  font-size: 24px;
}
#index section div article {
  margin-bottom: 60px;
}
#index section div article h3 {
  font-size: 26px;
}
#index section div article p {
  font-size: 18px;
}
#index section div article p>a {
  font-size: 20px;
  text-decoration: underline;
}
#index section div article p>a:hover {
  color: var(--green);
  text-decoration: none;
}
#index section div article>a:hover {
  text-decoration: none;
}




/****************************************************************************************
 * CODEX PAGES                                                                          *
 ****************************************************************************************/
#codex {
  margin: 56px 0 200px 0;
}
#codex header img {
  display: none;
}
#codex header h1 {
  font-size: 70px;
  font-weight: 500;
  margin: 20px 10px;
  color: var(--darkGreen);
}
#codex header p {
  font-size: 24px;
  margin: 20px 10px 0 10px;
}
#codex>ol {
  margin: 0 40px 200px 40px;
}
#codex ol {
  list-style: decimal;
  padding-left: 1.5em;
}
#codex li h2,
#codex li h3,
#codex li h4,
#codex li h5 {
  display: inline;
}
li:has(h2),
li>h2 {
  font-size: 40px;
  font-weight: 500;
  margin-top: 60px;
}
li:has(h3),
li>h3,
li:has(a),
li>a {
  font-size: 20px;
  font-weight: 400;
  margin-top: 6px;
}




/****************************************************************************************
  * CODEX ARTICLE PAGES                                                                  *
  ****************************************************************************************/
#codex-article article {
  margin: 56px 0 200px 0;
}
#codex-article article header h1 {
  font-size: 70px;
  text-align: center;
  margin-bottom: 56px;
  font-weight: 400;
}
#codex-article article section {
  margin: 0 10px;
}
#codex-article article section h2 {
  font-size: 48px;
  font-weight: 500;
  margin-top: 56px;
  text-align: left;
}
#codex-article article section p {
  font-size: 20px;
  margin-top: 6px;
  text-align: left;
}
#codex-article article section ul {
  margin-left: 20px;
  font-size: 20px;
  text-align: left;
}




/****************************************************************************************
  * 404 PAGE                                                                             *
  ****************************************************************************************/
  #p404 {
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
}
#p404 h1 {
  font-size: 102px;
  font-weight: 500;
  margin-bottom: 40px;
  color: var(--darkGreen);
}
#p404 p {
  font-size: 26px;
}




/****************************************************************************************
  * POLICY PAGES                                                                         *
  ****************************************************************************************/
#policy {
  margin: 56px 10px 200px 10px;
}
#policy p,
#policy h1,
#policy h2,
#policy h3,
#policy ul {
text-align: left;
}
#policy h1 {
  font-size: 48px;
}
#policy h2 {
  font-size: 26px;
  margin-top: 40px;
}
#policy a {
  text-decoration: underline;
}
#policy a:hover {
  color: var(--green);
  text-decoration: none;
}
#policy ul {
  margin-left: 20px;
}
}