@font-face {
    font-family: 'Poppins';
    src: url('Poppins-Regular.woff2') format('woff2'),
        url('Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@keyframes glowingEffect-gold {
    0%, 100% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255,1)); /* Fully transparent */
    }
    20% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255,1)); /* Red with 50% opacity */
    }
    40% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255,1)); /* Gold with 50% opacity */
    }
    60% {
        filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.5)); /* Red with 50% opacity */
    }
    80% {
        filter: drop-shadow(0 0 40px rgba(255, 215, 0, 1)); /* Gold with 50% opacity */
    }
}

.glowing-animation-gold {
    animation: glowingEffect-gold 15s;
}

@keyframes glowingEffect-red {
    0%, 100% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255,1)); /* Fully transparent */
    }
    20% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255,1)); /* Red with 50% opacity */
    }
    40% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255,1)); /* Gold with 50% opacity */
    }
    60% {
        filter: drop-shadow(0 0 40px rgba(255, 0, 0, 0.5)); /* Red with 50% opacity */
    }
    80% {
        filter: drop-shadow(0 0 40px rgba(255, 0, 0, 1)); /* Gold with 50% opacity */
    }
}

.glowing-animation-red {
    animation: glowingEffect-red 15s;
}

@keyframes glowingEffect-blue {
    0%, 100% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255,1)); /* Fully transparent */
    }
    20% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255,1)); /* Red with 50% opacity */
    }
    40% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255,1)); /* Gold with 50% opacity */
    }
    60% {
        filter: drop-shadow(0 0 40px rgba(4, 147, 245, 0.5)); /* Red with 50% opacity */
    }
    80% {
        filter: drop-shadow(0 0 40px rgba(4, 147, 245, 1)); /* Gold with 50% opacity */
    }
}

.glowing-animation-blue {
    animation: glowingEffect-blue 15s;
}

@keyframes glowingEffect-green {
    0%, 100% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255,1)); /* Fully transparent */
    }
    20% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255,1)); /* Red with 50% opacity */
    }
    40% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255,1)); /* Gold with 50% opacity */
    }
    60% {
        filter: drop-shadow(0 0 40px rgba(14, 228, 76, 0.5)); /* Red with 50% opacity */
    }
    80% {
        filter: drop-shadow(0 0 40px rgba(14, 228, 76, 1)); /* Gold with 50% opacity */
    }
}

.glowing-animation-green {
    animation: glowingEffect-green 15s;
}

:root {
    --mainBackground: #352F44;
    --raffleRollerBackground: #323232;
    --itemBackground: #01101e;

    --rollerWidth: 300rem;
    --rollerHeight: 18rem;

    --itemSize: 15rem;

    --colorWidth: .5rem;
    --colorMilSpec: #000000;
    --colorDoubleup: gold;
	--colorBattleCall: #BF360C;
    --colorgumbodecides: #f44336;
	--colorChristmasMiracles: #2986cc;
	--color10freebattle: #2986cc;
	--color30BattleCall: #2986cc;
	--colorMineCall: #fffc00;
	--colorReSpin: #ffffff;
	--colorMystery: #2986cc;
    --color10gemtip: #eb4b4b;
    --colorRare: gold;
	--color50gem: gold;
}


.dropdown {
    position: absolute; /* Position it absolutely */
    top: 10px; /* Adjust as needed to position the menu on the top left */
    left: 10px; /* Adjust as needed to position the menu on the top left */
}

