/* styles.css */

html, body {
padding: 0px;
margin: 0px;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.header-img {
  max-height: 18px;
  max-width: 25px;
}

body {
  /* margin: 5px; */
  /* padding: 5px; */
  color: white;
}

.container, .menu, .wrapper {
margin: 5px;
padding: 5px;
}

h1, h2, h3, h4, h5, h6 {
  color: #00FFFF; /* Cyan for bright, funky color */
  font-size: 30px; /* Increase font size for readability */
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt'; /* Goofy, artistic aesthetic */
  background-color: #FF4500; /* Orange red background for contrast and readability */
  padding: 10px; /* Some padding for aesthetics */
  font-weight: bold;
  text-shadow: 2px 2px black;
  padding-left: 1%;
  padding-right: 1%;
  border: 5px dashed yellow; /* Add a funky border */
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5); /* Add some box shadow for depth */
}

h1 a:link, h1 a:visited, h1 a:hover {
text-decoration:none !important;
}


.menu a {
  color: #1c14ff; /* Deep pink for bright, funky color */
  font-size: 30px; /* Increase font size for readability */
  transition: color 0.3s ease; /* Transition for smooth hover effect */
  text-decoration: none; /* Remove underline */
  padding-left: 1%;
  padding-right: 1%;
  display: inline-block; /* Required for padding to take effect */
  border-radius: 5px; /* Rounded corners for a funky look */
  background-color: aquamarine;
}

.menu a:hover {
  color: #00FF00; /* Change color to lime on hover */
  transform: scale(2); /* Increase size on hover */
}

.rainbow-text {
  /* font-size: 3rem; */
  font-size: 48px;
  text-shadow: none;
  background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin:11px 0;
}

.img-background {
  background-image: url('opiumrug.png');
  background-size: 50%;
  background-color: #834b58;
  height: 100%;
  width: 100%;
}

.content-area {

  margin-left: 5%;
  margin-right: 5%;
  background-color: rgba(0, 0, 0, 0.829);
  margin-bottom: 10px;
}

.content-area img {
max-width:400px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  /* Added */
}

.image {
  flex: 1;

  /* Adjust the value as needed */
  height: auto;
}

.text {
  flex: 1;
  /* Added */
}

.cursed {
  background-color: white;
  margin-right: 20px;
  font-size: 24px;
  font-weight: bold;
}

.text p {
  color: #FF69B4; /* Hot pink for bright, funky color */
  /* font-size: 2rem;  */ /* Increase font size for readability */
  font-size: 32px;
  font-weight: bold;
  text-shadow: 2px 2px black;
  white-space: normal;
  line-height: 1.5;
  word-wrap: break-word;
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt'; /* Goofy, artistic aesthetic */
  background-color: #FFFF00; /* Yellow background for contrast and readability */
  padding: 10px; /* Some padding for aesthetics */
}

.rainbow-text-shadow {
  text-align: center;
  margin-top: 2.5rem;
  /* font-size: 1.5rem; */
  font-size: 24px;
  font-weight: 100;
  color: rgb(0, 0, 0);
  letter-spacing: 8px;
}

.footer {
  color: #fff;
  text-align: left;
  padding: 20px;
  font-family: Arial, sans-serif;
  font-size: 24px;
  letter-spacing: 5px;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 2px 2px #ff0000, -2px -2px #00ff00, 2px -2px #0000ff, -2px 2px #ffff00;
}


.video-wrapper {
  display: flex;
  justify-content: space-between;
  /* Optional: Adds space between the videos */
}

