/*!
Theme Name: Kuto-tohanan
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kuto-tohanan
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Kuto-tohanan is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/



/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}
/* 2. Remove default margin */
* {
  margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  /* 4. Add accessible line-height */
  line-height: 1.25;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  /* overflow-wrap: break-word; */
}
/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-weight: 400;
}
/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

ul {
  padding-inline-start: 0px;
}

li {
  font-size: 28px;
  font-weight: 300;
}



a {
  text-emphasis: none;
  text-decoration: none;
  display: inline-block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* STUFF FROM THE STATIC PAGE */

@font-face {
  font-family: "Agrandir";
  src: url(./fonts/Agrandir/Agrandir-Regular.otf);
}

@font-face {
  font-family: "LAUGHTER";
  font-style: normal;
  font-weight: 400;
  src: url(./fonts/LAUGHTER.woff) format('woff');
}

/* UNIVERSAL PROPERTIES */

* {
  /* for testing purposes only! 
  the ff. line should always be 
  commented out before pushing to prod */

  /* border: 1px solid red; */
}

.hide-scrollbar-but-keep-scrolling::-webkit-scrollbar {
  display: none;
}

html {
  scroll-behavior: smooth;
}

body {
  --beige: #F1E6D0;
  --green: #3D8439;
  --tang: #FFAF37;
  --red: #eb5c34;
  --blue: #3e7ed1;
  --paleOrange: #FFB168;
  --foreground: #D58000;
  --foregroundDark: #141D11; 

  background-color: var(--beige);
  color: var(--foregroundDark);
  
  margin: 0 auto;

  font-size: 16px;
  font-family: "Agrandir";

  /* overflow-y: visible; */
}

body.lock-scroll {
  overflow-y: hidden;
}

h1 {
  font-family: "LAUGHTER";
  font-size: 128px;
  line-height: 125%;
  font-weight: 400;
}

h2 {
  font-family: "LAUGHTER";
  font-size: 84px;
  line-height: 75%;
  font-weight: 400;
}

p {
  margin: 16px 0 0 0;
  font-size: 28px;
}

/* PLAY ICON */
i.fa-regular.fa-circle-play {
    transform: translateY(2px);
}

/* DOWNLOAD ICON */

i.fa-solid.fa-download {
    font-size: 64px;
}

/* BUTTONS ON HEADER & FOOTER */
.nav-cta-btn {
  border-radius: 50px;
  padding: 8px 16px;

  font-size: clamp(1.175rem, 1.5912rem + 1.1352vw, 1.6rem);
  font-family: 'Laughter', sans-serif;
  text-transform: uppercase;
  text-align: center;

  overflow: hidden;

  color: var(--foregroundDark);
  border: 1px solid var(--foregroundDark);
  background-color: var(--tang);
}

/* BUTTONS AROUND THE SITE THAT LINK */
a.btn {
  border-radius: 50px;
  padding: 1vh 3vw;
  margin-top: 16px;
  /* min-width: 100vw; */

  font-family: 'LAUGHTER', sans-serif;
  font-size: 28px;
  text-transform: uppercase;
  text-align: center;

  overflow: hidden;

  background-color: var(--paleOrange);
  border: 1px solid var(--foregroundDark);
  color: black;
}

/* REGULAR HYPERLINKS */
a:not(.btn, .nav-cta-btn, .go-home) {
  font-size: inherit;
  color: inherit;
  text-decoration: dashed;
  transition: transform, text-decoration, color, .3s ease-in-out;
}


.go-home {
  border-radius: 0;
  background-color: transparent;
  padding: 0;
}

section:not(.hero) {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin: 0px auto;
}

/* 404 PAGE */
section.error-404.not-found {
  padding: 26vh 8vh 16vh 8vh;
  flex-direction: column;
  color: var(--beige);
  background-color: var(--red);
  border-radius: 0 0 50px 50px;
}

section.error-404.not-found h1.page-title {
  line-height: 100%;
  font-size: 64px;
}



/* NAV BAR */

nav {
  
  overflow: visible;
  /* height: 33vh; */
}

.navbar {
  font-family: "Laughter";
  background-color: var(--green);
  color: var(--beige);
  font-size: 24px;
  width: 95vw;
  border: 1px solid var(--foregroundDark);
  border-radius:  0 0 25px 25px;
  filter: drop-shadow(0px 3px 0px var(--foregroundDark));

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%);

  position: fixed;
  top: 0;
  z-index: 999;
}

