@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&family=Chewy&family=Coda&family=Comfortaa&family=Dongle:wght@300&family=League+Gothic&family=Nunito&family=Oswald&family=PT+Sans&family=Righteous&family=Supermercado+One&family=Ubuntu:wght@300&display=swap');


@font-face {
  font-family: "Comic Sans MS";
  src: url("/src/fonts/COMIC.TTF");
  src: local("Comic-Sans"), local("Comic Sans"),
    local("Comic Sans MS") url("/src/fonts/COMIC.TTF"), format("truetype");
}

@keyframes glow-rainbow {
  00% {color: red;}
  10% {color: darkorange;}
  20% {color: yellow;}
  30% {color: lime;}
  40% {color: green;}
  50% {color: rgb(0, 230, 153);}
  60% {color: aqua;}
  70% {color: blue;}
  80% {color: rgb(77, 0, 128);}
  90% {color: rgb(204, 0, 255);}
  100%{color: red;}
}

::-webkit-scrollbar-track {
  background: #dadada;
}

::-webkit-scrollbar-thumb {
  background: #888;
  width: 7px;
  border-radius: 10px;
}

::-webkit-scrollbar {
  width: 10px;
  float: right;
}

@keyframes nav-button-hover {
  0% {
    border: 1px black solid;
  }
  100% {
    border-radius: 50%;
  }
}

:root {
  --background-main: #ffffff;
}

.disabled {
  cursor: not-allowed;
}

.fake-link {
  color: #0000ee;
  text-decoration: underline;
}

* {
  font-size: 1.063em;
  font-family: 'Nunito';
}

hline {
  margin: 40px 0px;
  display: block;
  width: 100%;
  border-bottom: solid 3px black;
}



body {
  background-color: var(--background-main);
  margin: 0px;
  height: 100%;
  z-index: -1;
  overflow-y: overlay;
}

p {
  font-family: 'Nunito';
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'PT Sans';
}