.dropbtn {
  background-image: url('dropdownmenu2.png');
  background-repeat: no-repeat;
  background-size: 30px; /* Adjust the size of the image */
  background-position: center; /* Center the image within the button */
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.show {
    display: block;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { font-size: 10px; }

.message {
    text-align: left;
    background-color: rgba(33, 33, 33, 0.8);
    padding: 10px;
    border-radius: 5px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

body {
    display: flex;
    gap: 2rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: #fff;
	background: linear-gradient(86deg, #141E30 0%, #243B55 64%);
	overflow-x: hidden; /* Prevent horizontal scrolling */
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-weight: 400;
}

img {
    border: 0;
    vertical-align: middle;
	
	
}
.header {
    position: absolute;
    top: 10px;
    right: 10px;
}


.intro img {
    max-width: 30rem;
}

.alt-header {
    position: fixed;
    top: 15%;
    left: 2%;
    font-size: 24px; /* Adjust font size as needed */
}

.alt-header p {
    margin: 0 5%; /* Reset default margin */
    font-size: 20px; /* Set the font size to the smallest desired size */
	white-space: nowrap; /* Prevent text from wrapping */
}

.alt-header2 {
    position: fixed;
    top: 15%;
    left: 52%;
    font-size: 24px; /* Adjust font size as needed */
}

.alt-header2 p {
    margin: 0 52%; /* Reset default margin */
    font-size: 20px; /* Set the font size to the smallest desired size */
	white-space: nowrap; /* Prevent text from wrapping */
}

.centerbar2, .percentages2 {
    margin: 0 50%; /* Add margin to create space */
    font-size: 20px; /* Set the font size to the smallest desired size */
    position: fixed;
    top: 18%; /* Adjust the top position as needed */
}

.centerbar2 {
    left: 65%; /* Adjust the left position for centerbar */
}

.percentages2 {
    left: 65%; /* Adjust the left position for percentages */
}

.centerbar2 {
    margin-right: 5%; /* 5% space between centerbar and percentages */
}

.percentages2 {
    margin-left: 5%; /* 5% space between percentages and centerbar */
}

.centerbar, .percentages {
    margin: 0 5%; /* Add margin to create space */
    font-size: 20px; /* Set the font size to the smallest desired size */
    position: fixed;
    top: 18%; /* Adjust the top position as needed */
}

.centerbar {
    left: 20%; /* Adjust the left position for centerbar */
}

.percentages {
    left: 25%; /* Adjust the left position for percentages */
}

/* Apply spacing between the elements */
.centerbar {
    margin-right: 5%; /* 5% space between centerbar and percentages */
}

.percentages {
    margin-left: 5%; /* 5% space between percentages and centerbar */
}
.message {
    display: none;
}

.winMessage {
    position: fixed;
    top: 18%;
    left: 20%;
    font-size: 18px; /* Adjust font size as needed */
}
.bar {	
	position: flex;
	color: white;
	margin: 200px; /* Adjust spacing as needed */
    top: 15%;
    left: 2%;
    font-size: 24px; /* Adjust font size as needed */
}

.subtext {
    font-size: 18px; /* Adjust font size for subtext */
}

.golden-left-text {
	position: flex;
	color: gold;
	font-size: 18px;
	text-align: left;
}


.red-left-text {
	color: #eb4b4b;
	font-size: 18px;
	text-align: left;
}

.purple-left-text {
	color: rgba(4, 147, 245, 1);
	font-size: 18px;
	text-align: left;
}

.green-left-text {
	color: rgba(14, 228, 76, 1);
	font-size: 18px;
	text-align: left;
}

.yellow-left-text {
	color: yellow;
	font-size: 18px;
	text-align: left;
}

.white-left-text {
	color: white;
	font-size: 18px;
	text-align: left;
}

.left-text {
	font-size: 18px;
	text-align: left;
}

.centered-text {
	font-size: 24px;
    margin: 0; /* Adjust spacing as needed */
	z-index: 10;
}

.right-text {
	color: white;
	font-size: 18px;
	text-align: right;
}

.item.class_covert_item {
}

.item.class_classified_item {
}

.item.class_rare_item {
}
.item.class_rare_item .rareIcon {
}

.item.class_50gem_item {
}


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.raffle-roller {
    position: relative;
    width: var(--rollerWidth);
    height: calc(var(--rollerHeight) - .7rem);
    background: var(--raffleRollerBackground);
    border: 1px solid var(--raffleRollerBackground);
    border-radius: 0rem;
    border-width: 0 1rem;
    overflow: hidden;
    z-index: 2;
    opacity: 0; /* Start invisible */
    transition: opacity 1s ease-in-out; /* Smooth fade transition */
}

.raffle-roller.fade-in {
    animation: fadeIn 1s forwards; /* Apply fade-in animation */
}

.raffle-roller.fade-out {
    animation: fadeOut 1s forwards; /* Apply fade-out animation */
}

.raffle-roller-holder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--rollerHeight);
}

.raffle-roller-holder:before {
    content: "";
    position: absolute;
    width: .5rem;
    height: 100%;
    left: 50%;
    background: #fff;
    border: unset;
    z-index: 999999;
}

.raffle-roller-container {
    display: flex;
    gap: 1rem;
    width: 50000rem;
    max-width: 50000rem;
    height: var(--rollerHeight);
    margin: 1rem;
    margin-left: 0;
    transition: all 8s cubic-bezier(.01, .01, .25, 1);
}

.generic-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%; /* Adjust to the desired size */
    height: auto; /* Maintains aspect ratio */
    opacity: 0.8; /* Makes the logo semi-transparent */
    z-index: 1; /* Places it behind the raffle roller */
    pointer-events: none; /* Prevents interaction with the image */
    opacity: 1; /* Start invisible */
    transition: opacity 1s ease-in-out; /* Smooth fade transition */
}

.generic-logo.fade-in {
    opacity: 1;
}

.generic-logo.fade-out {
    opacity: 0;
}

.item {
    width: var(--itemSize);
    height: var(--itemSize);
    border: 1px solid var(--mainBackground);
    border-radius: 2rem;
    border-width: 0 1rem;
    background: var(--itemBackground) center center no-repeat;
    background-size: calc(100% - 1rem);
}

.winning-item {
    transform: scale(1.1);
    transition: .6s ease-in-out;
    text-align: center;
}

.class_milSpec_item {
    border-bottom: var(--colorWidth) solid var(--colorMilSpec);
}

.text--class_milSpec_item {
    color: var(--colorMilSpec);
}

.class_Doubleup_item {
    border-bottom: var(--colorWidth) solid var(--colorDoubleup);
}

.text--class_Doubleup_item {
    color: var(--colorDoubleup);
}

.class_gumbodecides_item {
    border-bottom: var(--colorWidth) solid var(--colorgumbodecides);
}

.text--class_gumbodecides_item {
    color: var(--colorgumbodecides);
}

.class_BattleCall_item {
    border-bottom: var(--colorWidth) solid var(--colorBattleCall);
}

.text--class_BattleCall_item {
    color: var(--colorBattleCall);
}
.class_ChristmasMiracles_item {
    border-bottom: var(--colorWidth) solid var(--colorChristmasMiracles);
}

.text--class_ChristmasMiracles_item {
    color: var(--colorChristmasMiracles);
}

.class_Mystery_item {
    border-bottom: var(--colorWidth) solid var(--colorMystery);
}

.text--class_Mystery_item {
    color: var(--colorMystery);
}

.class_10freebattle_item {
    border-bottom: var(--colorWidth) solid var(--color10freebattle);
}

.text--class_10freebattle_item {
    color: var(--color10freebattle);
}

.class_30BattleCall_item {
    border-bottom: var(--colorWidth) solid var(--color30BattleCall);
}

.text--class_30BattleCall_item {
    color: var(--color30BattleCall);
}

.class_MineCall_item {
    border-bottom: var(--colorWidth) solid var(--colorMineCall);
}

.text--class_MineCall_item {
    color: var(--colorMineCall);
}

.class_ReSpin_item {
    border-bottom: var(--colorWidth) solid var(--colorReSpin);
}

.text--class_ReSpin_item {
    color: var(--colorReSpin);
}
.class_10gemtip_item {
    border-bottom: var(--colorWidth) solid var(--color10gemtip);
}

.text--class_10gemtip_item {
    color: var(--color10gemtip);
}

.class_rare_item {
    border-bottom: var(--colorWidth) solid var(--colorRare);
}

.text--class_rare_item {
    color: var(--colorRare);
}

.class_50gem_item {
    border-bottom: var(--colorWidth) solid var(--color50gem);
}

.text--class_50gem_item {
    color: var(--color50gem);
}

#rolled {
    position: center; /* Position it relative to the viewport */
    top: 60%; /* Adjust as needed */
    z-index: 999; /* Ensure it's on top of other elements */
}