.video-container {
  position: relative;
  width: 45%;
  /* Adjust this to change the default size */
  height: 0;
  padding-bottom: 25.125%;
  /* Adjust this to maintain the aspect ratio */
  background-color: black;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mobileTop { 
display:none;
}

.textAreaFormat {
width:400px;
height:300px;
border-color: cyan;
border-width: 1em;
}


@media only screen and (min-width:320px) and (max-width: 480px) {

.mobileTop {
display:block;
text-align:center;
margin:11px auto 0;
}

.mobileTop a {
margin:0 10px;
}

.mobileTopImage {
width:133px;
height:auto;
display:inline-block;
vertical-align:middle;
}

.bullaImage, .wawaImage {
display:none;
}

h1.rainbow-text {
font-size: 24px;
}

.rainbow-text-shadow {
margin-top: 1rem;
font-size: 19px;
text-shadow: 1.5px 1.5px black;
}

.menu {
width:98%;
}

.menu a {
font-size: 17px;
margin-bottom: 4px;
}

.text p {
font-size:24px;
}

.content-area img {
max-width:95%;
}

.textAreaFormat {
width:90%;
}

}

@media only screen and (min-width:481px) and (max-width: 992px) {

.mobileTop {
display:block;
text-align:center;
margin:11px auto 0;
}

.mobileTop a {
margin:0 10px;
}

.mobileTopImage {
width:173px;
height:auto;
display:inline-block;
vertical-align:middle;
}

.bullaImage, .wawaImage {
display:none;
}

h1.rainbow-text {
font-size: 34px;
}

.rainbow-text-shadow {
margin-top: 19px;
font-size: 19px;
text-shadow: 1.5px 1.5px black;
}

.menu {
width:98%;
}

.menu a {
font-size: 24px;
margin-bottom: 4px;
}

.text p {
font-size:28px;
}

.content-area img {
max-width: 333px;
}

.textAreaFormat {
width:90%;
}

}

@media only screen and (min-width:993px) and (max-width: 1200px) {

.mobileTop {
display:block;
text-align:center;
margin:11px auto 0;
}

.mobileTop a {
margin:0 10px;
}

.mobileTopImage {
width:198px;
height:auto;
display:inline-block;
vertical-align:middle;
}

.bullaImage, .wawaImage {
display:none;
}

}

@media only screen and (min-width:1201px) and (max-width: 1400px) {

.mastHeadMiddle {
width:704px;
}

h1.rainbow-text {
font-size: 36px;
}

}

@media only screen and (min-width:1401px) and (max-width: 1620px) {

.mastHeadMiddle {
width:904px;
}

}

/* ---- opiumpuppets.com shared pieces (home, gallery, 404) ---- */

/* Plain background colour, no rug image */
body.plainBackground {
background-color: #834b58;
}

/* Top bar: project name left, nav right, like cryptopunks.app, in the site's orange and dashed yellow */
.topBar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 20px;
padding: 13px 16px;
background-color: #FF4500;
border-bottom: 5px dashed yellow;
box-shadow: 0 5px 10px rgba(0,0,0,0.5);
position: relative;
z-index: 3;
}

.topBarLogo:link, .topBarLogo:visited {
display: flex;
align-items: center;
gap: 14px;
color: #00FFFF;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt';
font-size: 28px;
font-weight: bold;
text-shadow: 2px 2px black;
text-decoration: none;
letter-spacing: 2px;
}

/* The O.P.I.U.M. logo, tilted up a little more than it already is */
.topBarLogoImg {
display: block;
height: 40px;
width: auto;
transform: rotate(-7deg);
}

/* Name sits 3px closer to the logo */
.topBarLogo span {
display: inline-block;
margin-left: -3px;
}

.topBarNav {
display: flex;
gap: 12px;
}

.topBarNav a:link, .topBarNav a:visited {
color: #1c14ff;
background-color: aquamarine;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt';
font-size: 22px;
font-weight: bold;
padding: 4px 16px;
border-radius: 5px;
text-decoration: none;
transition: color 0.3s ease, transform 0.2s ease;
}

.topBarNav a:hover {
color: #00FF00;
transform: rotate(-3deg) scale(1.1);
}

.topBarNav a.current {
background-color: #FFFF00;
}

/* Below about 1250px the name and nav (Home, Gallery, Signs) no longer fit on one line: center both, nav on its own line */
@media only screen and (max-width: 1250px) {
.topBar { flex-direction: column; justify-content: center; }
.topBarNav { justify-content: center; }
}

@media only screen and (max-width: 820px) {
.topBarLogo:link, .topBarLogo:visited { font-size: 22px; }
.topBarNav a:link, .topBarNav a:visited { font-size: 18px; padding: 4px 12px; }
}