.navbar a.go-home {
    display: none;
}

img.custom-logo  {
  width: auto; /* Adjust this value as needed */
  height: 50px; /* This ensures the aspect ratio is maintained */

}

.navbar ul {
  list-style: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 200;

  display: flex;
  align-items: center;
  gap: 16px;
}

// NAV MENU CURRENT PAGE INDICATOR?
li.current-page-menu-item a {
  border-bottom: 3px dotted var(--tang);
  color: var(--tang);	
}

.hamburger-toggle {
  display: none;
}

.mobile-hamburger {
  display: none;
}

/* HERO SECTION */

.index .hero {
  align-items: flex-end;  
  margin:  auto;
  min-height: 95vh;
  margin-top: 0;

  background-size: cover;

  display: flex;
  justify-content: center;
  /* gap: 64px; */

    background-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0), 
          rgba(0, 0, 0, 0.8) 
        ), url(/wp-content/uploads/2025/12/BACK-COVER.jpg);
  background-size: cover;
  background-position: bottom; 
  background-repeat: repeat-y;
}

.hero-content {
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 32px;
  padding: 64px 32px;
  margin: 0 32px;

}

.hero-content.left,
.hero-content.right {
  flex: 1;
  flex-basis: 25%;
  flex: 1 0 30%; 
  /* max-width: 30% */
  /* width: 100% */
}

.hero h1 {
  color: var(--red);
  font-size: 72px;
  line-height: 90%;
  text-align: right;
}

.hero p {
  color: var(--beige);
  font-size: 24px;
  font-weight: 500;
}

.hero a {
  background-color: #FCB53B;
  width: 100%;
  justify-content: center;
  gap: 4px;
}

/* STORYBOOK */

