:root {
--body-color: #11131B;
--body-lcolor: #DADADA;
--main-color: #ff6600;
--second-color: #c3c9cc;
--main-lcolor: #000080;
--second-lcolor: #ababb0;
--second-color-trans: #c3c9cc60;
--second-lcolor-trans: #ababb060;
--main-color-trans: #ff660040;
--main-lcolor-trans: #00008040;
--rg-bg-img: url(https://reysat.online/file/assets/bg-hero.webp);
--rg-light-bg-img: url(https://reysat.online/file/assets/light-bg-hero.webp);
--rg-spinner: url(https://reysat.online/file/assets/spinner.png);
--rg-light-spinner: url(https://reysat.online/file/assets/light_spinner.png);
--rg-background: url(https://reysat.online/storage/img/bg/Darkbg.webp);
--rg-light-background: url(https://reysat.online/storage/img/bg/Lightbg.webp);
--rg-odds: url(https://reysat.online/file/assets/odds.webp);
--rg-voor: url(https://reysat.online/file/assets/voor.webp);
--rg-score: url(https://reysat.online/file/assets/logo-vs.webp);
--rg-tail: url(https://reysat.online/file/assets/tail.webp);
--rg-light-odds: url(https://reysat.online/file/assets/light-odds.webp);
--rg-light-voor: url(https://reysat.online/file/assets/light-voor.webp);
--rg-light-score: url(https://reysat.online/file/assets/light-vs.webp);
--rg-light-tail: url(https://reysat.online/file/assets/light-tail.webp);

}

.rg-foot {
background-image: url('https://reysat.online/storage/img/bg/foot.svg');
}
.light-mode .rg-foot {
background-image: url('https://reysat.online/storage/img/bg/lfoot.svg');
}
.bg-konten {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://reysat.online/storage/img/bg/Parallax.webp');
background-attachment: fixed;
background-size: cover;
background-position: center center;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 100px;
}
.light-mode .bg-konten {
background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('https://reysat.online/storage/img/bg/Parallax.webp');
}
@property --num {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
.count-1.active::before {
counter-reset: my-counter var(--num);
content: counter(my-counter);
animation: count1 5s ease-in-out alternate forwards;
}
.count-2.active::before {
counter-reset: my-counter var(--num);
content: counter(my-counter);
animation: count2 5s ease-in-out alternate forwards;
}
.count-3.active::before {
counter-reset: my-counter var(--num);
content: counter(my-counter);
animation: count3 5s ease-in-out alternate forwards;
}
.count-4.active::before {
counter-reset: my-counter var(--num);
content: counter(my-counter);
animation: count4 5s ease-in-out alternate forwards;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
color: var(--main-color);
}
.light-mode h6, .light-mode .h6, .light-mode h5, .light-mode .h5, .light-mode h4, .light-mode .h4, .light-mode h3, .light-mode .h3, .light-mode h2, .light-mode .h2, .light-mode h1, .light-mode .h1 {
color: var(--main-lcolor);
}
.rg-link::before, .rg-link::after{
background-color: var(--main-color);
}
.light-mode .rg-link::before, .light-mode .rg-link::after{
background-color: var(--main-lcolor);
}
.bg-search {
outline: 4px solid  var(--main-color);
}
.light-mode .bg-search {
outline: 4px solid var(--main-lcolor);
}
.crop {
box-shadow: 0 0 20px 0 var(--main-color);
}
.light-mode .crop {
box-shadow: 0 0 20px 0 var(--main-lcolor);
}
.tablink, .volink, .tablink::before, .tablink::after,
.volink::before, .volink::after, .volink:focus, .volink:active, .tablink:focus, .tablink:active  {
background-color: #000000;
-webkit-box-shadow: 0 0 2px 2px var(--main-color),0 0 1px 1px var(--main-color)
!important;
box-shadow: 0 0 2px 2px var(--main-color),0 0 1px 1px var(--main-color)
!important;
color: var(--main-color)
!important
}
.light-mode .tablink, .light-mode .volink, .light-mode .tablink::before, .light-mode .tablink::after,
.light-mode .volink::before, .light-mode .volink::after, .light-mode .volink:focus, .light-mode .volink:active, .light-mode .tablink:focus, .light-mode .tablink:active {
background-color: #ffffff;
-webkit-box-shadow: 0 0 2px 2px var(--main-lcolor),0 0 1px 1px var(--main-lcolor)
!important;
box-shadow: 0 0 2px 2px var(--main-lcolor),0 0 1px 1px var(--main-lcolor)
!important;
color: var(--main-lcolor)
!important
}
.count h4 {
color: var(--main-color);
}
.light-mode .count h4 {
color: var(--main-lcolor);
}
.hero_title h2 {
background-color: var(--second-color);
}
.light-mode .hero_title h2 {
background-color: var(--second-lcolor);
}
.search-form {
background-color: #11131B40;
}
.light-mode .search-form {
background-color: #DADADA40;
}

.streaming-div {
background-image: url(/file/assets/stream.webp);
}
.light-mode .streaming-div {
background-image: url(/file/assets/lstream.webp);
}
.favorit::after {
content: 'Add to Favorites';
display: inline-block;
color: #ffffff;
font-weight: 600;
}
.rg-follow::after {
content: 'Follow';
display: inline-block;
color: #ffffff;
font-weight: 600;
}
.light-mode .favorit::after, .light-mode .rg-follow::after  {
color: #353535;
}
.favorit::before {
content: '\f005';
font-family: 'FontAwesome';
color: var(--body-lcolor);
margin-right: 10px;
display: inline-block;
animation: muter2 1s ease 0s 1 normal forwards;
}

.rgs-btn::after {
content: 'Follow';
display: block;
}
.rgs-btn.set::after {
content: 'Following';
display: block;
}
.rg-follow::before {
content: '\f007';
font-family: 'FontAwesome';
color: var(--body-lcolor);
margin-right: 10px;
display: inline-block;
animation: ani-skew 1s ease 0s 1 normal forwards;
}
.light-mode .rg-follow::before, .light-mode .favorit::before {
color: var(--body-color);
}
.favorit.added::after {
content: 'Favorited';
color: var(--main-color);
}
.rg-follow.added::after {
content: 'Following';
color: var(--main-color);
}
.light-mode .favorit.added::after, .light-mode .rg-follow.added::after {
color: var(--main-lcolor);
}
.rg_form {
background-image: url('https://reysat.online/storage/img/bg/form.webp');
background-position: center center;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.light-mode .rg_form {
background-image: url('https://reysat.online/storage/img/bg/form.webp');
}
.follow::after {
content: 'Follow';
display: inline-block;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
}
.light-mode .follow::after {
color: #353535;
transition: all 0.5s;
}
.light-mode .follow:hover::after {
color: #ffffff;
transition: all 0.5s;
}
.follow.added::after {
content: 'Following';
color: #ffffff;
}
.bgmember {
background: url('https://reysat.online/storage/img/assets/bg.png');
}
.bg-reysat {
background: url('https://reysat.online/storage/img/assets/bg.png');
background-size: 20px auto;
background-repeat: repeat;
}
.light-mode .bg-reysat {
background: url('https://reysat.online/storage/img/assets/bgl.png');
background-size: 20px auto;
background-repeat: repeat;
}
.bg-reysat2 {
background-image: url(https://reysat.online/file/assets/bg-hero.webp);
background-size: cover;
background-position: center;
}
.light-mode .bg-reysat2 {
background-image: url(https://reysat.online/file/assets/light-bg-hero.webp);
background-size: cover;
background-position: center;
}

.light-mode .bgmember {
background: url('https://reysat.online/storage/img/assets/bgl.png');
}
.rey-betting::after {
content: '';
background: url('https://reysat.online/storage/img/assets/bg.png');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display:block;
background-size: 20px auto;
background-repeat: repeat;
z-index: 2;
}
.head-tournament {
background-image: url('https://reysat.online/storage/img/assets/bg.png');
background-size: 30px auto;
background-repeat: repeat;
}
.light-mode .head-tournament {
background-image: url('https://reysat.online/storage/img/assets/bgl.png');
background-size: 30px auto;
background-repeat: repeat;
}
.relat, .other, .headi_bg {
background-image: url('https://reysat.online/storage/img/bg/h1.jpg');
background-repeat: repeat;
position: relative;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200px auto;
background-position: center;
background-repeat: repeat;
font-weight: 900;
display: inline-block;
text-transform: uppercase;
}
.relat::after, .other::after {
content: "";
background-image: url('https://reysat.online/storage/img/bg/h1.jpg');
width: 100%;
height: 2px;
display: block;
position: absolute;
bottom: 0;
right: 0;
background-size: 200px auto;
}
.relat::before, .other::before {
content: "";
background-image: url('https://reysat.online/storage/img/bg/h1.jpg');
width: 100%;
height: 2px;
display: block;
position: absolute;
top: 0;
right: 0;
background-size: 200px auto;
}
.h-bg {
background-image: url('https://reysat.online/storage/img/bg/h1.jpg');
background-repeat: repeat;
position: relative;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200px auto;
background-position: center;
background-repeat: repeat;
}
.light-mode .h-bg {
background-image: url('https://reysat.online/storage/img/bg/lh1.jpg');
background-repeat: repeat;
position: relative;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200px auto;
background-position: center;
background-repeat: repeat;
}
.light-mode .relat, .light-mode .other {
background-image: url('https://reysat.online/storage/img/bg/lh1.jpg');
background-repeat: repeat;
position: relative;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200px auto;
background-position: center;
background-repeat: repeat;
font-weight: 900;
}
.light-mode .relat::after, .light-mode .other::after {
background-image: url('https://reysat.online/storage/img/bg/lh1.jpg');
background-size: 200px auto;
}
.light-mode .relat::before, .light-mode .other::before {
background-image: url('https://reysat.online/storage/img/bg/lh1.jpg');
background-size: 200px auto;
}
.bg_heros {
background-image: var(--rg-bg-img);
}
.ligt_mode .bg_heros {
background-image: var(--rg-light-bg-img);
}
.treasure {
background-image: url(/file/assets/close.png);
transition: all 0.2s;
}
.treasure:hover, #challenge.slide .treasure {
background-image: url(/file/assets/open.png);
transition: all 0.2;
}
#challenge.slide .treasure:hover {
background-image: url(/file/assets/close.png);
transition: all 0.2s;
}
.light-mode .rey-betting::after {
content: '';
background: url('https://reysat.online/storage/img/assets/bgl.png');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-size: 20px auto;
background-repeat: repeat;
z-index: 2;
}
.post-sec::after {
content: '';
background: url('https://reysat.online/storage/img/assets/bg.png');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-size: 20px auto;
background-repeat: repeat;
}
.light-mode .post-sec::after {
content: '';
background: url('https://reysat.online/storage/img/assets/bgl.png');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-size: 20px auto;
background-repeat: repeat;
}
.box-service::before {
background: url('https://reysat.online/storage/img/assets/bg.png');
background-size: cover;
background-position: center;
background-size: 20px auto;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.light-mode .box-service::before {
background: url('https://reysat.online/storage/img/assets/bgl.png');
background-size: cover;
background-position: center;
background-size: 20px auto;
}
.loading:before {
content: 'Processing Payment...';
}
.rey-logo {
background-image: url('https://reysat.online/storage/logo/Dark-Logo.png');
}
.light-mode .rey-logo {
background-image: url('https://reysat.online/storage/logo/Light-Logo.png');
}
.rg-gaming {
background-image: url(/storage/img/bg/esport.webp);
}

.match_tabs, .right-product {
top: 100px
}

.follow__btn {
background: rgba(255, 102, 0, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid var(--main-color);
padding: 5px 10px;
color: #fff;
cursor: pointer;
}
.follow__btn:hover {
-webkit-box-shadow:0px 0px 10px 2px rgba(255,102,0,0.5);
-moz-box-shadow: 0px 0px 10px 2px rgba(255,102,0,0.5);
box-shadow: 0px 0px 10px 2px rgba(255,102,0,0.5);
}
.light-mode .follow__btn:hover {
-webkit-box-shadow:0px 0px 10px 2px rgba(0,0,128,0.5);
-moz-box-shadow: 0px 0px 10px 2px rgba(0,0,128,0.5);
box-shadow: 0px 0px 10px 2px rgba(0,0,128,0.5);
}
.light-mode .follow__btn {
background: rgba(0, 8, 69, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid var(--main-lcolor);
}
.follow__btn::after {
content: 'Follow';
}
.follow__btn.added::after {
content: 'Following';
}

@media(max-width:1600px) {
.match_tabs, .right-product {
top: 90px
}

}

@media(max-width:1399px) {
.match_tabs, .right-product {
top: 80px
}

}