/* Phones: logo centered with the name underneath it, then the nav, all centered.
   Smaller name so more of it fits on the first line */
@media only screen and (max-width: 600px) {
.topBarLogo:link, .topBarLogo:visited { flex-direction: column; gap: 10px; text-align: center; font-size: 18px; letter-spacing: 1px; }
.topBarLogoImg { margin-top: 6px; }
.topBarLogo span { margin-left: 0; }
}

/* Body as a column so the footer sits at the bottom of short pages */
body.plainBackground {
display: flex;
flex-direction: column;
min-height: 100vh;
}

/* Footer on every page */
.siteFooter {
margin-top: auto;
padding: 20px 16px 30px;
background: #160d0f; /* the old 83% black over #834b58, made solid so the parade does not show through */
text-align: center;
color: #fff;
font-family: Arial, sans-serif;
font-size: 18px;
line-height: 1.6;
}

.siteFooter a:link, .siteFooter a:visited {
color: #00FFFF;
}

.siteFooter a:hover {
color: #FFFF00;
}

.siteFooter .footer {
text-align: center;
padding: 0 0 12px;
}

/* Marketplace buttons, one row, alphabetical */
.siteMarkets {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 16px;
margin: 0 0 14px;
}

.siteMarkets a:link, .siteMarkets a:visited {
color: #1c14ff;
background-color: #c0b9a6;
border: solid 3px black;
border-radius: 6px;
box-shadow: 3px 3px 0 #000;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt';
font-size: 18px;
font-weight: bold;
padding: 4px 16px;
text-decoration: none;
transition: color 0.3s ease, transform 0.2s ease;
}

.siteMarkets a:hover {
color: #00FF00;
transform: rotate(-3deg) scale(1.08);
}

/* ---- Puppet parade (parade.js) behind every page ---- */

/* Fixed to the screen like a screen saver: the page scrolls over it. The page content is positioned
   above it (next rule) and lets clicks through its empty parts, so the puppets can be clicked and
   hovering one pauses the train. 100lvh is the tallest the phone screen gets
   (browser bars hidden), so it never needs more rows while scrolling */
.parade {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
height: 100lvh;
overflow: hidden;
z-index: 0;
}

/* Page content sits above the parade (the top bar has its own z-index) */
.homeStage, body > .wrapper, body > .opiumCentered, body > main, .siteFooter {
position: relative;
z-index: 1;
}

.paradeTrack {
display: flex;
width: max-content;
gap: 14px;
padding: 7px 0;
}

/* Each puppet links to its own page (gallery/N/) */
.paradeTrack a {
display: block;
flex: none;
transition: transform 0.2s ease;
}

.paradeTrack img {
display: block;
width: 160px;
height: 160px;
border: solid 4px black;
box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
background: #fff;
}

.paradeTrack a:nth-child(3n) { transform: rotate(-3deg); }
.paradeTrack a:nth-child(4n) { transform: rotate(2deg); }
.paradeTrack a:hover { transform: scale(1.08) rotate(-2deg); }

.paradeTrack.isMoving { animation: paradeLeft 60s linear infinite; }
.paradeTrack.isMoving.reverse { animation-name: paradeRight; }
.parade:hover .paradeTrack { animation-play-state: paused; }

@keyframes paradeLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes paradeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
.paradeTrack.isMoving { animation: none; }
}

@media only screen and (max-width: 820px) {
.paradeTrack img { width: 112px; height: 112px; }
}

/* Clicks pass through the empty parts of a page to the puppets behind. The page's layout boxes let
   clicks through; the visible things inside them (yellow boxes, cards, thumbnails) take them as usual */
.wrapper, .wrapper .container, .wrapper .text, .opiumCentered, #galleryList {
pointer-events: none;
}

.wrapper .text > *, #galleryList .thumbnail {
pointer-events: auto;
}


/* Orange Bitcoin mark after two sign names (I am Satoshi Nakamoto, In Bitcoin We Trust): Signs page, lightbox, item pages */
.btcMark {
color: #F7931A;
}

/* Upside-down sign text (BTC is my Religion, the Sin cross): Signs page, lightbox, item pages */
.flip-upside-down {
display: inline-block;
transform: rotate(180deg);
}