section.storybook {
  background-color: var(--blue);
  padding-bottom: 32px;
  /* margin: 32px; */
  mask: linear-gradient(0, #0000 30px, #000 0), radial-gradient(30px, #000 calc(100% - 1px), #0000) bottom / 55.5px 60px;
}

.storybook-container {
  display: flex;
  
}

.storybook-container {
  align-items: center;
}

.storybook-container .right{
  padding: 64px;
  display: flex;
  flex-direction: column;
}

.storybook-container .right h2 {
  color: var(--beige);
}

.storybook-container img,
.information-container img{
    max-width: 45vw;
    filter: drop-shadow(0px 0px 15px var(--beige));
    border-radius: 15px;
    margin: 32px 16px;
}

.storybook a {
  /* margin-top: 64px; */
  align-self: flex-start;
}

.storybook a.pdf-link {
  border: 2px solid var(--foregroundDark);
  border-radius: 100px;
  padding: 16px 256px;
  background-color: var(--tang);
  width: 320px;
  display: flex;
  gap: 32px;
  /* flex-direction: column; */
  align-items: center;
  justify-content: center;
  transition: .25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.storybook a.pdf-link:hover {
  transform: translate(0, -4px) scale(1.15);
  box-shadow: 0px 0px 16px 8px var(--beige) inset;
  color: var(--foregroundDark);
  text-decoration: none;
}

/* INFORMATION */

section.information {
  flex-direction: row;
  background-color: var(--red);
  
  margin-top: -32px;
  padding: 64px 0px;
  
  mask: radial-gradient(30px at 50% 30px, #0000 calc(100% - 1px), #000) 50% -30px / 55.5px 100%;
}

.information-container {
  /* max-width: 1200px; */
  margin: auto;
  display: flex;
  align-items: center;
  text-align: right;
}

.information .left {
  /* margin-top: auto; */
  padding: 64px;
  display: flex;
  gap: 16px;
  flex-direction: column;
}

.information a {
  margin-top: 64px;
  align-self: flex-end;
  max-width: 66vw;
}

/* ABOUT */

section.about {
  max-width: 1200px;
  flex-direction: column;
  margin-top: 128px;
}

.about h2 {
  text-align: center;
}

.about a {
  max-width: 640px;
  margin: auto;
}

section.about p {
  text-align: center;
}

/* CONTACT */

main.index section.contact {
  background-color: var(--blue);
  max-width: 1200px;
  flex-direction: column;
  padding: 64px 16px 256px 16px;
  margin-top: 64px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  border-radius: 16px;
  color: var(--beige);
}

section.contact h2,
section.contact h3,
section.contact p {
    text-align: center;
}

.contact a {
  max-width: 640px;
  margin: auto;
}

/* FOOTER */
footer {
  background-color: var(--green);
  color: var(--beige);

  font-family: "LAUGHTER";
  font-size: 28px;

  display: flex;
  align-items: center;
  align-items: flex-end;

  padding: 96px 64px;
  margin: 96px 0 0 0;
  
      mask: linear-gradient(180deg, #0000 30px, #000 0), radial-gradient(30px, #000 calc(100% - 1px), #0000) top / 55.5px 60px;

  top: 50%;
  left: 50%;
  transform: translate(0%, 50%);
}

img.footer-logo  {
  width: auto; /* Adjust this value as needed */
  height: 100px; /* This ensures the aspect ratio is maintained */

}

.footer-links {
  font-size: 20px;
  text-transform: uppercase;
  display: flex;
  gap: 64px;
  align-items: flex-end;
  margin-left: auto;
}

.footer-links li {
  list-style: none;
}

.footer-nav li::before {
  content: "→";
  margin-right: 16px;
}

.footer-cta {
  align-self: flex-end;
}

/*  */
/* END OF INDEX STYLES */
/*  */

/* ------------- */
/* GAME STYLES */
/* ------------- */

.game section {
  margin-bottom: 10%;
}

.game .hero {
  padding-bottom: 32px;
  display: flex;
  height: 95vh;
  flex-direction: column;
  justify-content: flex-end;
  
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)), url(/wp-content/uploads/2025/12/P.-20.jpg);
  background-size: cover;
  background-position: bottom;
  background-repeat: repeat-y;
  mask: linear-gradient(0, #0000 30px, #000 0), radial-gradient(30px, #000 calc(100% - 1px), #0000) bottom / 55.5px 60px;
}


.game .hero-content h1 {
  flex-shrink: 1;
  color: var(--red);
}

.game .hero-content {
  padding-bottom: 24px;
  justify-content: center;
}

.game .hero-content .left {
  /* width: 24vw; */
}

.game .hero-content .right {
  max-width: 90vw;
}

.game .hero-content .right p{
  margin-top: 8px;
}

.game h1 {
  color: var(--beige);
}

.game h2 {
  color: var(--green);
  text-align: center;
}

.game .cta {
  width: 50%;
  min-width: 33%;
  margin: 0 auto;
}

/* GAME INSTRUCTIONS */
.game-instructions { 
  max-width: 630px;
      justify-content: center;
    margin: 129px auto;
    flex-direction: column;
}

.game-instructions ol{
  display: flex;
    flex-direction: column;
    gap: 64px;
    justify-content: center;
}

.game-instructions ol li {
  border-bottom: 1px solid #84994f;
}

.game-instructions ol > li::marker {
  font-family: "LAUGHTER";
  color: var(--green);
  font-size: clamp(2.5rem, 2.3455rem + 0.8182vw, 2.9rem);
  border-radius: 50%;
  background-color: var(--tang);
}

.game-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
}

section#game-download-links {
  scroll-margin-top: 100px;
  margin-top: 32px;
  padding-top: 128px;
  padding-bottom: 128px;
  display: block;
  background-color: var(--blue);
  border-radius: 25px;
  max-width: 100vw;
      mask: linear-gradient(0, #0000 60px, #000 0) 0 30px, radial-gradient(30px, #000 calc(100% - 1px), #0000) 50% / 55.5px 60px repeat space;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
}

section#game-download-links h2 {
  color: var(--beige);
}

.game-download-links-container {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  font-size: 32px;
  text-align: center;
}

.game-download-links-container div {
  /* height: 30vw; */
  border-radius: 100px;
  padding: 16px 256px;
  background-color: var(--tang);
  width: 320px;
  display: flex;
  gap: 32px;
  /* flex-direction: column; */
  align-items: center;
  justify-content: center;
}

.game a.apk-link {
  border: 2px solid var(--foregroundDark);
  border-radius: 100px;
  padding: 16px 256px;
  background-color: var(--tang);
  width: 320px;
  display: flex;
  gap: 32px;
  /* flex-direction: column; */
  align-items: center;
  justify-content: center;
  transition: .25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.game a.apk-link:hover {
  transform: translate(0, -4px) scale(1.15);
  box-shadow: 0px 0px 16px 8px var(--beige) inset;
  color: var(--foregroundDark);
  text-decoration: none;
}

/*  */
/* END OF GAME STYLES */
/*  */

/* ------------- */
/* STORYBOOK STYLES */
/* ------------- */

main.storybook section {
  margin-bottom: 10%;
}

main.storybook section.storybook.hero {
  padding-bottom: 32px;
  display: flex;
  height: 95vh;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)), url(/wp-content/uploads/2025/12/P.-27.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: repeat-y;
}


main.storybook .hero-content h1 {
  flex-shrink: 1;
  color: var(--red);
}

main.storybook .hero-content {
  padding-bottom: 24px;
  justify-content: center;
}

main.storybook .hero-content .left {
  /* width: 24vw; */
}

main.storybook.storybook .hero-content .right {
  max-width: 90vw;
}

main.storybook.storybook .hero-content .right p{
  margin-top: 8px;
}

main.storybook .storybook h1 {
  color: var(--beige);
}

main.storybook .storybook h2 {
  color: var(--green);
  /* text-align: center; */
}

main.storybook .storybook .cta {
  width: 50%;
  min-width: 33%;
  margin: 0 auto;
}

/* STORYBOOK INSTRUCTIONS */
main.storybook .storybook-instructions { 
  max-width: 630px;
      justify-content: center;
    margin: 129px auto;
    flex-direction: column;
    text-align: center;
}

main.storybook .storybook-instructions ol{
  display: flex;
    flex-direction: column;
    gap: 64px;
    justify-content: center;
}

main.storybook .storybook-instructions ol li {
  border-bottom: 1px solid #84994f;
  text-align: left;
}

main.storybook .storybook-instructions ol > li::marker {
  font-family: "LAUGHTER";
  color: var(--green);
  font-size: clamp(2.5rem, 2.3455rem + 0.8182vw, 2.9rem);
  border-radius: 50%;
  background-color: var(--tang);
}

main.storybook .storybook-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* remoeve heyzine watermark */

img.logo-backs2 {
    display: none;
}

section#storybook-download-link {
  scroll-margin-top: 100px;
  margin-top: 32px;
  padding-top: 128px;
  padding-bottom: 128px;
  background-color: var(--blue);
  border-radius: 25px;
  max-width: 100vw;
      mask: linear-gradient(0, #0000 60px, #000 0) 0 30px, radial-gradient(30px, #000 calc(100% - 1px), #0000) 50% / 55.5px 60px repeat space;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
}

section#storybook-download-link h2 {
  color: var(--beige);
  text-align: center;
}