.winning-message {
    position: fixed;
    font-size: 24px; /* Adjust font size as needed */
	border: 5px;
}


.case-buttons {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px; /* Adjust font size as needed */
	text-align: left;
}

.case-buttons button {
    color: white;
	font-size: 20px;
	border: 1px solid white;
	padding: 10px 20px;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 1);
	transition: background-color 0.3s, color 0.3s;
	border: 1px solid white;
	margin: 20px;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 1rem 2rem;
    outline: unset;
    border-radius: 1rem;
    cursor: pointer;
	text-align: left;
}

.case-buttons button:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.case-buttons button:disabled {
    color: rgba(255, 255, 255, 0.5); /* Lighter text color */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Lighter border */
    background-color: rgba(1, 16, 30, 0.5); /* Lighter background color */
    cursor: not-allowed; /* Change cursor to indicate the button is disabled */
    opacity: 0.6; /* Slightly faded appearance */
}

.inventory:empty {
    padding: unset;
}

.inventory {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    width: 147.5rem;
    max-width: 147.5rem;
    height: auto;
    background: var(--raffleRollerBackground);
    margin: .5rem auto;
    padding: .5rem;
}

#fortune-wheel-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 15;
    width: 630px; /* Container width */
    height: 630px; /* Container height */
    text-align: center;
	z-index: 100;
}

#fortune-wheel {
    width: 100%; /* Scale to container size */
    height: 100%; /* Scale to container size */
    z-index: 105;
}

