body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    font-weight: 300;
}


@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Light.woff2') format('woff2'),
        url('/fonts/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-LightItalic.woff2') format('woff2'),
        url('/fonts/Montserrat-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Medium.woff2') format('woff2'),
        url('/fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-MediumItalic.woff2') format('woff2'),
        url('/fonts/Montserrat-MediumItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

strong, b {
    font-weight: 400;
}
normal{
	font-weight: 300;
}


.wrapper {
	display: flex;
}
.menu {
    background-color: #fff;
    color: #333;
    width: 300px;
    padding: 10px;
    position: relative;
 }

.menu-header {
    margin-bottom: 10px;
    padding: 10px;
    overflow: hidden;
    max-height: 100%;
    width: inherit;
    margin-top: 0px;
}


.menu-header a {
    font-size: 40px;
    font-weight: 300;
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    color: #333333;
}


.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    max-height: 100%;
}

.menu-list a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    padding: 10px;
    display: block;
    transition: text-decoration 0.3s;
    max-height: none;
    font-weight: 300;
}

.menu-list a:hover {
  text-decoration: underline; /* Add underline on hover */
}


.menu-items {
  list-style: none;
  padding: 0;
  margin: 20px;
}

.menu-items li {
  margin-bottom: 10px;
}

.menu-items a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
}

.menu-list.expanded {
    max-height: 500px; /* Adjust to an appropriate value that makes sure all list items are visible when expanded */
    transition: max-height 0.3s ease-in-out; /* Optional: To add smoothness to the expanding/collapsing effect */
}
.soundcloud-container {
    align-items: start;
    padding-left: 20px;
	width: 400px;
}

.youtube-container {
    align-items: start;
    padding-left: 20px;
	padding-right: 20px;
	position: relative;
	margin-top: 28px;
	/*width: 560px;*/
      
}

.aspect-ratio-content {
	
	width: 560px;
    height: 315px;
	
	
}

.video-descriptions {
    padding-left: 20px;
    width: 560px;
    padding-bottom: 20px;
    text-align: justify;
}

.video-descriptions a {
    text-decoration: none;
    font-weight: normal;
    color: #000000;
    font-style: italic;
}
.video-descriptions a:hover {
  text-decoration: underline; /* Add underline on hover */
}
.music-title {
    width: inherit;
    text-align: center;
    font-size: large;
    padding-top: 100px;
    padding-bottom: 20px;
}
.music-title p {
    margin: 0px;
}

.music-descriptions {
    padding-bottom: 40px;
    padding-left: 5px;
    padding-right: 5px;
    width: inherit;
    text-align: justify;
}

.music-descriptions a {
    text-decoration: none;
    font-weight: bold;
    color: #000000;
}
.music-descriptions a:hover {
  text-decoration: underline; /* Add underline on hover */
}
.artists-statement {
    padding-top: 85px;
    max-width: 500px;
    font-size: 1.2em;
    text-align: justify;
}
.book-text {
    max-width: 500px;
    font-size: 1em;
    padding-bottom: 20px;
    text-align: justify;
}
.book-text p {
    padding: 0px;
	margin: 0;
    text-indent: 1.5em;
}
.book-title-subtitle p {
    padding-bottom: 0px;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-indent: 0px;
}
.book-title-subtitle {
    font-size: 1.1em;
    padding-bottom: 10px;

}



.book-header {
    max-width: 500px;
    padding-bottom: 15px;
    
    font-size: 1.5em;
}
.prose {
    margin-top: 28px;
}

.book-header p {
    margin-top: 0px;
    margin-bottom: 0px;
}
.dreams {
    font-size: 1.5em;
    padding-left: 20px;
	
}
.dreams a {
    text-decoration: none;
    font-weight: bold;
    color: #000000;
}
.dreams a:hover {
  text-decoration: underline;
}
.hamburger {
    font-size: 30px;
    cursor: pointer;
    display: none; /* Will only display in mobile view */
}

#menuToggle {
    display: none;
}

/* When the checkbox is checked, show the menu */
#menuToggle:checked + .hamburger + .menu-header + .menu-list {
    max-height: 500px;
}

.image-grid {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    font-size: medium;
}


