:root{
    --background: #000000;
    --primary-color: #211F23;
    --primary-color-hover: rgb(48, 48, 48);
    --secondary-color: rgb(255, 183, 0);
    --secondary-color-hover: darkorange;
    --secondary-color-dark: rgb(255, 51, 0);
    --third-color: green;
    --third-color-hover: rgb(0, 255, 0);
    --golden: linear-gradient(-45deg, darkorange,  yellow,darkorange);
    --golden-hover: linear-gradient(-45deg, darkorange,  yellow,darkorange);
    
}
html {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color-hover) var(--primary-color); /* thumb color | track color */
}

@font-face {
    font-family: "Pixel";
    src: url("fonts/determination.ttf");
}

@keyframes hover{
    from{
        transform: scale(1,1);
    }
    to{
        transform: scale(1.35,1.35);
    }
}
*{
    text-decoration: none;
    font-weight: normal;
    color: white;
    font: "Pixel";
    font-family: "Pixel";
   text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;

}

select{
    background: var(--background);
    border-radius: None;
    outline: NOne;
}
img{
    transform: scale(0.7,0.7);
    width: 100%;
    height: 220px;
    object-fit: contain;
      -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+/Edge */
  user-select: none;         /* Standard */
}
p{
    word-break: break-all;
}
body{
background: #000000;
}
/* Keeps the custom image the same size as the surrounding text */
.emoji {
  height: 1.2em;
  width: auto;
  vertical-align: middle;
  display: inline-block;
}
img {
  -webkit-user-drag: none; /* Safari, Chrome, Edge */
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;         /* Standard property */
}

.center{
     margin: 0;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
input:hover{
    cursor: pointer;
    background: var(--golden-hover);
    filter: brightness(150%);
}
button:not(.hamburger-menu):hover{
    cursor: pointer;
    background: var(--golden-hover);
    filter: brightness(150%);
}

input{
      -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+/Edge */
  user-select: none;         /* Standard */
    outline: none;
    border: none;
    text-align: center;
    transition: transform 0.15s ease-in-out;
    background: var(--golden);
    justify-content: center;
}
button{
          -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+/Edge */
  user-select: none;         /* Standard */
    outline: none;
    border: none;
    transition: transform 0.15s ease-in-out;
    background: var(--golden);

}
img::before {
  background-image: url('https://cdn.discordapp.com/embed/avatars/0.png');
  background-size: cover;
}
input[type="text"]::placeholder,input[type="number"]::placeholder{
  text-shadow: none;
    color: var(--primary-color-hover);
    outline: none;
    border: none;
}
input[type="text"], input[type="number"]{
      color: white;
    background: var(--primary-color);
text-align: left;
}
main{
  flex: 1;
}
.hyperlink{
  color: cyan;
}
input[type="text"]:hover, input[type="number"]:hover{
  filter: none;
    cursor: text;
background: var(--primary-color)
}
.buttons{
    display: grid;
    gap:2px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

nav{
    overflow: auto;
    position: fixed;
    left: 0%;
    top:0%;
     height: 100%;
    background: var(--primary-color)
}
ul {
    
    gap: 10px;
    /* Hide the navigation links by default for mobile */
     
    /* Additional styling for mobile menu (e.g., vertical layout) */
   
    top: 0%;
    left: 0%;
    text-decoration: none;
    
    /* ... other mobile styles ... */
}
button:disabled {
  background: var(--primary-color);
  interaction: none;
  pointer-events: none;
}
button:hover:disabled {
  pointer-events: none;
  background: var(--primary-color);
}
.hamburger-menu{
   font-family: sans-serif;
  text-shadow: none;
    border: none;
    outline: none;
    background: transparent;
    display: block;
    position: fixed;
}
.hamburger-menu:hover{
    cursor: pointer;
}
li{
    position: relative;
    right: 30;
 list-style-type: none;
}
li a{
text-decoration: none;
}
#profileBtn{
    position: fixed;
    right: 0px;
    
    align-self: left;
}
.category{
    font-size: large;
      display: block; /* Ensures it starts on a separate line */
  line-height: 1.6; /* Adds vertical spacing */
}
.product{
    border-radius: 2%;
    transition: transform 0.15s ease-in-out;
    width: 180px;
    height: 180px;
    background: var(--primary-color)
}
.product:hover{
    transform: scale(1.1,1.1);
    background: linear-gradient(-45deg, darkorange,  yellow,darkorange);
}


.product img{
    height: 150px;
}
#buy{
    width: 180px;
}

.vip {

}

@keyframes MoveBackgroundPosition { 
  0% {
      background-position: 0% 50%
  }
  
  50% {
    background-position: 100% 50%
  }
  
  100% {
    background-position: 0% 50%
  }
}
@keyframes move-bg {
  from { background-position: 0 0; }
  to { background-position: 100% 100%; } /* Moves it horizontally */
}

.goldbtn:not(:disabled){
  
  background: linear-gradient(-45deg, darkorange,  yellow,darkorange);
}
.goldbtn:hover.goldbtn:not(:disabled){
  transform: scale(1.1,1.1);
}
/* Checkbox */
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 1px;
  height: 1px;
}
.floating{
  position: relative;
  animation: animate-floating 3s ease-in-out infinite;
}
.glow{
  filter: drop-shadow(0 0 15px rgba(255, 174, 0, 0.8));
}
@keyframes animate-floating {
  0%
  {
    
    bottom: 0;
  }
  50%{
    bottom: -12px;
  }
  100%{
    bottom: 0;
  }
}
.divTable {
  display: table;
  border-collapse: collapse; /* Merges borders */
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #ccc;
  padding: 8px;
}