#fortune-flapper {
    position: absolute;
    width: 100%; /* Match the container's width */
    height: 100%; /* Match the container's height */
    top: 0; /* Position it at the top */
    left: 0; /* Align with the left edge */
    z-index: 110;
}

#spin-button  {
    position: fixed;
    top: 85%;
    right: 47.2%;
    color: #fff;
    background: #000000;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 1rem 2rem;
    outline: unset;
    border: unset;
    border-radius: 1rem;
    cursor: pointer;
	text-align: left;
	display: none;
}

#spin-button:hover {
	color: #18141c;
    background-color: white; /* Darker shade of the background color */
}

#fortune-wheel-container2 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 15;
    width: 630px; /* Container width */
    height: 630px; /* Container height */
    text-align: center;
	z-index: 100;
}

#fortune-wheel2 {
    width: 100%; /* Scale to container size */
    height: 100%; /* Scale to container size */
    z-index: 105;
}

#fortune-flapper2 {
    position: absolute;
    width: 100%; /* Match the container's width */
    height: 100%; /* Match the container's height */
    top: 0; /* Position it at the top */
    left: 0; /* Align with the left edge */
    z-index: 110;
}

#spin-button2  {
    position: fixed;
    top: 85%;
    right: 47.2%;
    color: #fff;
    background: #000000;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 1rem 2rem;
    outline: unset;
    border: unset;
    border-radius: 1rem;
    cursor: pointer;
	text-align: left;
	display: none;
}

#spin-button2:hover {
	color: #18141c;
    background-color: white; /* Darker shade of the background color */
}

#fortune-wheel-container3 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 15;
    width: 630px; /* Container width */
    height: 630px; /* Container height */
    text-align: center;
	z-index: 100;
}

#fortune-wheel3 {
    width: 100%; /* Scale to container size */
    height: 100%; /* Scale to container size */
    z-index: 105;
}

#fortune-flapper3 {
    position: absolute;
    width: 100%; /* Match the container's width */
    height: 100%; /* Match the container's height */
    top: 0; /* Position it at the top */
    left: 0; /* Align with the left edge */
    z-index: 110;
}

#spin-button3  {
    position: fixed;
    top: 85%;
    right: 47.2%;
    color: #fff;
    background: #000000;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 1rem 2rem;
    outline: unset;
    border: unset;
    border-radius: 1rem;
    cursor: pointer;
	text-align: left;
	display: none;
}

#spin-button3:hover {
	color: #18141c;
    background-color: white; /* Darker shade of the background color */
}

#fortune-wheel-container4 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 15;
    width: 630px; /* Container width */
    height: 630px; /* Container height */
    text-align: center;
	z-index: 100;
}

#fortune-wheel4 {
    width: 100%; /* Scale to container size */
    height: 100%; /* Scale to container size */
    z-index: 105;
}

#fortune-flapper4 {
    position: absolute;
    width: 100%; /* Match the container's width */
    height: 100%; /* Match the container's height */
    top: 0; /* Position it at the top */
    left: 0; /* Align with the left edge */
    z-index: 110;
}

#spin-button4  {
    position: fixed;
    top: 85%;
    right: 47.2%;
    color: #fff;
    background: #000000;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 1rem 2rem;
    outline: unset;
    border: unset;
    border-radius: 1rem;
    cursor: pointer;
	text-align: left;
	display: none;
}

#spin-button4:hover {
	color: #18141c;
    background-color: white; /* Darker shade of the background color */
}

#prize-message {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 24px;
    padding: 20px;
    border-radius: 10px;
    z-index: 500;
    text-align: center;
}

#RandomNumbers {
    position: absolute;
    right: 15%; /* Adjust left position as needed */
    top: 10px; /* Adjust top position as needed */
    width: 400px; /* Adjust width as needed */
    padding: 10px;
    font-size: 1em;
    border: 1px solid white;
    border-radius: 5px;
    color: white; /* Text color */
    background-color: transparent;
    outline: none; /* Remove default focus outline */
	text-shadow: 0 0 2px black; /* Black outline effect */
	background-color: rgba(128,128,128,0.4);
    z-index: 1000; /* Ensures it stays on top of other elements */
}

#GiveawayWinners {
    position: fixed;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    z-index: 1000; /* Ensure it appears above other content */
    font-size: 1em;
    border: 1px solid white;
    border-radius: 5px;
    font-weight: bold;
	transition: opacity 1s ease-in-out; /* Smooth fade transition */
}

#GiveawayWinners.fade-in {
    opacity: 1;
}

#GiveawayWinners.fade-out {
    opacity: 0;
}