:root {
  --main_bg: rgb(19,6,41);
  --sec_bg: rgb(21,8,33);
  --accent: rgb(167,118,251);
  --accent2: rgb(212,35,152);
  --main_tx: rgb(211,171,254);
  --sec_tx: rgb(249,214,195);

  
  --tx_s: 1.0em;
  --puw: 83vw;


  
}



header, body {
	background: var(--main_bg);
	color: var(--main_tx);
	font-size: var(--tx_s);
	font-family: "Ubuntu";
	font-weight: 300;
	text-align: justify;
	
}

header {
	height: 4em;
	max-height: 4em;
}

nav {
	background: var(--sec_bg);
}

@media (min-width: 1198px) {
	.navmenu {
		display: block !important;
	}
	.nav-link {
		font-size:1.1em;
	}
}

.nav-link {
	color: var(--main_tx);
	font-weight: bold;
	margin: 1em;
	padding: 0em 1em 0em;
	font-size:0.7em;
}


main {
	margin-top: 5em;
}

main a {
	text-decoration: none;
	color: var(--main_tx);
}

h1,h2,h3,h4 {
	margin-top: var(--tx_s);
	text-align: center;
}

.bbcont {
	
	margin: 1.2em 2em;
	justify-content: center; align-items: center;
}

.bbcont2 {
	
	margin: 0;
	background-color: var(--sec_bg);
}

.bonusbtn {
	min-width: 35vw;
	padding: 0.5em;
	margin: auto;
	background-color: var(--sec_bg);
	border-color: var(--accent2);
	border-width: 4px;
	color: var(--accent)!important;
	text-align: center;
	display: flex;
	position: relative;
}

.bonusbtn2 {
	max-width: 50vw;
	margin: 1.5em auto;
}

.bonusbtn3 {
	max-width: 50vw;
	margin: 1.5em auto;
	border-color: var(--accent2);
	color: var(--accent2)!important;
}

.nav0 {
	width: calc(var(--puw) + 10vw);
}

.nav1 {

	height: 3em;
	min-height: 40px;
	margin: 1em;
}

.nav2 {
	max-height: 3em;
	margin-top: 4em;
}

.bottomicons {
	margin-bottom: 1em;
}

.text-muted {
	margin-bottom: 7em;
}

.custom-toggler .navbar-toggler-icon {
	background-image: url("../img/cosmolot-menu.png");
	background-size: contain;
}

.custom-toggler.navbar-toggler {
	
 	border-width: 0;
} 

.nav2 img {
	position: absolute;
	top: 5em;
	left: 50%;
	transform: translateX(-50%);
}

table tr td {
	border-color: var(--main_tx);
 	border-width: 0.1em;
 	padding: 0.2em;
 	font-size: 0.75em;
 	text-align: left;
}

table tr th {
	border-color: var(--main_tx);
 	border-width: 0.1em;
 	padding: 0.2em;
 	font-size: 0.8em;
 	text-align: center;
 }

.slotgame {
	max-width: 23vw;
	display:block;
	margin:2vw;
}


.tximg {
	max-width: calc(var(--puw) + 10vw - 2em);
	display:block;
	margin:auto;
}

.logoimage {
	max-width: calc(40vw - 4em);
	max-height: 7em;
	display:block;
	margin:auto;
}

.introimage {
	max-width: calc(40vw - 2em);
	max-height: calc(40vw - 2em);
	display:block;
	margin:0;
}

.intro {
	max-width: calc(44vw + 2em);
}

.goto {
	border-color: var(--accent);
	border-width: 4px;
	color: var(--accent);
}
.a-goto0 {
	color: var(--accent);
	border-color: var(--accent);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	margin: auto;
	display: flex;
	position: relative;
	
}

.a-goto2 {
	color: var(--accent2)!important;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	margin: 1.5em 0.5em;
	padding: 1em;
	display: flex;
	position: relative;
	background-color: var(--sec_bg);
	border-color: var(--accent2);
	border-width: 4px;
	width: 50%;	
	
}

.a-goto {
	color: var(--accent2);
	border-color: var(--accent2);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	margin: auto;
	display: flex;
	position: relative;
	
}

.a-goto3 {
	color: var(--accent);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	margin: 1.5em 0.5em;
	padding: 1em;
	display: flex;
	position: relative;
	background-color: var(--sec_bg);
	border-color: var(--accent);
	border-width: 4px;
	width: 50%;
}

.a-goto4 {
	color: var(--accent);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	margin: 1.5em 0.5em;
	padding: 1em;
	display: flex;
	position: relative;
	background-color: var(--sec_bg);
	border-color: var(--accent);
	border-width: 4px;
	width: 100%;
}

.slot {
	margin: 1em;
}
.slots {
	max-width: 20vw;
}


footer {
	background: var(--sec_bg);
	color: var(--sec_tx);
	text-align: center;
}


.popup {
	border-color: var(--accent);
	border-style: solid;
	border-width: 7px;
	background-color: var(--sec_bg);
	background-image: url("../img/ifoubf-sq-cosmolot.webp");
	background-size: cover;
	width: min(80vw, 40vh); 
	height: min(80vw, 40vh); 
	padding: 10px 10px;
	position: fixed;
	transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
	border-radius: 6px;
	display: none; 
	text-align: center;
	z-index: 3;
}
.popup button {
	padding: 0;
	display: block;
	margin:  0 0 0 auto;
	color: var(--headers);
	background-color: var(--sec_bg);
	border-radius: 100%;
	border-style: none;
	border: none;
	outline: none;
	cursor: pointer;
	line-height: normal;
}
.popup h2 {
	margin-top: -20px;
}
.popup p {
	font-size: 1.5em;
	text-transform: uppercase;
	color: var(--accent2);
	text-align: center;
	font-weight: bold;
	margin-bottom: 50px;
}
.popup a {
	display: block;
	width: min(60vw, 30vh); 
	height: 2em;
	position: relative;
	margin: min(2vw, 1.5vh) 0;
	text-align: center;
	background-color: var(--accent2) !important;
	background-image: none;
	border-radius: 6px;
	border-style: none;
	color: var(--sec_bg);
	text-decoration: none;
	font-size: 1.25em;
	font-weight: bold;
	padding: 8px 0;
	top: 34%;
}