body {
    background: #000000;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    width: 100vw;
    min-height: 100vh;
    text-align: center;
    font-size: 2rem;
    position: absolute;
    /* Remove: width: 1850px; */
    /* Remove: margin: auto; */
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* END CRT */
  
@font-face {
  font-family: 'CustomFont';
  src: url('./FONT.otf') format('opentype');
}



/* Hide scrollbars everywhere */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    box-sizing: border-box;
}

/* Hide scrollbars for WebKit browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbars for html and body */
html, body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
}





/* CRT */

html { 
      /* text-shadow: 0.03rem 0 0.03rem #ea36afcc, -0.06rem 0 0.01rem #75fa69cc; */
      /* text-shadow: 0.03rem 0 0.03rem #ea36afcc, -0.06rem 0 0.01rem #75fa69cc, 0 2px 2px rgba(0, 0, 0, 0.852); */
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.752);
      letter-spacing: 0.06em;
      animation-duration: 0.001s;
      /* animation-name: textflicker; */
      animation-iteration-count: infinite;
      animation-direction: alternate;

}

 @keyframes textflicker {
    from {
      text-shadow: 1px 0 0 #d32e98cc, -2px 0 0 #6ac05fcc;
    }
    to {
      text-shadow: 2px 0.5px 2px #d32e98cc, -1px -0.5px 2px #6ac05fcc;
    }
  }

/* END CRT */

*{
  font-family: 'CustomFont', sans-serif;
  /* color: rgb(255, 255, 255); */
  color: #f87600
}


  a {
    color: inherit;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  
  a b {
    font-size: 4em;
    color: #7733ff;
    text-shadow: 0 0 4px black;
  }
  
  #intro {
    display: flex;
    align-items: center;
    gap: 2em;
  }
  
  .column {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  
  .button {
    display: inline-block;
    padding: 8px 16px;
    background: #4d1ab3;
    border: 2px solid #7733ff;
    border-radius: 0.25em;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: pointer;
  }
  .button:hover {
    background: #5916df;
  }
  .button:active {
    background: #6a25f4;
  }
  
  #user:not(:empty):after {
    content: "'s emotes";
  }
  
  #emotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2px;
    margin-top: 1em;
  }
  #emotes .emote picture {
    vertical-align: middle;
    margin-right: 4px;
    height: 28px;
  }
  
  #filters {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  
  #filters:has(#animated:checked) ~ #emotes .emote:not([data-format~=animated]) {
    display: none;
  }
  
  @media (prefers-reduced-motion) {
    #filters label:has(#animated):after {
      content: "(Reduced motion is enabled)";
    }
  }

  #scrolling {
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 150%;
  display: block;
  position: absolute;
  left: 1.7rem;

  /* transform: scaleX(0.9); */
}

  #logocontainer {
    width: 100vw;
    height: 100vh;
    background-color: black;
    position: absolute;
  }
  
  #psplogo{
    width: 71vw !important;
  display: none;
  left: 230px;
  position: absolute;
  top: -106px;
}

#background {
    position: sticky;
    top: 0;
    left: 0px;
    z-index: -1;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.line {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    margin: 10px 0;
}



.twoColumnsCentered {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    width: 100vw;
    margin: 10px 0;

}

.header {
  width: 100%;
  text-align: center;
  font-size: 3.7rem;
  line-height: 5rem;
  margin-bottom: 0.7rem;
  margin-top: 5rem;
  transform: translateX(-1.5rem);
}
.line-content {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 1rem;
}

 .left,  .right {
    flex: 1;
    padding: 0 15px;
    line-height: 2.5rem;

}

 .left {
    text-align: right;
    font-size: 4.2rem ;
    margin-right: 67px;
    transform: translateY(4px);
}



 .right {
    text-align: left;
    font-size: 5rem ;
    margin-right: 50px;
    line-height: 2.8rem;
    text-transform: uppercase;
}


.bigtext {
  font-size: 5rem !important;
}

.biggertext {
  font-size: 7rem !important;
}

.midtext {
  font-size: 4rem !important;
  line-height: 4rem;
}

.smoltext {
  font-size: 2.5rem !important;
  line-height: 5rem;
}

