.nothing-you-could-do-regular {
    font-family: "Nothing You Could Do", cursive;
    font-weight: 600;
    font-style: normal;

}
.mainTitle {
    font-size: clamp(25px, 5vw, 80px);
    text-align: center;
    color:#CCC5B9;
}
.mainTitleTM {
    font-size: clamp(12px, 8vw, 25px);
}

.scale_font_icon_menu{
    font-size: clamp(24px, 8vw, 50px);
}

.display_username_size{            
    font-size: 24px;           
    color:#2A3D45;
}
.roboto-slab {
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.metal-mania-regular {
    font-family: "Metal Mania", system-ui;
    font-weight: 400;
    font-style: normal;
}

.caveat{
    font-family: "Caveat", cursive;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.point_simple{
    cursor:pointer;
}
.accordion { 
    --bs-accordion-active-bg: #d7ccc8;
}
.main_font_with_color{
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:#42494e;
}

.selected{
    background-color: #C1C5BF;; 
}

.sign_up_label_width{
    width:30%;
}

/* Fixed Color Classes for simpler updating  */

.btn_interaction_bg{
    background-color: #CCBEBE
}
.interactionBtns{
    background-color:#CCBEBE ;
}
.icon_color{
    color: #2A3D45;
    cursor: pointer;
}  
.w-80 {
    width: 80% !important;
  }
.w-20{
    width: 20% !important;
}
.menu_title{
    font-size: clamp(60px, 3.2vw, 70px);   
  }
.material-symbols-solid {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
  }
  .table_custom { --bs-table-bg: transparent !important; }

.card-blur{
    filter: blur(8px) grayscale(1);
}

.card-img-overlay- {
    z-index: 1; 
}
.card-img-overlay {
    z-index: -1; 
}


.top-right {
    position: absolute;
    top: 0px;
    right: 1px;
  }

  .top-left {
    position: absolute;
    top: 0px;
    left: 1px;
  }

/* Bottom right text */
/* .bottom-right {
    position: absolute;
    bottom: 1px;
    right: 1px;
    background-color:lightgray;
  } */

  .container_text {
    position: relative;
    text-align: center;
    color: white;
  }
  
  .dynamic_font{
    font-size: clamp(35px, 2vw, 45px);   
  }

  .pending_border{
    border:5px solid #fbed0c;
    background-color:#fbed0c;
    color:black;
  }
  .approved_border{
    border:5px solid #0df517;
    background-color:#0df517;
    color:black;
  }
  .not_approved_border{
    border:5px solid #cc0000;
    background-color:#cc0000;
    color:black;
  }

  .cool_border{
    border:5px solid #cc0000;
  }
  .header-area {
    z-index: 1;
  }

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap'); /* Example: Import Oswald font */


.vintage-hotel-meme-highlight{
  text-shadow:
    /* Adjusted white glow (less bright) */
    0 0 2px rgba(255, 255, 255, 0.3), /* Reduced opacity for a softer white glow */
    /* Red neon glow */
    0 0 42px #ff0000,
    0 0 82px #ff0000,
    0 0 92px #ff0000,
    0 0 102px #ff0000,
    0 0 151px #ff0000,
    /* Blue border */
    1px 1px 0 #0000ff,
    -1px 1px 0 #0000ff,
    1px -1px 0 #0000ff,
    -1px -1px 0 #0000ff;
}

.vintage-hotel-meme {
  background-color: #403D39;
  font-family: 'Oswald', sans-serif;
  color: #fff; /* Base color for the neon tube (can be a very light pink/red too) */
  writing-mode: vertical-rl; /* Stack text vertically, right-to-left */
  text-orientation: upright; /* Keep glyphs upright */
  font-weight: 700;
  padding-top: 10px;
  padding-bottom: 10px;
}

.vintage-hotel-story-highlight {
 text-shadow:
    /* Adjusted white glow (less intense) */
    0 0 2px rgba(255, 255, 255, 0.6), /* Subtle white center glow with some transparency */
    /* More pronounced red glow */
    0 0 10px #ff0000,
    0 0 20px #ff0000,
    0 0 30px #ff0000,
    0 0 40px #ff0000,
    /* Blue border */
    1px 1px 0 #0000ff,
    -1px 1px 0 #0000ff,
    1px -1px 0 #0000ff,
    -1px -1px 0 #0000ff;
  /* Or use -webkit-text-stroke for a more direct outline effect */
  /* -webkit-text-stroke: 1px #0000ff; */
}
 .btn-outline-purple {
  color: white;
  border-color: #6f42c1;
  background-color: #6f42c1;
}

.btn-outline-purple:hover {
  background-color: #6f42c1; /* Darker shade for hover effect */
  border-color: #6f42c1;
  color:white;
}

.vintage-hotel-story {
  background-color: #403D39;
  font-family: 'Oswald', sans-serif;
  color: #fff; /* Base color for the neon tube */
  writing-mode: vertical-rl; /* Stack text vertically, right-to-left */
  text-orientation: upright; /* Keep glyphs upright */
  font-weight: 700;
  padding-top: 10px;
  padding-bottom: 10px;
}

  
.glow-exit {
    animation: exit-glow 2s ease-out forwards; /* Apply the animation */
}

@keyframes exit-glow {
    from {
        text-shadow:
            0 0 42px #ff0000,
            0 0 82px #ff0000,
            /* ... other shadows */
            1px 1px 0 #0000ff; /* Initial state */
    }
    to {
        text-shadow: none; /* Glow fades out */
    }
}


/* Container for the pages */
.page-container {
  position: relative; /* Position the container to control overflow */
  width: 100vw; /* Make the container the full viewport width */
  height: calc(100vh - var(--footer-height)); /* 85vh; lets make shorter to excude overlap from footer */
  overflow-x: hidden; /* Hide horizontal overflow during transitions */
  scrollbar-width: thin;
}

/* Base styles for each page */
.page {
  position: absolute; /* Position pages absolutely within the container */
  top: 0;
  left: 0; /* Align pages to the left */
  width: 100vw; /* Each page is full viewport width */
  height: 100vh; /* Each page is full viewport height */
  transition: transform 0.85s ease-in-out; /* Add transition for smooth sliding */
  /* Add padding-bottom to ensure content doesn't get hidden by the fixed footer */
  padding-bottom: 50px; /* Adjust this value to your footer's height */
}
#nominate_top{
transition: transform 0.85s ease-in-out; /* Add transition for smooth sliding */
}
#memeright{
transition: transform 0.75s ease-in-out; /* Add transition for smooth sliding */
}
#story_left{
  transition: transform 0.9s ease-in-out; /* Add transition for smooth sliding */
}