.image-card {
    flex: 1;
    margin: 0 10px;
    text-align: center;
    width: 200px;
}

.tactile-paragraph  {
    text-align: justify;
    max-width: 500px;
}
.tactile-header {
    font-size: 24pt;
    font-weight: normal;
    max-width: 500px;
    margin-top: 28px;
}
.tactile-art-desc {
    margin-top: 50px;
    text-align: justify;
    max-width: 500px;
	margin-right: 10px;
    margin-left: 10px;
}


.image-card p {
    margin: 0;
    padding: 0;
   
}

.image-card img {
    max-width: 100%; 
    height: auto;
	cursor: pointer;
}
.museum_header {
    margin-left: 10px;
    margin-top: 50px;
    font-size: x-large;
    font-weight: normal;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}


/* Modal Content (image) */
.modal-content {
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto; 
    margin: auto;
    display: block;
	
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
.robot-dreams-header {
    max-width: 420px;
    margin-left: 10px;
    font-weight: normal;
    font-size: 24pt;
    margin-top: 28px;
}
.robot-dreams-desc {
    max-width: 420px;
    margin-left: 10px;
    text-align: justify;
    font-weight: 300;
}
.robot-dreams-desc p{
	margin-bottom: 10px;
	
}
.tactile-image-card {
    flex: 1;
    margin-top: 0;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 10px;
    text-align: center;
    max-width: 500px;
	
}

.bitcloud-image{
    flex: 1;
    margin-top: 0;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 100px;
    text-align: center;
    width: 500px;

}
.bitcloud-image p {
	
    margin: 0;
	padding: 0;
}

.tactile-image-card p {
	margin: 0;
	padding: 0;
}
.tactile-image-card .tactile-paragraph{
    margin-top: 20px;
    text-align: justify;
}

.tactile-image-card img {
    max-width: 100%; 
    height: auto;
	/*cursor: pointer;*/
}
.tactile-header {
    margin-left: 10px;
}
.tactile-art-desc {
    margin-left: 10px;
}


/* Adjust the grid container */
.homepage-grid {
    padding-top: 110px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Each column is at least 300px */
    gap: 2%; /* Use percentage for relative spacing */
    max-width: 1000px; /* Set a maximum width for the grid */
    margin: 0 auto; /* Center the grid container */
}

/* Style for grid items */
.homepage-grid-card {
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.homepage-grid-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.homepage-grid-card p {
    font-size: 18px;
    font-weight: 300;
    color: #333;
    margin-top: 10px;
}












@media screen and (max-width: 768px) {
	
    .homepage-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for mobile */
        grid-auto-rows: auto; /* Maintain aspect ratio and fill rows */
    }

	.menu-list{
		max-height: 0px;
	}
	
	.wrapper {
    flex-direction: column; 
  }

	.aspect-ratio-content {
	
	position: absolute;
    top: 0;
    left: 0;
	width:inherit;
	height: 100%;
	box-sizing: border-box;
	
    		
}
.youtube-container {
        margin-bottom: 10px; /* Adjust this value for desktop spacing */
    	padding-top: 56.25%; /* 16:9 Aspect Ratio */
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		width: 100%;
	}	
	
	.soundcloud-container {
    align-items: start;
    padding-left: 20px;
	width: 350px;
}
	.artists-statement {
	
    padding-top: 20px;
    padding-left: 15px;
	padding-right: 15px;
    
}
.video-descriptions {
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}
.hamburger {
        display: block;
    }

    .menu-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }
	.book-text {
    padding-top: 20px;
    padding-left: 15px;
	padding-right: 15px;
}
.book-header {
	padding-left: 15px;
	padding-right: 15px;
}

.image-grid {
    flex-direction: column;
}

.image-card {
    margin: 20px 0;
	width: 100%;
}
.image-card p {
    margin-left: 10px;
    margin-right: 10px;
}	

.tactile-image-card {
    margin: 20px 0;
	width: 100%;
}
.tactile-image-card p {
    margin-left: 10px;
    margin-right: 10px;
}

.bitcloud-image{
    
    margin: 20px 0;
	width: 100%;
}


.bitcloud-image p {
    margin-left: 10px;
    margin-right: 10px;
    
}
	
	.image-card img, .tactile-image-card img, .bitcloud-image img {
        max-width: 100%;
        height: auto;
        cursor: default; /* Change from pointer to default */
        pointer-events: none;

}

.modal, .close {
        display: none;
    }
.robot-dreams-desc {
    margin-right: 10px;
}

.homepage-grid {
    padding-top: 20px; /* Adjust this value as needed */
}
	
}


