body {
	background-color: #03081e; 
	color: #e0e0e0;
}

/* Button to toggle the menu - positioned at the top left */
.menu-toggle-btn {
    position: fixed;
    top: 0px;
    left: 5px;
    z-index: 1100; /* Ensures the button is on top of the menu */
}

/* The vertical menu - hidden by default */
.vertical-menu {
    width: 130px;
    height: 100%;
    position: fixed;
    top: 0;
    left: -130px;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.3s;
    z-index: 1000; /* Menu has a lower z-index than the button */
    padding-top: 60px;
}

/* Menu items */
.vertical-menu a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 18px;
    color: white;
    display: block;
    transition: 0.3s;
}

/* When hovered */
.vertical-menu a:hover {
    background-color: #575757;
}

/* When active */
.vertical-menu a.active {
    background-color: #0d6efd;
	color: #FFF;
}

/* Show the menu when active */
.vertical-menu.show {
    left: 0px;
}

.list_weapons, .rounded {
	background-color: #1e1e1e;
}
.progress {
	background-color: #333;
	height: 20px;
	border-radius: 10px;
	overflow: hidden;
}

.progress-bar {
	background-color: #3498db;
	height: 100%;
	transition: width 0.3s ease;
}

main.container button.play { margin-right: 0.5em;}
.btn-group-xl>.btn, .btn-xl {padding: .5rem 1rem; font-size: 3rem; border-radius: .3rem;}
footer a.text-muted:hover {color: #FFF!important}
footer a.text-muted:hover > i.fa-twitter {color: #00ACEE!important}
footer a.text-muted:hover > i.fa-youtube {color: #F00!important}
footer a.text-muted:hover > i.fa-twitch {color: #6441a5!important}
/* XS */
@media (max-width: 991px) {
	.btn-group > .btn {padding: .375rem .2rem}
	.list_weapons {padding: 1rem!important}
	.list_weapons .btn {padding: .1rem .4rem; margin-bottom: .5rem}
	
	#Quiz_container button.play{margin:0; padding: 1rem}
}