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

[data-theme="light"] {
  	--color-bg: rgb(248, 248, 255);
 	--color-obg: rgb(215, 215, 222);
	--color-obgs: rgb(212, 208, 206);
  	--color-fg: rgb(0, 0, 0);
	--color-bdr: rgb(199, 170, 8);
	--color-bdrb: rgb(45, 110, 176);
}
html{ --top-spacing: 120px;
  	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;}
h6{font-family: "Atkinson Hyperlegible Next", sans-serif;}

/*Sidebar Start*/
.sidebar{width: 15%; min-width: 100px; height: auto; min-height: 200px; max-height: 68%;
	position: fixed;
	z-index: 180; /* Stay on top */
  	top: 200px; /* Stay at the top */
  	left: 0;
	flex-wrap: wrap; display: block;
  	background-color: var(--color-bg);
  	color: var(--color-fg);
  	text-align: center; justify-content: center;
  	padding-top: 5px; border: 2px solid var(--color-bdr); border-radius: 5%;
}
.sidebartop{position: relative; height: 45px;}
.sidebartopnav{width: 100%; flex-wrap: wrap; display: flex;}
.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;}
#leftcharrow{position: absolute; left: 5px; top: 0px; color: var(--color-fg);}
#leftcharrow:hover {color: rgb(116, 7, 225); background-color: transparent;}
#contentsbutn{position: absolute; left:40%; right: 40%; top: 0px;}
#rightcharrow{position: absolute; right: 5px; top: 0px; color: var(--color-fg);}
#rightcharrow:hover {color: rgb(116, 7, 225); background-color: transparent;}
.sidebarbottom{position: relative;
	width: 100%; min-height: 250px; max-height: 390px;
	overflow-x: hidden; overflow-y: scroll;
	scrollbar-width: thin; scrollbar-color: var(--color-obg) transparent; 
}
.sidebar a {width: 100%;
  padding: 16px 8px 6px 2px;
  text-decoration: none;
  font-size: 1.2rem;
  display: block;
}
.sidebar a:hover, .sidebar a:focus, .sidebar a.active {
 	color: rgb(116, 7, 225);
}
.sidedropdown-content {display: none;}
.sidedropdown-content.active {display: block;}
.sidedropdown-content a {font-size: 1rem;}
.sidesubsub {font-size: 0.7rem; background-color: var(--color-obg);}
/*Sidebar End*/
.topbanner{display:none;}

.dmainbody{ margin-left: 15%;
	padding-top: 10px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;
	width: 80%;
	text-align: left;
	z-index: 1;
}
.dmainbody-1{padding-top: 10px; padding-bottom: 20px; padding-left: 5%; padding-right: 20px;
	width: 90%;
	text-align: left;
	z-index: 1;
}
.inlineaction{padding-inline-start: 2ch;}
.followedh{margin-bottom: 0.6rem;}
.firstp{margin-bottom: 0.6rem;}
.midp{margin-top: 0.6rem; margin-bottom: 0.6rem;}
.endp{margin-top: 0.6rem;}


	/**Table CSS**/
table{width: 100%; background-color: rgb(248, 248, 255); border-spacing: 0; color: rgb(0, 0, 0);}
th, tr, td {border: 0.5px solid rgb(248, 248, 255); padding: 5px;}	 

