@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap');

/* WebKit browsers (Chrome, Safari, Edge) */
textarea::-webkit-scrollbar {
  width: 5vw; /* Width of the scrollbar */
  padding-left: 20vw;
}

textarea::-webkit-scrollbar-track {
  background: var(--color-3); /* Background color of the scrollbar track */
  width: 15vw;
}

textarea::-webkit-scrollbar-thumb {
  background-color: var(--color-4); /* Color of the scrollbar thumb */
  border-radius: 10px; /* Rounded corners for the thumb */
  border: 2px solid var(--color-3); /* Optional: border around the thumb */
}

/* Firefox */
textarea {
  scrollbar-color: var(--color-4) var(--color-3); /* Thumb color and track color */
  scrollbar-width: thin; /* Thin scrollbar width */
}

::selection {
  color:var(--color-1);	
  background:var(--color-5);
  text-shadow:none;
}

.WhiteOnYellow {
  color:var(--color-1);	
  background:var(--color-6);
  text-shadow:none;
}

.BlackOnYellow {
  color:var(--color-2);	
  background:var(--color-6);
  text-shadow:none;
}

.WhiteOnPurple {
  color:var(--color-1);	
  background:var(--color-5);
  text-shadow:none;
}

.inconspicuous{
	color: var(--color-3);	
}

:root {
  --color-1: #FFFFFF;
  --color-2: #000000;	
  --color-3: #373737; /*Subtle,inconspicuous darker grey*/
  --color-4: #222222; /*Subtle,inconspicuous lighter grey*/ 
  --color-5: #9900FF; /*Modern Purple Goes Well with Black*/
  --color-6: #FEBD00; /*Golden*/

  --color-text: black;
  --color-background: white;
  --side-padding: 2vw;
  --nav-height: 90px; /*You HAVE To Give A Default Fallback Value*/  
  --input-adjustment: 0.5%;
  --viewport-width: 100vw;
  --viewport-height: 100vh;
}

textarea {
	width: 100%;
	overflow: auto;	
    padding-right: 11vw;
	padding-left: 10vw;
	padding-top: 9vh;
	padding-bottom: 14vh;	
    overflow: auto;	
    resize: none;	/* Prevent the textarea box from growing when I try to resize the font */
	font-family: 'Merriweather', serif;
	line-height: 1.5;
	color: var(--color-text);
	font-size: 7vh;	
	background-color: var(--color-background);
	border: 0px;
	outline: none;
}
a:first-of-type {
            padding-top: 15vh;
        }


html {
	color: var(--color-text);
	background-color: var(--color-background);	
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: white;
    --color-background: black;
  }
}

.noBullet{	color: var(--color-background);}
.hidden {display: none;}