/* ai generated l0l read if gay */

*
{
    scrollbar-width: 0;
}

*::-webkit-scrollbar 
{
    height: 0;
    width: 0;
}

*::-webkit-scrollbar-thumb 
{
    border-radius: 0;
    border: 0;
}

:root {
	--pale-red: #f47d7d;
	--red: #ff0000;
	--yellow: #fafc9a;
	--purple: #571354;
	--grey: #c3c3c3;
	--blue:  #28adf5;
	--hsted: #c3c3c3;
	--white: #FFFFFF;

	--background: #000;

	--light-blue: #98F5FF;
	--hover-blue: #FFFFFF;
}

/* Reset and base styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: var(--background);
    font-family: TopazPlus, sans-serif;
    position: relative;
    font-size: 16px;
    line-height: 1.2;
}

/* Container styles */
.container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 20px;
}

/* Content styles */
#content {
    text-align: center;
    width: 609px;
    margin: 0 auto;
    padding: 0;
}

/* Text and link styles */
#text {
    text-align: center;
    font-family: TopazPlus;
    color: var(--light-blue);
    display: block;
    margin: 15px 0;
}

#text p {
    padding: 5px 0;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: var(--grey);
    padding: 4px;
    display: inline-block;
}

/* Member info styles */
#member-info {
    text-align: center;
    margin: 25px 0 25px 0;
    padding: 0;
}

#member-info img {
    max-width: 100%;
    height: auto;
    max-height: 120px;
}

/* Controls styles */
#controls {
    display: none;
}

#songTitle {
    display: none;
}

/* Cursor toggle styles */
.cursor-toggle {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 9999;
    font-size: 14px;
}

/* Media Queries */
@media screen and (max-width: 700px) {
    #content {
        width: 500px;
        margin: 0 auto;
    }
    
    span, #text p {
        font-size: 15px;
    }
    
    pre {
        height: 10%;
        font-size: 16px;
    }
}

@media screen and (max-width: 520px) {
    .container {
        padding: 10px;
        padding-bottom: 15px;
    }

    #content {
        width: 100%;
        max-width: 400px;
        padding: 0 10px;
    }

    span, #text p {
        font-size: 13px;
    }

    pre {
        height: 5%;
        font-size: 14px;
    }

    #member-info {
        margin: 15px 0 15px 0;
    }

    #member-info img {
        max-height: 100px;
    }

    #controls {
        padding: 6px;
        height: 40px;
    }

    #songTitle {
        font-size: 12px;
    }
}

@media screen and (max-width: 411px) {
    #content {
        width: 300px;
    }
    
    span, #text p {
        font-size: 10px;
    }
}

/* Default cursor class applied by JavaScript toggle */
body.default-cursor {
    cursor: auto !important; /* Override and show default cursor */
}

body.default-cursor a, 
body.default-cursor button,
body.default-cursor [onclick] {
    cursor: pointer !important;
}

html {
    overflow: hidden; /* Extra protection against scrollbars */
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px); /* Apply blur effect */
    -webkit-backdrop-filter: blur(20px); /* Safari support */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
	user-select: none;
}

.proceed-button {
    cursor: pointer;
    text-align: center;
    color: #ffffff; 
    background-color: #000000; 
    font-family: TopazPlus, sans-serif;
    padding: 10px 20px;
    border: none; 
    border-radius: 5px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.3s;
	user-select: none;
}

.proceed-button:hover {
    background-color: #000000;
    transform: scale(1.05); 
	user-select: none;
}

.hidden {
    display: none;
	user-select: none;
}

.pale-red {
    color: var(--pale-red);
	user-select: none;
}

/* Custom cursor styling */
.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 1px solid #28adf5;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}

.cursor-dot {
  position: fixed;
  width: 5px;
  height: 5px;
  background: #28adf5;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
}

/* Matrix background styling */
.matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.07;
}

