.menusection .list-group-item {
  background: transparent!important;
  color: #ccc;
  border: var(--bs-gray-100);
}

body {
  background: #373737;
  font-family: monospace;
  color: #ffffff;
  font-size: .85rem;
  margin: 0;

}

.col-md-8 {
  width:500px;
}


@font-face {
  font-family: 'slkscre';
  src: url('/bootstrap/fonts/slkscre.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.menu {
  position: relative; /* Keeps it inside its parent */
  border-bottom:1px solid #555;
  /*background: #333;*/
  padding: 25px;
  margin-bottom:20px;
  display: flex;
  align-items: center;
  gap: 25px;
  justify-content: flex-end; /* Pushes items to the right */
  text-align: right;
  width: 100%; /* Ensures it spans the full container width */
}


.menu img {
width: 24px;  /* Adjust size of icons */
height: 24px;
filter: invert(1); /* Makes icons white on dark backgrounds */
opacity: 0.8;
transition: opacity 0.3s ease;
}



.menu .logo {
font-family: monospace;
color: white;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}
.menu-bar {
height: 60px; /* Adjust as needed */
display: block; /* or flex if you want to center vertically */
align-items: center;
position: absolute;
left: 10px;
top: 18px; /* If you want it at the top of the page */
}

/* Counter container: single row now */
.counter-container {
display: flex;
flex-direction: row; 
align-items: center;
gap: 10px; /* space between the counter and the text */
}

/* Rolling counter (00:00) */
.counter {
display: flex;
align-items: center;
height: 30px;
overflow: hidden;
margin: 0; /* remove bottom margin to keep everything on one line */
}

.digit-wrapper {
position: relative;
width: 18px;       /* Enough width for a 22px font digit */
height: 30px;      /* Must match line-height for smooth rolling */
overflow: hidden;
text-align: center;
margin-right: 2px; /* small spacing between digits */
}

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

.digit {
position: absolute;
width: 100%;
font-size: 22px;   /* The requested size for digits */
line-height: 30px; /* Match .digit-wrapper height */
left: 0;
top: 0;
font-family: 'slkscre', sans-serif;
}

.colon {
font-size: 22px;
line-height: 30px;
margin: 0 4px;
}

/* Messages in the same row, normal body size */
.message {
font-size: 0.85rem;
margin: 0; /* No vertical margin so they stay aligned horizontally */
}

.discord-link {
color: #cc5a5a;
text-decoration: none;
}

@keyframes spin {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}






#menucol {
  width: 100%;
  max-width: 300px;
}

h1, h2, h3, h4 {
  font-family: monospace;
  font-weight: 900;
  color: #33363a;
}

h2.menu-header {
  font-family: monospace!important;
}

#contentcol {
  border-left:1px solid #797979;
  padding-left:40px;
}

.menu-header {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  padding: 0;
  margin: 20px 0 0;
}

.menusection a {
  color: #cc5a5a;
  text-decoration: none;
}

h3 {
  font-size: 1.25rem;
  margin: 40px 0 20PX;
  font-family: monospace;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -1px;
}

code {
  color: var(--bs-secondary)!important;
}

.buttonwrapper {
  padding:20px;
  background:#222;
}

.wallet-messages {
  background-color: #f9f9f9;  /* Light gray background */
  padding: 10px;
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
  min-height: 30px;
}

#code-editor span {
  color: #33363a;
  display: block;
}

h2 {
  margin: 80px 0 40px;
  font-size: 65px;
  /*text-transform: uppercase;*/
}

.form-check {
  margin-bottom: 25px;
}

.beautiful.bs-callout-info {
  background-color: #7A9998;
  color: #DCE089;
  font-size: 13px;
  font-weight: 900;
}

.beautiful.bs-callout {
  padding: 20px;
  margin: 20px 0;
  border-left: 10px solid yellow;
}

.beautiful.bs-callout-info h4 {
  color: #1b809e;
}

.beautiful.bs-calloutp:last-child {
  font-size: 13px;
  font-weight: 999;
}

.bs-callout-info p {
  margin-bottom: 0px;
}

.connectbtn {
  width:100%;
  height:50px;
  margin-bottom:8px;
  border-radius:0;
  border:0;
  background-color:#455799;
}

#discordbtn {
  background-color: var(--bs-purple);
  font-size: 15px!important;
  font-weight: 999;
  border: #dce089;
}

#callout1 > .container {
  margin: 0!important;
}

container.callout1 {
  margin: 0!important;
  padding: 0!important;
}

.table {
  --bs-table-bg: inherit;
  color: #ccc;
  --bs-table-border-color: #666;
}

.table > :not(caption) > * > * {
  color: #ccc;
}

#skulllogo {
  margin-left: 15px;
  background: #cc5a5a;
  font-size: 32px;
}

