:root{font-size: 18px;}
[data-theme="dark"] {
   	--color-bg: rgb(0, 0, 0);
	--color-obg: rgb(39, 39, 41);
   	--color-fg: rgb(248, 248, 255);
	--color-bdr: rgb(255, 215, 0);
}

[data-theme="light"] {
  	--color-bg: rgb(248, 248, 255);
 	--color-obg: rgb(215, 215, 222);
  	--color-fg: rgb(0, 0, 0);
	--color-bdr: rgb(200, 170, 1);
}
html{ --top-spacing: 109px;
  	scroll-padding-top: var(--top-spacing);
	height: 100%;
    margin: 0; padding: 0;
}
body {
 	background-color: var(--color-bg);
  	color: var(--color-fg);
  	text-align: center; font-family: "Atkinson Hyperlegible Next", sans-serif;
  	padding: 0px; margin: 0px;
	height: 100%;
	margin: var(--top-spacing) auto;
	overflow-x: hidden;
	overflow-y: auto;
}
body a{color: var(--color-fg); font-family: "Atkinson Hyperlegible Next", sans-serif;}
h1{font-family: "Atkinson Hyperlegible Next", sans-serif;}
h2{font-family: "Atkinson Hyperlegible Next", sans-serif;}
h3{font-family: "Atkinson Hyperlegible Next", sans-serif;}
h4{font-family: "Atkinson Hyperlegible Next", sans-serif;}
h5{font-family: "Atkinson Hyperlegible Next", sans-serif;}

#dbanner{
	width: 100%; height: 250px; left: 0px; top: 0px;
	padding: 0px; margin: 0px; scroll-padding-top: 0px;
	text-align: center;
	background-color: rgba(116, 7, 225, 0.478);  
	float: left;
	position: relative;
	z-index: 1;
}
.bannerSlides{height: 250px; width: 100%;}
.displaybanner{display:center; position: absolute;
	bottom: 5px; 
	color: rgb(248, 248, 255); 
	z-index: 2;
}
.disply-button {font-size: 25px; color: rgb(248, 248, 255); text-decoration: none;
	background-color: rgb(0, 0, 0); background-color: transparent; box-shadow: none; border: 0px;
}
.disply-button:hover {color: rgb(116, 7, 225); background-color: transparent;}
.displaybadge {font-size: 45px; color: rgb(248, 248, 255); text-decoration: none; 
	z-index: 2; background-color: transparent; box-shadow: none; border: 0px;
}
.displaybadge:hover {color: rgb(116, 7, 225);}
.topbanner{display:none;}

.dmainbody{ padding-top: 10px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;
	width: 80%;
	text-align: left;
	z-index: 1;
}

.darticles{
	border-radius: 15%; margin: 10px;
	position: relative; display: flex; float: left; flex-wrap: wrap;
	left: 50%; transform: translate(-50%, 0);
	padding-top: 10px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;
	width: 95%; 
	text-align: center; justify-content: center; 
	background-color: rgba(24, 1, 52, 0.56);
	z-index: 1;
}
.darticles a:hover{color: rgb(116, 7, 225);}
#boxtitle{
	display: inline-block;
	width: 100%;
	top: 0px;
}
#leadarticle{
	display: inline-block;
	width: 40%;
	padding-left: 5%; padding-right: 5%;

}
#articlelist{
	padding-left: 5%;
	display: inline-block;
	width: 35%;
	align-items: center; text-align: left; justify-content: center; 
}

.dicemat{
	display: none; justify-content: center; align-items: center;
	position: fixed; right: 50px; bottom: 10px;
	background-color: rgb(0, 0, 0);
	color: rgb(248, 248, 255); font-size: 25px; text-align: center;
	border-radius: 25%; padding-left: 10px; padding-right: 10px;
	width: 200px; height: 150px;
	z-index: 2000;
}
.dicemat.visible{
	display: block;
}
.matbutton{font-size: 10px; float: left; color: rgb(248, 248, 255); background-color: rgb(0, 0, 0);}
.matflipbutton{font-size: 10px; float: left; display: none; color: rgb(248, 248, 255); background-color: rgb(0, 0, 0);}
.matflipbutton.visible{display: block;}
.matlgbutton{font-size: 10px; float: left; display: none; color: rgb(248, 248, 255); background-color: rgb(0, 0, 0);}
.matlgbutton.visible{display: block;}
#dievalue{display: none;}
.dicecounter{display: none; 
	width:5px; 
	font-size: 10px; color: rgb(248, 248, 255);
	position: absolute;  right: 8px; top: 5px; 
	padding: 0px;}