.shiftright {
  transform: translateX(3rem);
}

.shiftleft {
    transform: translateX(-1.5rem);
}

.twoColumnsCentered .left, .twoColumnsCentered .right {
    text-align: center !important;
    margin: 0px !important;

}

.chatters .left, .chatters .right {
  width: 40%;
}

.chatters{
  transform: translateX(10px);
}

.chatterName {
  width: 620px;
  overflow: hidden;
}

.spacer {
    height: 15rem;
    flex-shrink: 0; /* Prevents the spacer from shrinking in flex containers */
}


#director {
    font-size: 6rem;
    height: 4rem;
    transform: translateY(-1rem) translateX(-1.5rem);
    margin-bottom: 100px;
}

.empty-role{
  height: 1.5rem;
}

.emotes {
  transform: translateX(-3rem);
}

.emotes .row {
    display: flex;
    align-items: flex-start;
}

.emotes .col-4 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 33.333333%; /* Maintain equal column widths */
    flex: 0 0 33.333333%; /* Don't grow/shrink, stay at 1/3 width */
}

.emote-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0rem;
    width: 100%;
}

.emote-img {
    height: 4rem;
    margin-top: 2rem;
    margin-right: 1rem;
    margin-left: auto;
    flex-shrink: 0;
    max-width: none;
}

.emote-count {
    vertical-align: text-top;
    font-size: 5rem;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: left;
    width: 12rem;
}



.raids {
  transform: translateX(-15rem);
}



.centeredgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    transform: translateX(-1.5rem);
}

.centeredgrid-item {
    flex: 1 1 30%; /* Grow, shrink, base 30% width */
    min-width: 250px; /* Minimum width before wrapping */
    max-width: 33.333%; /* Maximum 3 per row */
    text-align: center;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.centeredgrid-item .right {
    text-align: center !important;
    transform: none !important;
    margin: 0 !important;
    width: 100%;
}

/* Dense version with 4 columns */
.densegrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 90%;
}

.densegrid-item {
    flex: 1 1 22%; /* Grow, shrink, base 22% width for 4 columns */
    min-width: 180px; /* Smaller minimum width */
    max-width: 25%; /* Maximum 4 per row */
    text-align: center;
    font-size: 2.4rem; /* Reduced from 3rem */
    margin-bottom: 0.5rem; /* Reduced from 1rem */
    text-align: center !important;
    transform: none !important;
    margin: 0 !important;
    width: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* Prevent text wrapping */
}

.densegrid-item span {
    display: inline-block;
    white-space: nowrap; /* Prevent individual spans from wrapping */
    margin: 0 0.25rem; /* Small spacing between spans */
}


.sponsor img {
  width: 400px;
  height: 200px;
}




  @keyframes logoflicker {
    from {
      filter: contrast(0.7) blur(1px) 
          drop-shadow(0.5px 0 0 #d32e98cc) 
          drop-shadow(-1px 0 0 #6ac05fcc);
        }
        to {
      filter: contrast(0.7) blur(1px) 
          drop-shadow(1px 0.25px 1px #d32e98cc) 
          drop-shadow(-0.5px -0.25px 1px #6ac05fcc);
        }
      }

      
.logos {
  width: 100vw;
  height: 50vw;
  transform: translateX(-3rem);
  /* filter: contrast(0.7); */
  /* filter: contrast(0.7)  
      drop-shadow(0.0015rem 0 0.0015rem #ea36afcc) 
      drop-shadow(-0.003rem 0 0.0005rem #75fa69cc); */
  animation-duration: 0.001s;
  /* animation-name: logoflicker; */
  animation-iteration-count: infinite;
  animation-direction: alternate;
    filter: brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(7492%) hue-rotate(-320deg) brightness(151%) contrast(104%);
}

.discordlogo {
  width: 40vw;
  height: 20vw;
}

.closeLineHeight {
  line-height: 4rem;
}

.veryCloseLineHeight {
  line-height: 2rem;
}



#enjoyedstay{
  margin-top: 700px;
  margin-bottom: 800px;
}

.upperCase {
  text-transform: uppercase;
}