/* Dark theme override */
body.dark-theme {
  background-color: #000;
  color: #fff;
}

body.dark-theme a {
  color: #ccc; /* or any light color for links */
}

body.dark-theme img {
  filter: brightness(1); /* Optional: avoid unintended darkening if you have global image styles */
}

/* Optional: override other specific components */
body.dark-theme .menu,
body.dark-theme .menu a {
  color: #fff;
  background-color: #000;
}

/* If you want to override other elements */
body.dark-theme .bitcloud-image p {
  color: #fff;
}


/* Apply dark theme styling when .dark-theme is on the body */
body.dark-theme .menu {
  background-color: #000;
  color: #fff;
}

body.dark-theme .menu a {
  color: #fff;
}

body.dark-theme .menu a:hover {
  color: #ccc;
}

body.dark-theme .menu-header a {
  color: #fff;
}

body.dark-theme .hamburger {
  color: #fff;
}

/* Optional: if your mobile menu expands and has a white background */
body.dark-theme .menu-list {
  background-color: #000;
}

/* Match text width for all image grids */
.robot-dreams-desc,
.image-grid {
  max-width: 420px;
  margin-left: 10px;
  margin-right: auto;
}

/* Make all images scale to text width */
.image-grid img {
  width: 100%;
  height: auto;
  display: block;
}

/* Special case: #Eleven should be half-width on desktop */
#Eleven {
  width: 50%;
  max-height: 500px; 
  object-fit: contain; /* prevents stretching */
  height: auto;
  display: block;
  margin: auto;
}


/* On mobile, make #Eleven full width like the others */
@media screen and (max-width: 768px) {
  #Eleven {
    width: 50%;
  }
}

@media screen and (max-width: 768px) {
  .robot-dreams-desc {
    text-align: left;
  }
}



/* Make audio player full width + large controls on mobile */
@media (max-width: 768px) {
  .audio-wrapper {
    max-width: 100%;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  .ad-player {
    width: 100%;
    height: 140px;          /* taller bar */
    transform: scale(1.5);  /* enlarge all native controls */
    transform-origin: top left;
  }
}



/* -----------------------------
   Custom audio big-button controls
   ----------------------------- */

.custom-audio {
  margin-top: 24px;
  margin-bottom: 24px;
  max-width: 500px;          /* align to text column on desktop */
}
.custom-audio .audio-label {
  margin-bottom: 10px;
  font-style: italic;
}
.custom-audio .time {
  margin-top: 10px;
  font-size: 0.95em;
  opacity: 0.8;
}

/* The big Play/Pause button — reset UA styles to avoid iOS blue state */
.custom-audio button {
  display: block;
  width: 100%;
  padding: 22px 28px;
  font-size: 2rem;
  line-height: 1.2;

  border: none;
  border-radius: 16px;

  background: #000;
  color: #fff;

  cursor: pointer;

  /* iOS/Safari & mobile resets to prevent blue highlight/state */
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-fill-color: currentColor;

  /* Avoid inner focus ring on Firefox */
  -moz-appearance: none;
}
.custom-audio button:active,
.custom-audio button:focus {
  background: #000 !important;  /* keep black on press/focus */
  color: #fff !important;
  outline: none;
  box-shadow: none;
}

/* Dark theme invert */
body.dark-theme .custom-audio { color: #fff; }
body.dark-theme .custom-audio button {
  background: #fff;
  color: #000;
}
body.dark-theme .custom-audio button:active,
body.dark-theme .custom-audio button:focus {
  background: #fff !important;
  color: #000 !important;
  outline: none;
  box-shadow: none;
}

/* Mobile: even larger, full width touch target */
@media (max-width: 768px) {
  .custom-audio {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }
  .custom-audio button {
    padding: 28px 32px;
    font-size: 2.2rem;
    border-radius: 18px;
  }
}