.dicecounter.visible{display: block;}

.roll-button{
    display: none;
    height: 40px; width: 40px;
  	padding: 0; border-radius: 50%;
    color: rgb(248, 248, 255); 
  	background-color: rgb(0, 0, 0);
  	align-items: center; justify-content: center; overflow: hidden;
    position: fixed; bottom: 10px; right: 55px; z-index: 2000;
    }
.roll-button.revealed{display: block;}

#dicemain{
  	height: 40px; width: 40px;
  	padding: 0; margin: 0;
  	border-radius: 50%;
  	background-color: var(--base-variant);
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	position: fixed; bottom: 10px; right: 10px;
  	overflow: hidden;
  	z-index: 2000;
}
.dicebutton{
  	height: 40px; width: 40px;
  	padding: 0; 
  	border-radius: 50%;
  	background-color: rgb(0, 0, 0);
  	align-items: center; justify-content: center;
  	overflow: hidden; position: relative;
	
}
#dicemodeswitch{
	height: 40px; width: 40px;
  	padding: 0; 
 	border-radius: 50%;
	background-color: rgb(0, 0, 0);
 	align-items: center; justify-content: center;
 	overflow: hidden;
  	display: flex;
}
[data-dicemode="2d"] #dicemodeswitch{
  background-image: url("../images/2d_mode.png");
  background-repeat: no-repeat;
  background-size: 37px;
}
[data-dicemode="3d"] #dicemodeswitch{
	background-image: url("../images/dice.png");
	background-repeat: no-repeat;
 	background-size: 37px;
}

#advmode{flex-wrap: wrap;}
.advbutton{width:20px; font-size: 10px; float: left; color: rgb(248, 248, 255); background-color: rgb(0, 0, 0); padding: 0px;}
.advbutton.active{color: rgb(0, 0, 0); background-color: rgb(173, 255, 47);}
.disadvbutton{width:20px; font-size: 10px; float: left; color: rgb(248, 248, 255); background-color: rgb(0, 0, 0); padding: 0px;}
.disadvbutton.active{background-color: rgb(139, 0, 0);}

/*Drop up button test*/
.dropup {
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

.dropup-content {
  display: none;
  position: fixed;
  bottom: 60px; /* Positions the menu above the button */
  right: 13px;
  max-width: 40px; 
  box-shadow: 0px -8px 16px 0px rgba(0,0,0,0.2); /* Shadow upward */
  z-index: 1;
}
.dropup-content.revealed {
	display: inline-block;
}
.dropup-content img{
  padding: 0px; margin: 0px; width: 30px;
}

/**Responseive Text Start**/
@media screen and (min-width: 701px) {
  	body {font-size: 1rem;}
  	h1 {font-size: 3.9rem;}
  	h2 {font-size: 2.7rem;}
	h3 {font-size: 2rem;}
	h4 {font-size: 1.4rem;}
	h5 {font-size: 1.1rem;}
}
@media screen and (min-width: 601px) and (max-width: 700px) {
  	body {font-size: 1rem;}
  	h1 {font-size: 3.9rem;}
  	h2 {font-size: 2.7rem;}
	h3 {font-size: 2rem;}
	h4 {font-size: 1.4rem;}
	h5 {font-size: 1.1rem;}
}
@media screen and (min-width: 451px) and (max-width: 600px) {
    body {font-size: 0.8rem;}
	body a{font-size: 0.8rem;}
    h1 {font-size: 1.6rem;}
    h2 {font-size: 1.1rem;}
	h3 {font-size: 1rem;}
	h4 {font-size: 0.9rem;}
	h5 {font-size: 0.8rem;}
	html{--top-spacing: 0px;}	
	#dbanner{margin-top: 40px; padding-top: 0px;}
	.topbanner{margin-top: 0px; padding-top: 0px; height: 45px; display:block;}    
	.topbanner.responsive {margin-top: 0px; padding-top: 0px; height: 0px;}
}
@media screen and (max-width: 450px) {
    body {font-size: 0.8rem;}
	body a{font-size: 0.8rem;}
    h1 {font-size: 1.6px;}
    h2 {font-size: 1.1rem;}
	h3 {font-size: 1rem;}
	h4 {font-size: 0.9rem;}
	h5 {font-size: 0.8rem;}
	html{--top-spacing: 0px;}	
	#dbanner{margin-top: 40px; padding-top: 0px;}
	.topbanner{margin-top: 0px; padding-top: 0px; height: 45px; display:block;}    
	.topbanner.responsive {margin-top: 0px; padding-top: 0px; height: 0px;}
}
/**Responseive Text end**/