h4 {
  font-size: 1.1rem;
  text-transform: uppercase;
}

.active-menu {
  font-weight: bold;
  color: #999!important;
  text-decoration: line-through!important;
}

#themenu {
  position: sticky;
  top: 20px;
  height: 100vh;
  overflow-y: auto;
  max-height: 100vh;
}

#themenu::-webkit-scrollbar {
  width: 6px;
}

#themenu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}

#MainContain {
  max-width: 900px;
  position: absolute;
  margin-left:15%;

}

#announcement {
  background: #232323;
  padding: 0;
}

#announcement {
  vertical-align: middle;
  border-radius: 0!important;
  margin-top: -20px;
  margin-bottom: 35px;
}

#announcement span {
  padding: 5px 10px 0px;
  font-size: 40px;
  color: #444;
  font-weight: 900;
  font-family: 'Jersey 10';
}

#glitch {
  display: inline-block;
  letter-spacing: 0px;
  position: relative;
  font-family: 'Pixelify Sans';
  color: #33363a;
}

#glitch span {
  display: inline-block;
  position: relative;
  transition: all 0.3s ease-out;
}

.gloomycolor1 {
  color: #33363a;
}

.gloomycolor2 {
  color: #33363a;
}

.gloomycolor3 {
  color: #33363a;
}

.gloomycolor4 {
  color: #33363a;
}

.gloomycolor5 {
  color: #33363a;
}

.gloomycolor6 {
  color: #33363a;
}

.gloomycolor7 {
  color: #33363a;
}

.mintingnotstarted {
  font-weight: 900;
  background: #33363a;
  color: #ffffff;
  display: block;
}

.form-check-input:checked {
  background-color: #33363a;
  border-color: #33363a;
}

.card-body p, .card-body a, .card-body .list-group {
  font-size: 14px;
  line-height: 20px;
}

.bs-icon-md.bs-icon-rounded.bs-icon-primary.bs-icon {
  background: #fff;
  color: var(--bs-primary);
}

#code-editor {
  background: #ccc;
  color: #33363a;
}

#devmessage {
  display: block;
  width: 100%;
}

a, a.visited {
  color:#3e84ff;
}

#callout {
  background: var(--bs-gray-200);
  border-left: 5px solid var(--bs-primary);
  font-size: 14px;
  font-weight: 900;
}

:root, [data-bs-theme=light] {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #33363A;
  --bs-secondary: #8C8C8C;
  --bs-accent: #473F39;
  --bs-highlight: #CC5A5A;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13,110,253;
  --bs-secondary-rgb: 108,117,125;
  --bs-success-rgb: 25,135,84;
  --bs-info-rgb: 13,202,240;
  --bs-warning-rgb: 255,193,7;
  --bs-danger-rgb: 220,53,69;
  --bs-light-rgb: 248,249,250;
  --bs-dark-rgb: 33,37,41;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255,255,255;
  --bs-black-rgb: 0,0,0;
  --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33,37,41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255,255,255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0,0,0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33,37,41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233,236,239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33,37,41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248,249,250;
  --bs-heading-color: inherit;
  --bs-link-color: #0d6efd;
  --bs-link-color-rgb: 13,110,253;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #0a58ca;
  --bs-link-hover-color-rgb: 10,88,202;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
}

.bs-icon-md.bs-icon-rounded.bs-icon-primary.bs-icon {
  font-size: 40px;
}

#brandcards img {
  width: 100%;
  margin-bottom: 20px;
}

.brandcolorhighlight {
  background: var(--bs-highlight);
  color: #fff;
}

.brandcoloraccent {
  background: var(--bs-accent);
  color: #ccc;
}

.brandcolorsecondary {
  background: var(--bs-secondary);
  color: #333;
}

.brandcolorprimary {
  background: var(--bs-primary);
  color: #ccc;
}

.card {
  --bs-card-border-radius: 0!important;
  --bs-card-inner-border-radius: 0!important;
}

.list-group {
  --bs-list-group-border-radius: 0;
}

#weblogo {
  display:flex;
  align-items:center;
  gap:50px;
}
#weblogo a {
  display: inline-block;
}
#weblogo svg {
  display:block;
}


/* Mobile (landscape) */
@media (max-width: 768px) {
  .counter-container {
    display:none;
    visibility: hidden;
  }
  #MainContain {
    margin: 0 auto;
    text-align:left;
    display:flex;
    justify-content: center;
    margin-left:0;
  }
  #contentcol {
    border-left:0;
    padding-left:0;
    padding:30px;
  }
  .menu {
    justify-content: center;
  }

}


/* Mobile (portrait) */
@media (max-width: 480px) {
  #contentcol {
    width:100%;
    padding:20px;
  

  }
  }