@import url('/css/typography.css');
@import url('/css/animation.css');
@import url('/css/forms.css');
@import url('/css/pong.css');
@import url("/css/grid.css");
@import url("/css/grid.css");
@import url('/css/fontawesome/fontawesome.min.css');
@import url('/css/fontawesome/brands.min.css');
@import url('/css/fontawesome/regular.min.css');
@import url('/css/fontawesome/solid.min.css');

:root {
  --brand: rgba(60, 245, 150, 1);
  --brand-dark: rgba(60, 245, 150, 0.8);
  --pink: #EE3AB7;
  --purple: #8D3FF5;
  --blue: #2E95FF;
  --yellow: #FFEF1B;
  --red: #EF4056;

  --tier-blue: #4285F4;
  --tier-purple: #9D47DA;
  --tier-magenta: #D447DA;
  --tier-red: #EA4335;
  --tier-gold: #FFCC00;

  --twitch: #9146ff;
  --twitch-disabled: #8976A5;

  /**
  * New brand colors
  */
  --mint-green: rgba(60, 245, 150, 1);
  --royal-blue: rgba(90, 90, 245, 1);
  --mamba-yellow: rgba(190, 245, 0, 1);
  --brand-gradient: linear-gradient(to right, var(--mint-green), var(--mamba-yellow));
  --brand-gradient-blue: linear-gradient(90deg, var(--mint-green) 8.12%, var(--royal-blue) 94.16%);
  --brand-dark-background: rgb(15, 15, 23);
  --brand-dark: rgb(20, 20, 30);
  --brand-dark-2: rgb(26, 26, 40);
  --brand-dark-3: rgb(41, 41, 58);
  --brand-dark-4: rgb(56, 56, 75);
  --brand-dark-5: rgb(113, 113, 133);
  --old-grey: var(--brand-dark);
  --brand-white: rgb(255, 255, 255);
  --brand-black: rgb(0, 0, 0);
  --brand-red: rgb(245, 60, 0);



  --s: 200px; /* control the size */
  --c1: #1d1d1d;
  --c2: #4e4f51;
  --c3: #3c3c3c;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  min-width: 0;
}

body {
  font-family: "Montserrat", Consolas, Monaco, Courier, monospace;
  font-size: 16px;
  line-height: 1.5em;
  background: var(--brand-dark-background);
  transition: all 0.3s ease-in-out;
  overflow-x: hidden;
}

body.is-live-page {
  background: transparent;
}

body.is-pack-opener {
  background: #000;
}

body.no-scroll {
  overflow: hidden;
}

body.is-index-page:before,
body.is-listing-page:before {
  content: "";
  background: linear-gradient(0deg, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

body.is-index-page:after,
body.is-account-page:after {
  content: "";
  display: block;
  inset: 0;
  position: fixed;
  z-index: -1;
  background: url('/galaxy_bg_dark.jpeg') no-repeat;
  background-size: cover;
  opacity: 0.5;
  filter: blur(20px);
  transition: opacity 0.2s ease-in-out;
}

body.is-listing-page:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  top: -50px;
  background: repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 180deg) calc(.5*var(--s)) calc(.5*var(--s)*0.577),repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 180deg);
  background-size: var(--s) calc(var(--s)*0.577);
  opacity: 0.08;
  z-index: -1;
}

body.is-dashboard {
  height: 100vh;
  background: #29293A;
}

body.navigation-open {
  transform: scale(0.9, 0.9);
  overflow: hidden;
}

body.hide-background:after {
  opacity: 0;
}

body.navigation-open .navigation-wrapper {
  filter: blur(3px);
  opacity: 0;
}

body .page {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  max-width: 1450px;
  margin: 0 auto;
  overflow-x: hidden;
  padding: 20px;
}

body.navigation-open .page {
  opacity: 0;
}

html.is-overflow-hidden,
body.is-overflow-hidden {
  overflow: hidden;
  position: relative;
}

/* Global link styling - more specific selector */
a:link,
a:visited,
a:-webkit-any-link {
  color: var(--mint-green);
  text-decoration: none;
}

a:hover,
a:active,
a:-webkit-any-link:hover {
  color: var(--mint-green);
  text-decoration: underline;
}



h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  text-wrap: balance;
}

p {
  text-wrap: balance;
}

ul,
ol {
  list-style: none;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

* {
  -ms-overflow-style: none !important;  /* IE and Edge */
  scrollbar-width: none !important;  /* Firefox */
}

*::-webkit-scrollbar {
  display: none !important;
}

@media screen and (min-width: 768px) {
  body .page {
    padding: 40px;
  }
}

@media screen and (min-width: 992px) {
  body .page {
    padding: 60px;
    height: 100%;
  }
}