/* Audio visualizer */
.visualizer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0.2;
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.typing {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid;
    animation: typing 0.5s steps(30, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

@keyframes glitch {
  0% {
    transform: translate(0);
  }
  10% {
    transform: translate(-0.5px, 0.5px);
  }
  20% {
    transform: translate(-0.5px, -0.5px);
  }
  30% {
    transform: translate(0.5px, 0.5px);
  }
  40% {
    transform: translate(0.5px, -0.5px);
  }
  50% {
    transform: translate(-0.5px, 0.5px);
  }
  60% {
    transform: translate(-0.5px, -0.5px);
  }
  70% {
    transform: translate(0.5px, 0.5px);
  }
  80% {
    transform: translate(0.5px, -0.5px);
  }
  90% {
    transform: translate(-0.5px, 0.5px);
  }
  100% {
    transform: translate(0);
  }
}

.glitch {
  animation: glitch 0.05s infinite;
}

.hsted {
	color: var(--hsted)
}

.blue {
	color: var(--blue)
}

.red {
	color: var(--red)
}

.yellow {
	color: var(--yellow)
}

.purple {
	color: var(--purple);
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a {
    text-decoration: none;
    color: var(--grey)
}

/* Enhanced hover glitch effect for links */
a:hover {
  text-decoration: none;
  color: var(--hover-blue);
  animation: glitch-hover 0.15s linear infinite;
  text-shadow: 2px 0 #ff0000, -2px 0 #00ffff;
}

/* Only show pointer cursor when in default cursor mode */
body.default-cursor a, 
body.default-cursor button,
body.default-cursor [onclick] {
    cursor: pointer !important;
}

@keyframes glitch-hover {
  0% { text-shadow: 1px 2px #ff0000, -2px 1px #00ffff; }
  20% { text-shadow: -1px -2px #ff0000, 1px -1px #00ffff; }
  40% { text-shadow: 1px -1px #ff0000, -2px 1px #00ffff; }
  60% { text-shadow: -2px 2px #ff0000, 2px 2px #00ffff; }
  80% { text-shadow: 2px 1px #ff0000, 1px -2px #00ffff; }
  100% { text-shadow: -2px 2px #ff0000, -2px 1px #00ffff; }
}

#text {
    text-align: center;
    font-family: TopazPlus;
    color: var(--light-blue);
    display: block; 
}

#content {
    text-align: center;
    margin: 0 auto;
    width: 609px;
}

#content span p {
    padding-bottom: 10px;
    padding-top: 10px;
}

p {
    font-family: TopazPlus;
    color: var(--grey)
}

#text p {
    padding-bottom: 5px;
}

pre {
    font-family: TopazPlus;
    color: var(--purple);
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

@font-face {
    font-family: TopazPlus;
    src: url("TopazPlus.ttf");
}

/* Remove the blinking title by removing everything 
From here */
.blink {
	-webkit-animation: flicker 3s infinite;
}

.blink2 {
	-webkit-animation: flicker 0.01s infinite;
}
  
@-webkit-keyframes flicker
{
  10% {opacity:0;}
  9% {opacity:01;}
  10% {opacity:.5;}
  13% {opacity:02;}
  20% {opacity:.5;}
  25% {opacity:1;}
}	
/* To here */

/* styles.css */
@keyframes flicker1 {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 1;
    }
    20%, 24%, 55% {
        opacity: 0;
    }
}

@keyframes flicker2 {
    0%, 15%, 20%, 30%, 50%, 70%, 100% {
        opacity: 1;
    }
    17%, 25%, 55% {
        opacity: 0;
    }
}

@keyframes flicker3 {
    0%, 10%, 15%, 40%, 60%, 80%, 100% {
        opacity: 1;
    }
    12%, 30%, 75% {
        opacity: 0;
    }
}

.flicker-text1 {
    color: #000000;
    animation: flicker1 2s infinite;
}

@keyframes brokenFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
        text-shadow: 0 0 2px #000000, 0 0 4px #000000, 0 0 6px #000000;
    }
    20%, 22%, 24%, 55% {
        opacity: 0.7;
        text-shadow: none;
    }
    26%, 53% {
        opacity: 0.85;
        text-shadow: 0 0 1px #000000, 0 0 2px #000000, 0 0 3px #000000;
    }
}

.flicker-text {
    color: #000000;
    text-shadow: 0 0 2px #000000, 0 0 4px #000000, 0 0 6px #000000;
    animation: brokenFlicker 3s infinite;
}

@keyframes brokenFlicker2 {
    0%, 20%, 22%, 29%, 35%, 76%, 81%, 100% {
        opacity: 1;
        text-shadow: 0 0 2px #000000, 0 0 4px #000000, 0 0 6px #000000;
    }
    15%, 25%, 29%, 58% {
        opacity: 0.7;
        text-shadow: none;
    }
    22%, 63% {
        opacity: 0.85;
        text-shadow: 0 0 1px #000000, 0 0 2px #000000, 0 0 3px #000000;
    }
}

.flicker-text2 {
    color: #ffffff;
    text-shadow: 0 0 2px #000000, 0 0 4px #000000, 0 0 6px #000000;
    animation: brokenFlicker2 0.01s infinite;
}

.hosted {
	bottom:0px;
	position: absolute;
    bottom: 2;
    width: 100%;
    text-align: center;
}