.full_tr {background-color: rgb(0, 0, 128); color: rgb(248, 248, 255); border: 0.5px solid rgb(0, 0, 128); border-spacing: 0;}
.full_tr th {background-color: rgb(0, 0, 128); border: 0.5px solid rgb(0, 0, 128);}
.full_tr th:first-child{text-align: left;}
.blacktable tr{background-color: rgb(50, 49, 49); color: rgb(248, 248, 255);}
.blacktable tr:nth-child(even){background-color: rgb(22, 22, 22); color: rgb(248, 248, 255);}
.blacktable th {background-color: rgb(0, 0, 0);}
.bluetable tr{background-color: rgb(30, 98, 166); color: rgb(248, 248, 255);}
.bluetable tr:nth-child(even){background-color: rgb(20, 65, 110); color: rgb(248, 248, 255);}
.bluetable th {background-color: rgb(0, 0, 128);}
.cyantable tr{background-color: rgb(111, 222, 222); color: rgb(0, 0, 0);}
.cyantable tr:nth-child(even){background-color: rgb(85, 183, 183); color: rgb(0, 0, 0);}
.cyantable th {background-color: rgb(79, 239, 239);}
.goldtable tr{background-color: rgb(238, 224, 143); color: rgb(0, 0, 0);}
.goldtable tr:nth-child(even){background-color: rgb(244, 220, 87); color: rgb(0, 0, 0);}
.goldtable th {background-color: rgb(255, 215, 0);}
.goldtable a {color: rgb(0, 0, 0);}
.gdfull_tr {background-color: rgb(255, 215, 0); color: rgb(248, 248, 255); border: 0.5px solid rgb(255, 215, 0); border-spacing: 0;}
.gdfull_tr th {background-color: rgb(255, 215, 0); border: 0.5px solid rgb(255, 215, 0);}
.gdfull_tr th:first-child{text-align: left;}
.greentable tr{background-color: rgb(169, 205, 158); color: rgb(0, 0, 0);}
.greentable tr:nth-child(even){background-color: rgb(132, 175, 120); color: rgb(0, 0, 0);}
.greentable th {background-color: rgb(2, 164, 2); color: rgb(248, 248, 255);}
.greentable a {color: rgb(0, 0, 0);}
.gfull_tr {background-color: rgb(2, 164, 2); color: rgb(248, 248, 255); border: 0.5px solid rgb(2, 164, 2); border-spacing: 0;}
.gfull_tr th {background-color: rgb(2, 164, 2); border: 0.5px solid rgb(2, 164, 2);}
.gfull_tr th:first-child{text-align: left;}
.magentatable tr{background-color: rgb(114, 56, 114); color: rgb(248, 248, 255);}
.magentatable tr:nth-child(even){background-color: rgb(73, 19, 73); color: rgb(248, 248, 255);}
.magentatable th {background-color: rgb(107, 27, 107); color: rgb(248, 248, 255);}
.redtable tr{background-color: rgb(187, 43, 43); color: rgb(248, 248, 255);}
.redtable tr:nth-child(even){background-color: rgb(133, 10, 10); color: rgb(248, 248, 255);}
.redtable th {background-color: rgb(190, 9, 9); color: rgb(248, 248, 255);}
.silvertable tr{background-color: rgb(192, 192, 192); color: rgb(0, 0, 0);}
.silvertable tr:nth-child(even){background-color: rgb(132, 132, 132); color: rgb(248, 248, 255);}
.silvertable th {background-color: rgb(212, 211, 211); color: rgb(0, 0, 0);}
.violettable tr{background-color: rgb(234, 166, 234); color: rgb(0, 0, 0);}
.violettable tr:nth-child(even){background-color: rgb(169, 93, 169); color: rgb(248, 248, 255);}
.violettable th {background-color: rgb(238, 130, 238); color: rgb(0, 0, 0);}
.yellowtable tr{background-color: rgb(230, 230, 116); color: rgb(0, 0, 0);}
.yellowtable tr:nth-child(even){background-color: rgb(218, 218, 3); color: rgb(0, 0, 0);}
.yellowtable th {background-color: rgb(255, 255, 0);}
.mixedtable2c th{text-align: center;}
.mixedtable2c td{text-align: left;}
.mixedtable2c th:first-child, .mixedtable2c td:first-child{width: 10%; text-align: center;}
.mixedtable2c td:last-child{padding-left: 10px;}
.mixedtable3c th{text-align: center; width: 45%;}
.mixedtable3c td{text-align: left; padding-left: 10px; width: 45%;}
.mixedtable3c th:first-child, .mixedtable3c td:first-child{width: 10%; text-align: center; padding-left: 0px;}
.centretable2c th, .centretable2c td{width: 50%; text-align: center;}
.centretable3c th, .centretable3c td{width: 33%; text-align: center;}
.centretable4c th, .centretable4c td{width: 25%; text-align: center;}
.centretable5c th, .centretable5c td{width: 20%; text-align: center;}
.centretable6c th, .centretable6c td{width: 16%; text-align: center;}
.centretable7c th, .centretable7c td{width: 14%; text-align: center;}
.classtable th, .classtable td{text-align: center;}
.classtable td a{text-decoration: none;}
.classtable td a:hover {color: rgb(128, 96, 167);}
.cspelltable th, .cspelltable td{text-align: center;}
.cspelltable th:first-child, .cspelltable td:first-child{width: 15%;}
.spelllist td{width: 25%; text-align: center;}
.itemlisttable th:first-child, .itemlisttable td:first-child{width: 75%;}
.largeitemtable{width: 100%; text-align: center;}
.largeitemtable td:first-child{text-align: left;}
.lowcell {background-color: rgb(30, 98, 166); color: rgb(248, 248, 255);}
.highcell {background-color: rgb(236, 176, 63); color: rgb(0, 0, 0);}
.tablediebtn{ width:100%; height:100%;
	background-color: rgb(0, 0, 128);   
	font-size: 1rem; color: rgb(248, 248, 255);
	cursor: pointer;
}
.tablediebtngd{ width:100%; height:100%;
	background-color: rgb(252, 217, 18);  
	border-color: rgb(252, 217, 18);
	font-size: 1rem; color: rgb(0, 0, 0);
	cursor: pointer;
}
.tablediebtng{ width:100%; height:100%;
	background-color: rgb(6, 182, 6);   
	border-color: rgb(6, 182, 6); 
	font-size: 1rem; color: rgb(248, 248, 255);
	cursor: pointer;
}
.tablediebtn:hover {color: rgb(128, 96, 167);}
/**Table CSS End**/

