/* Root Stuff */
:root {
--color-background: #111;
--color-background-alt: #424242;
--color-main: #addeb3;
--color-text: #addeb3;
--color-link: #58855C;
--color-accent: #0D3311;

--cursor: url(https://cdn.custom-cursor.com/db/22390/32/animals-silly-racoons-cursor.png), default !important;
--pointer: url(https://cdn.custom-cursor.com/db/22389/32/animals-silly-racoons-pointer.png), pointer !important;
}


/* Scrollbar */
::-webkit-scrollbar {width: 12px;}

::-webkit-scrollbar-track {
background: var(--color-background);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #8fffb0, var(--color-main), #8fffb0);
border-radius: 10px;
border: 2px solid var(--color-background);
box-shadow: 0 0 10px #8fffb0;
}

::-webkit-scrollbar-thumb:hover {background: linear-gradient(180deg, #cfffda, var(--color-main), #cfffda);}

* {
scrollbar-width: thin;
scrollbar-color: var(--color-main) var(--color-background);
}


/* Tags */
.no-select {
user-select: none;
}

.no-style-a a {
color: inherit;
text-decoration: none;
cursor: var(--cursor);
}


/* JS Tags */
.img-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}

.img-popup {
max-width: 90%;
max-height: 90%;
border-radius: 12px;
box-shadow: 0 0 25px var(--color-main);
transition: transform 0.2s;
}


/* Base HTML */
body {
margin: 0;
padding: 0;
background: url("assets/background.png") no-repeat center center fixed;
background-size: cover;
font-family: "VT323", monospace;
font-size: 20px;
color: var(--color-text);
cursor: var(--cursor);
}

a {
color: var(--color-link);
text-decoration: underline;
cursor: var(--pointer);
}

h1 {
font-size: 2.3em;
font-weight: normal;
text-align: center;
text-shadow: 0 0 10px #addeb3, 0 0 20px #addeb3, 0 0 30px #addeb3;
}

h2 {
font-size: 1.5em;
font-weight: normal;
text-align: center;
text-shadow: 0 0 10px #addeb3, 0 0 20px #addeb3, 0 0 30px #addeb3;
}

p {
text-align: center;
color: var(--color-text);
}


/* Base Classes */
.btn {
padding: 5px;
margin: 5px;
cursor: var(--pointer);
font-family: "VT323", monospace;
font-size: 20px;
color: var(--color-text);
background-color: var(--color-background);
border: 2px dashed var(--color-main);
border-radius: 10px;
}

@keyframes text-shadow-multicolor {
0% { text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18; }
16% { text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #ff49ff, 0 0 30px #ff49ff, 0 0 40px #ff49ff, 0 0 55px #ff49ff, 0 0 75px #ff49ff; }
33% { text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #ff6f00, 0 0 30px #ff6f00, 0 0 40px #ff6f00, 0 0 55px #ff6f00, 0 0 75px #ff6f00;}
50% { text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #fffb00, 0 0 30px #fffb00, 0 0 40px #fffb00, 0 0 55px #fffb00, 0 0 75px #fffb00;}
66% { text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49aaff, 0 0 30px #49aaff, 0 0 40px #49aaff, 0 0 55px #49aaff, 0 0 75px #49aaff;}
83% { text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #9d00ff, 0 0 30px #9d00ff, 0 0 40px #9d00ff, 0 0 55px #9d00ff, 0 0 75px #9d00ff;}
100% { text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;}
}
.rainbow-hover:hover {
cursor: var(--pointer);
animation: text-shadow-multicolor 0.7s linear 0s infinite normal none;
}

@keyframes hue-rotate-rainbow {
0%   { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
.rainbow-hue {
animation: hue-rotate-rainbow 3s linear infinite;
filter: hue-rotate(120deg) brightness(1.1) saturate(1.2);
transition: filter 0.3s ease;
}


/* Website */
.mobile-warning {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(17, 17, 17, 0.95);
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
font-size: 1.4em;
backdrop-filter: blur(4px);
}


#loader {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--color-main);
background-color: var(--color-background);
z-index: 9999;
}

.spinner {
width: 60px;
height: 60px;
border: 5px solid var(--color-background-alt);
border-top: 8px solid var(--color-text);
border-radius: 50%;
margin-bottom: 16px;
animation: spin 1.2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}


#intro {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text);
background-color: var(--color-background);
z-index: 9998;
}


.site-header {
width: 100%;
padding: 5px 0 15px;
background-color: var(--color-background);
box-shadow: 0 10px 15px var(--color-main);
}


.content {
margin: 70px auto;
}

.box {
margin: 30px auto;
padding: 15px 32px 15px 32px;
border-radius: 10px;
width: fit-content;
text-align: center;
background-color: var(--color-background);
box-shadow: 0 0 10px var(--color-main);
}



.about-box {
display: flex;
text-align: left !important;
padding: 24px 32px 24px 32px;
gap: 32px;
}

.about-box img {
width: 200px;
height: 200px;
border-radius: 50%;
border: 2px solid var(--color-accent);
box-shadow: 0 0 10px var(--color-main);
}


.fun-fact-box {
max-width: 500px;
}


.image-box img {
max-height: 400px;
border-radius: 10px;
border: 2px dashed var(--color-main);
}


.rainToggleBtn input[type="checkbox"] {
display: none;
}

.rainToggleBtn.active {
background: var(--color-link);
}

.ambienceControls {
display: none;
}

.ambienceControls > div {
margin: 20px;
display: flex;
align-items: center;
}

.ambienceControls > div > label {
width: 100%;
margin: 0 10px;
}

.ambienceControls input[type="range"] {
-webkit-appearance: none;
cursor: var(--cursor);
width: 100%;
height: 6px;
background: var(--color-background-alt);
border-radius: 4px;
outline: none;
}

.ambienceControls input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: var(--pointer);
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-main);
box-shadow: 0 0 5px var(--color-main);
}
.ambienceControls input[type="range"]::-moz-range-thumb {
cursor: var(--pointer);
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-main);
box-shadow: 0 0 5px var(--color-main);
}


.ip-address {
font-size: 24px;
font-weight: bold;
border-radius: 10px;
background-color: var(--color-background-alt);
}


.vrchat-content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 32px;
}

.vrchat-text {
max-width: 300px;
margin-bottom: 48px;
}

.vrchat-img {
max-width: 250px;
border-radius: 10px;
box-shadow: 0 0 15px var(--color-main);
}


/* Footer */
.site-footer {
width: 100%;
padding: 20px 40px 0;
background-color: var(--color-background);
box-shadow: 0 -10px 15px var(--color-main);
box-sizing: border-box;
display: flex;
flex-direction: column;
}

.footer-links {
margin-bottom: 25px;
gap: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.footer-legal {
margin-top: 15px;
gap: 15px;
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 0.8em;
opacity: 0.7;
}

.footer-credit {
margin-top: 10px;
font-size: 0.9em;
opacity: 0.7;
}

.footer-modal {
display: none;
position: fixed;
justify-content: center;
align-items: center;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
overflow: auto;
}

.footer-modal-content {
background-color: var(--color-background);
padding: 30px;
border-radius: 10px;
max-width: 700px;
width: 90%;
box-shadow: 0 0 20px #addeb3;
position: relative;
text-align: left;
}

.footer-modal-close {
position: absolute;
top: 10px;
right: 20px;
color: #ff0000;
background-color: var(--color-background-alt);
padding: 5px 10px;
border-radius: 10px;
font-size: 30px;
font-weight: bold;
cursor: var(--pointer);
}


/* Mobile View */
@media (max-width: 768px) {
.mobile-warning {
display: flex;
}

body {
font-size: 18px;
padding: 0 10px;
background: url("assets/background2.png") no-repeat center center fixed;
background-size: cover;
}

.box {
flex-direction: column;
align-items: center;
width: 100%;
max-width: 95%;
box-sizing: border-box;
text-align: center;
}

.about-box,
.fun-fact-box,
.ip-box,
.vrchat-box,
.art-box {
display: flex;
}

.about-box img,
.image-box img,
.vrchat-img {
width: 100%;
max-width: 300px;
height: auto;
}
}