html {
	font-family: 'Comic Sans MS';
	font-size: 18px;
	background: url(files/server-background.png) no-repeat center center;
    background-size: 100vw 100vh;
    background-attachment: fixed;
	scrollbar-gutter: stable;
}

body {
	background-size: 100vw 100vh;
	height: 100%;
	margin: 0;
	padding: 0;
}

.topnav {
    overflow: hidden;
    margin-bottom: -5px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.container { width: 80%;display:block;margin: 0 auto; margin-top: 100px; }

.logo {
    display: block;
    margin: 0 auto;
    width: 200px;
}

input {
  all: unset;
}

.bodyfon {
	border-radius: 18px;
	padding: 12px;
}

.bodyfon_rules {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

iframe {
    border-width: 0px;
    border-style: unset;
    width: 100%;
	height: 100%;
	min-height: 844px;
}

.topnav .topnav_button {
	float: left;
	text-align: center;
	text-decoration: none;
	padding: 0.5em 1.5em;
    background-image: url(files/button-frame.png);
    background-size: 100% 100%;
    font-size: 0.9em;
    text-transform: uppercase;
    color: #9954b5;
    border-radius: 0.4em;
    margin: 7px 7px 7px 0px;
}

.topnav .topnav_button:hover {
  color: #fff;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.btn-secondary {
padding: 8px 16px;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}

.btn-secondary {
background-color: #f5f5f5;
color: #333;
border: 1px solid #ddd;
}

.btn-secondary:hover {
background-color: #e9e9e9;
}

.btn {
  background-color: #5f87b7c2;
  border: none;
  color: white;
  padding: 10px 0px;
  cursor: pointer;
  width:100%;
  font-family: 'Comic Sans MS';
}

.btn:hover {
  background-color: #339f4f;
}

.btn_download {
	background-color: #3dc35fbf;
	border: none;
	color: white;
	padding: 12px 30px;
	cursor: pointer;
	font-size: 20px;
	width: 180px;
	margin-left: 14px;
	font-family: 'Comic Sans MS';
	border-radius: 20px;
}

.btn_download:hover {
  background-color: #26ef59bf;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.details_rules {
  position: relative;
  display: block;
  margin: 0 auto 10px;
  background: #9954b530;
  border-radius: 5px;
  transition: 0.3s;
  overflow: hidden;
  border: 2px solid #5f87b7;
}

.details_rules::after {
  position: absolute;
  right: 24px;
  top: 24px;
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-right: 3px solid #425995;
  border-bottom: 3px solid #425995;
  transform: rotate(-45deg);
  transform-origin: center;
  transition: .3s;
}

.details_rules[open]::after {
  transform: rotate(45deg);
}

.details_rules[open] {
  padding-bottom: 70px;
}

.details_rules[open] .details__title {
  margin-bottom: 25px;
}

.details__title {
  border-radius: 5px;
  padding: 10px 0px;
  font-size: 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  transition: .3s;
}

.details_number {
	display: inline;
    background: #53ceff5e;
    font-size: 2rem;
    color: white;
    text-shadow: 0 2px 9px #000000;
    padding-block: 10px;
    padding-inline: 25px;
}

.details_text {
	display: inline;
    margin-left: 20px;
    color: #9954b5;
    font-size: 29px;
}

.details__title::-webkit-details-marker {
  display: none;
}

.details__content {
	padding: 0 32px;
	font-size: 18px;
	margin-bottom: -60px;
	color: #b9b5a4;
}

.details__content p:last-child {
  margin-bottom: 0;
}
.details__content p:first-child {
  margin-top: 0;
}

.rule {
	display: inline;
	color: #ab9c63;
}

.bodyrule {
	display: inline;
	padding: 0px 10px 0px;
	color: #b9b5a4;
}

.rule_hr {
	border-color: #312c16;
    border-width: 0px 0px thin;
    padding: 4px 0px;
	margin-bottom: 16px;
}

.ruleban {
	margin: -8px 0px 0px 30px;
	color: #bf2d2d;
}

.fa-green {
	color: #45bf64;
	display: flex;
	justify-content: center;
}

.fa-red {
	color: #b51212;
	display: flex;
	justify-content: center;
}

.bordered th {
	font-family: 'Comic Sans MS';
	color: #ab9c63;
}

.donate-prime {
	background: #00be003d;
}

.donate-lux {
	background: #00bebe3d;
}

.donate-titan {
	background: #3f3ffe3d;
}

.donate-nova {
	background: #fefe3f3d;
}

.donate-apex {
	background: #fe3ffe3d;
}

.donate-moder {
	background: #FF55553d;
}

table {
	margin-left: 5%;
    width: 90%;
    height: 95%;
	border-spacing: 0px 0px;
}

td {
	font-family: 'Comic Sans MS';
	border-bottom: 1px dashed #7b7b7b;
	color: #ab9c63;
	padding: 3px 0px 3px 0px;
}

.listdonate:hover {
	background: #2f2f2f3d;
}

tr {
	color: #ab9c63;
}

.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
justify-content: center;
align-items: center;
}

.modal-overlay.active {
display: flex;
}

.modal-window {
	background-color: #9954b530;
	border: 2px solid #5f87b7;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	max-width: 500px;
	width: 90%;
	position: relative;
	animation: modalFadeIn 0.3s ease-out;
}

.modal-header {
	padding: 15px 20px;
	border-bottom: 2px solid #5f87b74f;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-header h3 {
	margin: 0;
	color: #ab9c63;
}

.modal-content p {
	color: #cbc9c3;
	margin-block-start: 3px;
    margin-block-end: 3px;
}

modal_color_red {
	color: #b16b6b;
}

.modal-content {
	padding: 15px;
	max-height: 70vh;
	overflow-y: auto;
	margin: 25px 0px 25px 0px;
}

::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #9954b5;
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: #6a3381;
}

.modal-footer {
	padding: 15px 20px;
	border-top: 2px solid #5f87b74f;
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	gap: 10px;
}

.btn2 {
	background-color: #5f87b773;
	border-radius: 25px;
	border: none;
	color: white;
	cursor: pointer;
	font-family: 'Comic Sans MS';
	width: 100%;
	padding: 4px 0px;
}

.btn2:hover {
  background-color: #4b505773;
  transition: all 0.3s ease;
}

.btn-secondary2 {
border-radius: 15px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
background-color: #5f87b7c9;
color: #cbc9c3;
border: 1px solid #ddd;
padding: 12px 16px;
font-size: 16px;
}

.btn-secondary2:hover {
background-color: #5f87b769;
}

[data-title] {
	position: relative;
	cursor: help;
}

[data-title]::after {
	content: attr(data-title);
	position: absolute;
	left: 0; top: 29px;
	opacity: 0;
	transition: 0.5s;
	pointer-events: none;
	background: #9954b590;
	border: 2px solid #5f87b7;
	border-radius: 10px;
	color: #fff;
	padding: 0.5em;
	min-width: 400px;
	max-width: 400px;
	z-index: 1;
}

[data-title]:hover::after {
	opacity: 1;
}