.actioncard{ width: 25%; min-width: 300px; border: solid 1px rgb(0, 0, 0);
	background-color: rgb(248, 248, 255);
	display: inline-block;
}

.sidetxtbox{width: 95%; 
	background-color: rgb(128, 96, 167);
	border: 1px solid rgb(255, 215, 0); border-radius: 5%;
	padding: 10px; margin: 2.5%;
	overflow: hidden;
	text-align: center; color: rgb(248, 248, 255);
}
.empwrtxtbox{width: 95%; 
	background-color: rgb(128, 96, 167);
	border: 1px solid rgb(255, 215, 0); border-radius: 5%;
	padding: 10px; margin: 2.5%;
	overflow: hidden;
	text-align: left; color: rgb(248, 248, 255);
}
.oathtxtbox{width: 95%; 
	background-color: rgb(244, 220, 87); 
	border: 1px solid rgb(255, 215, 0); border-radius: 5%;
	padding: 10px; margin: 2.5%;
	overflow: hidden;
	text-align: left; color: rgb(0, 0, 0);
}
.oathtxtbox h4{text-align: center;}
.quarter-break {height: 0.25rem; visibility: hidden;}
.half-break {height: 0.5rem; visibility: hidden;}

.monsternamebtn{background-color: var(--color-bg);
	box-shadow: none; text-shadow: none; text-decoration: none;
	border: 0;
}


.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;}
	body a{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;}
	h6 {font-size: 1rem;}
}
@media screen and (min-width: 601px) and (max-width: 700px) {
  	body {font-size: 1rem;}
	body a{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;}
	h6 {font-size: 1rem;}
	.sidebar a {font-size: 1rem;}
	.sidedropdown-content a {font-size: 0.8rem;}
	.sidesubsub {font-size: 0.6rem;}
}
@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;}
	h6 {font-size: 0.8rem;}	
	html{--top-spacing: 0px;}		
	.sidebar a {font-size: 1rem;}
	.sidedropdown-content a {font-size: 0.8rem;}
	.sidesubsub {font-size: 0.6rem;}
	.dmainbody{width:73%; margin-left: 110px;}
	.topbanner{margin-top: 0px; padding-top: 0px; height: 105px; display:block;}    
	.topbanner.responsive {margin-top: 0px; padding-top: 0px; height: 55px;}
	.spelllist td{font-size: 0.6rem;}
	.largeitemtable th, .largeitemtable td{font-size: 0.5rem;}
	.largeitemtable{width: 200px;}
}
@media screen and (max-width: 450px) {
    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;}	
	h6 {font-size: 0.8rem;}
	html{--top-spacing: 0px;}	
	.sidebar a {font-size: 1rem;}
	.sidedropdown-content a {font-size: 0.8rem;}
	.sidesubsub {font-size: 0.6rem;}
	.dmainbody{width:73%; margin-left: 110px;}
	.topbanner{margin-top: 0px; padding-top: 0px; height: 105px; display:block;}    
	.topbanner.responsive {margin-top: 0px; padding-top: 0px; height: 55px;}
	.spelllist td{font-size: 0.6rem;}
	.largeitemtable th, .largeitemtable td{font-size: 0.5rem;}
	.largeitemtable{width: 200px;}
}
/**Responseive Text end**/