/* 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;
}

html {
scroll-behavior: smooth;
}


/* 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);
}


/* 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;
}


/* Website */
.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 100px;
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);
}



/* 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;
}


/* Mobile View */
@media (max-width: 768px) {
body {
font-size: 18px;
margin: 0;
padding: 0 0px;
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;
}
}