.storybook-download-link-container {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  font-size: 32px;
  text-align: center;
}

.storybook-download-link-container div {
  height: 30vw;
  border-radius: 25px;
  background-color: var(--tang);
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

iframe.cl-heyzine-iframe.fp-iframe {
  width: 75vw !important;
  height: 75vh !important;
}

/*  */
/* END OF STORYBOOK STYLES */
/*  */

/* -------------- */
/* CONTACT STYLES */
/* -------------- */

.contact.hero {
  display: flex;
  height: 48vh;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  margin-top: 25vh;
  /* background-image: url(/wp-content/uploads/2025/12/P.-7.jpg);
  background-size: cover */
}

.contact h1 {
  text-align: center;
  /* font-size: 64px; */
}

.contact.hero h2 {
  color: var(--green);
  font-size: 48px;
  margin-top: 16px;
}

form#wpforms-form-18 {
  padding: 32px;
}

#wpforms-18-field_1 {
    max-width: 33vw;
}

.contact.details h1 {
  font-size: 64px;
}

.contact.details li {
  list-style: none;
}

.contact.details ul {
  display: flex;
  justify-content: center;
}

section.contact.details {
  flex-direction: column;
}

.contact.details .persons {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  justify-content: center;
  justify-items: center;
}

.contact.details .individual {
  background-color: var(--beige);
  padding: 16px;
  border-radius: 13px;
  color: var(--red);
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* max-width: 360px; */
}