h1 {
  font-size: 27px;
}
.center {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

a-dis {
  cursor: not-allowed;
}

header a {
  font-family: "Comic Sans MS";
  font-size: 1.45rem;
  margin: auto 1% auto 1%;
  display: inline-block;
}
header {
  position: absolute;
  width: 100%;
  background-color: rgb(0, 255, 242);
  /* background-image: linear-gradient(180deg, rgb(255, 0, 0), yellow); */
  /* box-shadow: 0px 2px 10px black; */
  z-index: 3;
}
.main-header {
  position: relative;
}
.main-navagation-bar-all {
  position: relative;
  top: 0px;
  background-image: linear-gradient(45deg, rgb(0, 162, 255), rgb(52, 255, 137));
  text-align: center;
  height: fit-content;
  padding: 10px;
  /* border-bottom: 1px solid white; */
  margin: 0;
  border-top: 1px #00ff9d81 solid;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.541);
}

.main-navagation-bar-all a {
  display: inline-block;
  border: solid 2px rgb(174, 255, 178);
  border-radius: 0px;
  padding: 5px 20px;
  background-color: rgba(0, 255, 106, 0.575);
  color: black;
  text-decoration: none;
  transition: 0.09s;
  font-size: 18px;
  user-select: none;
}
.main-navagation-bar-all a:hover {
  background-color: rgba(87, 235, 255, 0.829);
}
section {
  margin: auto 10px auto;
  z-index: 0;
}
.section-main-undernav {
  position: relative;
  z-index: 0;
}
.fixed-relatively {
  background-color: black;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  margin: 0;
}
.main-page-center {
  text-align: center;
}
.default-btn {
  position: relative;
  z-index: 0;
  display: inline-block;
  text-decoration: none;
  color: black;
  background-color: rgb(0, 174, 255);
  font-size: 30px;
  padding: 7px 43px;
  border-radius: 5px;
  transition: 0.12s;
  margin: 15px;
  user-select: none;
}
.default-btn:hover {
  background-color: rgb(0, 38, 255);
  box-shadow: 0px 0px 10px rgb(2, 67, 187);
  padding: 7px 43px;
  color: white;
}
.default-btn:active {
  transition-duration: 0.03s;
  transform: translate(0px);
  box-shadow: none;
}
.main-store-index-links {
  position: relative;
  top: 9em;
}
.main-page-head1 {
  font-size: 28px;
}
.default-btn-purple {
  background-color: rgb(95, 0, 184);
  color: white;
}
.default-btn-purple:hover {
  color: black;
  background-color: rgb(158, 54, 255);
}
.store-section-versions {
  position: relative;
  top: 100px;
}
.socials-tiktok {
  position: relative;
  height: 30px;
  bottom: 5px;
}
input:focus {
  outline: none;
}
.text-input {
  background-color: transparent;
  border: none;
  border-bottom: black solid 2px;
  text-align: center;
}
.juice-code-disabled {
  color: #777;
}
.social-iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.social-iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  bottom: 0%;
  right: 0%;
  border: none;
}
.seperator {
  user-select: none;
}
iframe {
  user-select: none;
}
.text-align {
  text-align: center;
}
.margin-300 {
  margin: 0px 20%;
}
.socials-yt-subcount {
  font-weight: 900;
  animation: glow-rainbow linear 13s infinite;
}
.page-title {
  user-select: none;
}
.sideview-nav-button {
  background: none;
  border: none;
  position: absolute;
  left: 10px;
  top: 10px;
  cursor: pointer;
  height: 35px;
  width: 35px;
  transition-duration: 0.5s;
}
.sideview-nav-button svg {
  position: absolute;
  top: 0px;
  left: 0px;
}
.sideview-nav-button:hover {
  background-color: rgba(255, 255, 255, 0.432);
  border-radius: 50%;
}
.sidebar {
  background-color: #ffffff;
  left: -260px;
  position: fixed;
  z-index: 1;
  box-shadow: 2px -00px 10px rgba(0, 0, 0, 0.486);
  width: 250px;
  margin: 0px;
  height: calc(100% - 55px);
  transition-duration: 0.3s;
  text-align: center;
}
.sidebar-button {
  top: 0px;
  position: absolute;
  text-decoration: none;
  font-family: "League Gothic";
  letter-spacing: 1px;
  font-size: 26px;
  color: black;
  user-select: none;
  width: 100%;
  left: 0px;
  transition-duration: 0.2s;
  cursor: pointer;
}
.sidebar-button-2 {
  top: 53px;
}
.sidebar-button-3 {
  top: 106px;
}
.sidebar-button-4 {
  top: 159px;
}
.sidebar-button::after {
  content: '';
  border-bottom: 2px solid rgba(0, 0, 0, 0.438);
  display: block;
  padding-top: 10px;
}
.sidebar-button::before {
  content: '';
  border-bottom: 2px solid rgba(0, 0, 0, 0.438);
  display: block;
  margin-bottom: 10px;
}
.sidebar-button:hover {
  background-color: rgba(119, 119, 119, 0.356);
}
.sidebar-pb-reddstone35 {
  font-size: 15px;
  position: absolute;
  bottom: 0px;
  margin-left: 20px;
}
table {
  border: 1px black;
  box-shadow: 0px 0px 3px black;
  background-color: rgb(255, 255, 255);
}
th {
  background-color: rgb(172, 211, 255);
  border-left: 0px solid black;
  border-right: 0px solid black;
}
tr {
  margin: 0px;
  padding: 0px;
}
td {
  background-color: rgb(255, 242, 225);
}
.gvra-table-session {
  width: 90%;
}
.gvra-table-session-parent {
  position: relative;
  display: flex;
  justify-content: center;
}
.new-feature {
  background-color: red;
  font-size: 12px;
  position: absolute;
  bottom: 6px;
  margin: 10px;
  font-weight: bold;
  border-radius: 20px;
  padding: 3px 7px;
  color: rgb(255, 255, 195);
}
.default-btn-danger {
  cursor: pointer;
  background-color: red;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 5px 10px;
  transition-duration: 0.2s;
  user-select: none;
}
.default-btn-danger:hover {
  background-color: rgb(173, 0, 0);
}
.GVRA-staff-logout-btn {
  position: absolute;
  top: 80px;
  right: 20px;
}
.GVRA-staff-logout-confirmation {
  position: absolute;
  font-size: 14px;
  width: 300px;
  background-color: #777;
  padding: 20px;
  right: 20px;
  display: none;
  color: white;
}
.GVRA-staff-logout-confirmation h1 {
  margin: 0px;
}
.GVRA-staff-confirm-logout-btn {
  font-size: 20px;
}
.GVRA-staff-logout-confirmation-cancel {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  background-color: transparent;
  border: none;
  user-select: none;
}
.GVRA-staff-logout-confirmation-cancel:hover{
  background-color: rgba(255, 255, 255, 0.199);
}
.margin-0 {
  margin: 0px;
}
.GVRPS-staff-login-btn {
  cursor: pointer;
  background-color: rgb(0, 255, 42);
  border: none;
  border-radius: 4px;
  color: black;
  padding: 5px 10px;
  transition-duration: 0.2s;
  user-select: none;
  position: absolute;
  top: 80px;
  right: 20px;
}
.GVRPS-staff-login-btn:hover {
  background-color: rgb(0, 177, 0);
}
.GVRPS-staff-login-continue-btn {
  position: relative;
  top: 0px;
  left: 0px;
}