#page4 {
  transform: translateX(-100vw); /* Initially position page3 off-screen */
}

#page3 {
  transform: translateX(100vw); /* Initially position page3 off-screen */
}

#page2 {
  transform: translateX(100vw); /* Initially position page2 off-screen */
}

.page.active {
  transform: translateX(0);
}

a.anchor {
    /* display: block; */
    position: relative;
    top: -70px;
    left:0;
    visibility: hidden;
}

html {
  /* scroll-padding-top: 50px; Adjust for sticky header */
  /* scroll-padding-bottom: 50px; Adjust for fixed footer */
}

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* height: 125px; Example header height */
  /* height: var(--header-height); */
  z-index: 100; /* Ensure header is on top */
}

.fixed-footer {
  position: fixed; /* Position the footer fixed at the bottom */
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100; /* Ensure footer is on top */
  text-align: center;
}

html, body {
  overflow-y: hidden; /* Hide the default vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal overflow as well */
  height: 100%; /* Ensure html and body take up full viewport height */
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
}
@media(max-width:2500px){ 
  body{
    --header-height: 12vh;
    --dynamic-size-top: 2vw;
    --dynamic-size-bottom: 3vw;
  }
}
@media(max-width:1500px){ 
  body{
    --header-height: 10vw;
    --dynamic-size-top: 2vw;
    --dynamic-size-bottom: 3vw;
  }
}
@media(max-width:1000px){
  body{
    --header-height: 9.5vh;
    --dynamic-size-top: 7vw;
    --dynamic-size-bottom: 8vw;
  }
}


/* Base (mobile first) */
:root {
  --header-height:60px;
  --footer-height:100px;
}

.top-center{
    position: absolute;
    top: 3px;
    width: 100%; /* allows text to grow and wrap */
}

.bottom-center{
  position: absolute;
  bottom: 3px;
  width: 100%; /* allows text to grow and wrap */
}

.left-center{
  position: absolute;
  top:0;
  left: 3px;
  height: 100%; /* allows text to grow and wrap */
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.right-center{
  position: absolute;
  top:0;
  right: 3px;
  height: 100%; /* allows text to grow and wrap */
  writing-mode: vertical-rl;
  text-orientation: upright;
}
  
  .img_overlay{
  position: relative; /* establishes positioning context */
   text-align: center; /* horizontally center text */
   color: white; /* optional: set text color */
  }

.bangers-regular {
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
    /* font-size: 2em; */
}

.offcanvas-end {
  /* other styles */
  transition: transform 1s ease;
}

.huebee {
  z-index:10 !important;
}

.beta-legend {
  font-size: 3em;
  font-weight: bold;
  background: linear-gradient(
     90deg,
    #EB5E28 0%, /* Your dark orange/red */
    #CCC5B9 30%, /* Your grayish orange/ashy undertone */
    #DAD9D3 60%, /* Your muted indigo/gray */
    #CCC5B9 80%,
    #EB5E28 100%
  ); /* Adjusting color stops to decrease blue and add more gold */
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

#profile_top_3_carousel {
  /* transition: transform 0.5s ease-in; Add transition for smooth sliding */
}

.quintessential-regular {
  font-family: "Quintessential", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(24px, 3.8vw, 80px);
}

.gallary.collapse:not(.show) {
  display: block;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
.gallary.collapsing {
  height: 0;
  transition: height 0.35s ease;
}
/* Container styling */
.plasma-card {
  position: relative;
  width: 320px;
  height: 200px;
  background: #0a0a0c;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: sans-serif;
  border: 1px solid #222; /* Dim static border */
}

/* The light track layer */
.plasma-track {
  position: absolute;
  top: -1px; /* Offset to sit perfectly on top of border */
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  fill: none;
  pointer-events: none;
}

.plasma-track rect {
  /* stroke: #00f2fe; The Light Color */
  stroke-width: 4;
  /* Dash is 10 units long, Gap is 90 units (total 100) */
  stroke-dasharray: 90 10; 
  stroke-linecap: round;
  animation: trace 4s linear infinite;
}

.plasma-content {
  text-align: center;
  z-index: 2;
}

/* The Animation */
@keyframes trace {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

.collection-title {
  /* Use a high-end font like DM Serif Display */
  font-family: 'DM Serif Display', serif;
  font-size: clamp(24px, 3.8vw, 80px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Metallic Gold Gradient Effect */
  background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Subtle glow to mimic a 'beam' */
  text-shadow: 0 0 15px rgba(252, 246, 186, 0.4);
}