.contact.details .individual h3 {
  font-size: 42px;
}

.contact.details .individual p {
  font-size: 16px;
}

/* --------------------- */
/* ABOUT PAGE STYLES */
/* --------------------- */

.about-page section.hero {
  margin-top: 32px;
  
  height: 95vh;
  display: flex;
  align-items: flex-end;

  background-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0), 
          rgba(0, 0, 0, 0.8) 
        ), url(/wp-content/uploads/2025/12/storybook-cast.png);
  background-size: contain;
  background-position: center; 
  background-repeat: repeat-y;
  overflow: hidden;
}

.about-page section.hero-content {
  padding: 0;
}

.about-page section div h2 {
  text-align: center;
}

section.mission-vision {
  background-color: var(--tang);
  padding: 64px 32px;
  border-radius: 25px;
  mask: radial-gradient(30px at 50% 30px, #0000 calc(100% - 1px), #000) 50% -30px / 55.5px 100%;
  margin-top: -32px;
}

.mission-vision-container img {
  filter: drop-shadow(0px 0px 08px #000000);
  max-width: 70%;
  margin: 0 auto;
}

.mv-paragraphs-container {
    max-width: 1200px;
}

section.gtk {
  background-color: var(--blue);
  padding: 64px 32px;
  color: var(--beige);
  margin-top: -32px;
}

.gtk-container p {
  text-align: center;
}

.gtk .persons {
  margin-top: 16px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  justify-content: center;
  justify-items: stretch;
}

.individual {
  background-color: var(--beige);
  padding: 16px;
  /* margin-bottom: 32px; */
  border-radius: 13px;
  color: var(--red);
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 1200px;
}

.individual h3 {
  font-family: "LAUGHTER";
  font-size: 48px;
  line-height: 95%;
}

/* --------------------- */
/* END OF PER-PAGE STYLES */
/* --------------------- */

/* -------------- */
/* MEDIA QUERIES */
/* -------------- */

@media screen and (max-width: 1200px) {
  .navbar {
    /* padding: 16px 24px; */
  }

  .navbar ul {
    gap: 16px;
    letter-spacing: -.3px;
  }

  a.btn {
    /* font-size: calc(1.5rem + 1vw); */
  }

  .navbar .nav-cta-btn {
    border-radius: 50px;
    padding: 4px 8px;
  }

  .hero h1 {
    line-height: 75%;
  }

  .game .hero-content .left {
    width: 75vw;
  }

  .game .hero-content .right {
    width: 48vw;
  }

  footer {
    padding: 7vh 2vw;
    flex-direction: column;
    flex-flow: column-reverse;
    align-items: center;
    gap: 64px;
  }

  .footer-links {
    margin-left: 0;
    gap: 64px;
  }

  .footer-copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .footer-copyright p {
    text-align: center;
  }
}

/* MOBILE MQs */
@media screen and (max-width: 960px) {

  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
  }

  h2 {
    font-size: 56px;
  }

  p, li {
    /* font-size: 20px; */
  }

  a.btn {
    /* padding: 8px; */
    max-width: 100vw
  }

  nav.mobile-hamburger {
    transform: translate(100%, 0);

    height: 100%;
    width: 100%;
    background-color: var(--green);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: center;
    justify-content: center;

  }

  nav.mobile-hamburger {
    
  }

  nav.mobile-hamburger img.custom-logo {
    width: auto;
    height: 100px;
  }

  nav.mobile-hamburger ul {
    list-style-type: none;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    /* gap: 1px; */
    font-family: "LAUGHTER";
    text-transform: uppercase;
    color: var(--beige);
  }

  nav.mobile-hamburger ul * :not(.hamburger-close *) {
    font-size: 36px;
  }

  nav.mobile-hamburger ul li::before {
    content: "→";
    margin-right: 16px;
    font-size: 48px;
}

  nav.mobile-hamburger .nav-cta-btn {
    margin: 32px 0 0 0;
  }

  .nav .nav-cta-btn {

  }

  .hamburger-close {
    align-self: center;
    margin-top: 16px;
    margin-right: 24px;
    position: absolute;
    top: 0;
    right: 0;

    border-radius: 49px;
    border: 1px solid var(--beige);
    padding: 8px 32px;

    font-size: 24px;
  }

  .index .hero {

    margin-top: 3vw;
    
  }

  .index .hero .hero-content {
    padding: 16px;
    max-width: 100%;
    margin: 0;
    gap: 4px;
  }



  .navbar {
    width: 100vw;
  }

  .navbar ul li {
    display: none;
  }

  .navbar .nav-cta-btn {
    font-size: 28px;
    padding: 1px 5px;
  }

  .navbar .nav-cta-btn span{
    display: none;
  }
  
  .hamburger-toggle {
    display: block;
    font-size: 28px;
  }


  .hero-content {
    flex-direction: column;
    /* padding: 16px; */
  }

  .hero h1 {
    font-size: 56px;
  }

  .hero p {
    font-size: 16px;
  }

  .storybook-container,
  .information-container {
    flex-direction: column;
  }

  .storybook-container .right{
    padding: 32px;
  }

  .information-container .left {
    padding: 16px;
  }

  .about {
    padding: 16px;
  }

  .contact {
    padding: 16px
  }

  .contact p {
    text-align: center;
  }

  footer {
    padding: 48px 16px;
    width: 100vw;
    font-size: 36px;
  }

  .footer-contact {
    font-size: 48px;
  }

  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .footer-cta {
    align-self: center;
  }

  .footer-cta a {
    font-size: 36px;
  }

  .footer-nav * {
    font-size: 36px;
    margin-bottom: 8px;
  }

  /* GAME MQ */

  body.game {
    display: block;
  }

  .game .hero {
    margin-top: 3vw;
  }
  
  .game.hero-content {
    margin: 0;
    gap: 4px;
    padding-bottom: 0;
  }

  .game .hero-content .left,
  .game .hero-content .right {
    width: 75vw;
  }

  .game.hero-content .right {
    align-self: flex-start;
  }

  .game .cta {
    width: initial;
    transform: translate(0);
  }

  .game .cta a {
    padding: 1vh 8vw
  }

  .game-instructions {
    flex-direction: column;
    padding: 8px;
  }

  .game-download-links-container {
    flex-direction: column;
  }

  /* CONTACT MQ */
  .contact.hero {
    padding: 8px;
    max-width: 100%;
  }

  .contact.hero h1 {
  }

  /* ABOUT MQ */
  .gtk .persons {
    grid-template-columns: auto;
  }

  section.contact.details .persons {
    grid-template-columns: auto;
  }
}