/* start light mode styling */
	:root {
		--text: #ff004e;
		--border: #ffc1d4;
		--accent: #ffe7f0;
		--bg: #ff7da5;
		--gradientTop: white;
		--gradientBottom: rgb(240, 248, 255, .8);
	}
	header {
		background: url('***light mode banner image***');
	}
/* end light mode styling */

.concert-one-regular {
  font-family: "Concert One", serif;
  font-weight: 400;
  font-style: normal;
}

/* start dark mode styling */
	@media (prefers-color-scheme: dark) {
		:root {
			--text: white;
			--border: #ffe1ea;
			--accent: #ffe1ea;
			--bg: #ff7da5;
			--gradientBottom: rgb(255, 188, 213);
			--gradientTop: #ff3b71;
			a:link { color: #ffd1df; }
		}
		header {
			background: url('***dark mode banner image***');
		}
	}
/* end dark mode styling */


* { 
	box-sizing: border-box;
}
body {
	padding: 10px;
	font-family: 'MS PGothic', sans-serif;
	color: var(--text);
	/* page background pattern */
	background-image: url("https://casii.neocities.org/blingbg.gif");
	background-size: 100vw, 100vh;
	background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
	
	cursor: url("https://cur.cursors-4u.net/smilies/smi-3/smi268.gif"), auto;  
}

a:hover {
  cursor: url("https://cur.cursors-4u.net/smilies/smi-3/smi273.gif"), auto; 
}

html:active {
  cursor: url("https://cur.cursors-4u.net/smilies/smi-3/smi277.gif"), auto; 
}



.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
    text-align: center;
    padding: 20px;
}

.container img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    height: auto; /* Ensures it scales proportionally */
    z-index: -2; /* Keeps it behind the text */
    pointer-events: none; /* Prevents interaction */
}

.header-container {
    position: absolute;
    top: 30%; /* Moves it higher up */
    left: 59%;
    transform: translate(-50%, -50%);
    width: 60%; /* Adjust width as needed */
    max-width: 600px;
    text-align: center;
    padding: 10px;
}

.header-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    width: 70%;
    height: auto;
    z-index: -1;
}
.header-text {
    position: absolute;
    top: 30%; /* Moves it higher up */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%; /* Adjust width as needed */
    max-width: 600px;
    text-align: center;
    padding: 10px;
}

.header-text img {
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    width: 70%;
    height: auto;
    z-index: 1;
}
.chat {
    position: absolute;
    top: 70%; /* Moves it higher up */
    left: 70%;
    transform: translate(-50%, -50%);
    width: 100%; /* Adjust width as needed */
    max-width: 600px;
    text-align: center;
    padding: 10px;
}

.chat img {
    position: absolute;
    top: 15%;
    left: 70%;
    transform: translate(-50%, -50%);
    max-width: 200%;
    width: 150%;
    height: auto;
    z-index: 5;
}

.font-style: italic;
}

a:visited {
	color: var(--accent);
}