/* This Root stuff is for adjusting the font sizes
with CSS, and is from this article:
https://levelup.gitconnected.com/responsive-font-size-using-vanilla-css-51f81fe999db

Viewport Width doesn't take vertical scrollbar into accounts,
so 100vw will create a horizontal scrollbar if the page has a vertical
scrollbar. Ugh. 
https://destroytoday.com/blog/100vw-and-the-horizontal-overflow-you-probably-didnt-know-about
Then this article was helpful: 
https://stackoverflow.com/questions/33606565/is-it-possible-to-calculate-the-viewport-width-vw-without-scrollbar
Which helped me come up with this...
 --jer-width: calc(100vw - (100vw - 100%));


*/

:root {
 --base-scale:calc(100vw / 75);
 --jer-width: calc(100vw - (100vw - 100%));
 --jer-font-size:max(1em, min(2.5em, calc(var(--base-scale) * 2.5)));
 --jer-font-topbar:max(0.5em, min(2.0em, calc(var(--base-scale) * 2.0)));
 --jer-font-footer:max(0.5em, min(1.6em, calc(var(--base-scale) * 1.6)));
 --h1-font-size:max(1.5em, min(6em, calc(var(--base-scale) * 6)));
 --h2-font-size:max(1em, min(4em, calc(var(--base-scale) * 4)));
 --padding-size:max(1em, min(2em, calc(var(--base-scale) * 2)));
 --border-radius:max(1em, min(3em, calc(var(--base-scale) * 3)));
 --margin-size:max(0.5em, min(2em, calc(var(--base-scale) * 2)));
 --max-logo-size: 800px; /* Maximum size the logo can grow */
}
/* --logo-size: calc(100vmin * 0.8); */
/* logo-size is 80% of the smaller dimension of the viewport */

body {
	width:var(--jer-width);
	background-color: rgb(0,0,0); /* was 30 30 30 */
	margin: 0;
	font-family: Arial, Verdana, Helvetica;
	font-size:var(--jer-font-size);
}

/* Link Colors */
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}

a.whitelink:link {color:#999999; text-decoration: none;}
a.whitelink:visited {color:#999999; text-decoration: none;}
a.whitelink:hover {color:#66aaff; text-decoration: none;}


img.wideimg {
	width:var(--jer-width); 
	height: auto;
}

/* ChatGPT wrote the --logo-size above and this definition below */
.logo {
  width: calc(80vmin); /* 80% of the smallest viewport dimension */
  max-width: var(--max-logo-size); /* Cap the maximum width to prevent oversizing */
  height: auto; /* Maintain aspect ratio */
  display: block;
  margin: 0 auto; /* Center horizontally */
}


.jercenter {
	margin: var(--margin-size);
}

section {
 max-width:30em;
 padding:var(--padding-size);
 /* margin:var(--margin-size); */
 margin: auto;
 background: rgb(215,215,215);
 border:10px solid rgb(70,90,200);
 border-radius:var(--border-radius);
}

h1 {
 font-size:var(--h1-font-size);
 text-align: center;
 margin: 0;
}

h2 {
 font-size:var(--h2-font-size);
}


.navbar, .coverart, .footerbar {
	width:var(--jer-width); 
	font-size:var(--jer-font-topbar);
	padding: 2vw 0vw 2vw 0vw;
	margin: 0;
	background-color: rgb(0, 0, 0); 
	text-align: center;
    font-family: Arial Black, Arial, Verdana, Helvetica, Sans Serif;
}

.coverart {
	color: white;
	padding: 0vw 0vw 0vw 0vw;
    font-size:var(--h2-font-size);
}

.footerbar {
	/*
	width:var(--jer-width); 
	padding: 5vw 0 5vw 0;
	margin: 0;
	background-color: rgb(20, 20, 20); 
	text-align: center;
	*/
    font-size:var(--jer-font-footer);
	font-family: Arial, Verdana, Helvetica, Sans Serif;
}

.footertext {
	color: #999999;
}

/*-------------------------------
LARGER and SMALLER TEXT for use on misc items
--------------------------------*/
.text50 {
	font-size: 50%;
	/* Mostly used for shrinking text within a section that 
	was explicity given an larger text size */
}
.text63 {
	font-size: 63%;
}
.text75 {
	font-size: 75%;
}
.text83 {
	font-size: 83%;
}
.text90 {
	font-size: 90%;
}
.text125 {
	font-size: 125%;
}
.text133 {
	font-size: 133%;
}
.text150 {
	font-size: 150%;
}
.text166 {
	font-size: 166%;
}
.text175 {
	font-size: 175%;
}
.text200 {
	font-size: 200%;
}
.text250 {
	font-size: 250%;
}
.text300 {
	font-size: 300%;
}
.text350 {
	font-size: 350%;
}
.text400 {
	font-size: 400%;
}




/* ----------------------------------------- */
/* ----------------------------------------- */
/* ----BULLET LISTS------------------------- */
/* ----------------------------------------- */
/* ----------------------------------------- */


/* Remove default list styling */
ul.custom-bullets {
  list-style-type: none;
  padding-left: 1.5em; /* Adjusts indentation */
}

/* Base styling for list items */
ul.custom-bullets li {
  position: relative;
  margin-bottom: 1em; /* Default spacing */
}

/* Custom bullet styling using ::before */
ul.custom-bullets li::before {
  content: "•"; /* Default bullet symbol */
  position: absolute;
  left: -1.5em; /* Positions bullet outside the text */
  display: inline-block; /* Ensures proper spacing and alignment */
  width: 1.2em; /* Makes sure emoji has space */
  font-size: 1em; /* Ensures emojis scale properly */
  line-height: 1; /* Prevents Safari from pushing bullets out of alignment */
  vertical-align: middle; /* Keeps emoji level with text */
}

/* EMOJI BULLET LIST CLASSES */

/* EMOJI LIST examples - partial, selected by Jer
😎🦉🏈⛄️🥶🤔❤️👍😵‍💫😈🤡🤠💩☠️💀👻🧑‍🎨👨‍🎨👩‍🎨🧛‍♂️🦨🌞🎹🎼🎤🎸🪕✈️🚀🎵🎶♠️♣️♥️♦️ 

Custom bullet styles for each item */

ul.custom-bullets li.spade::before {
  content: "♠️ ";
}

ul.custom-bullets li.heart::before {
  content: "♥️ ";
}

ul.custom-bullets li.club::before {
  content: "♣️ ";
}

ul.custom-bullets li.diamond::before {
  content: "♦️ ";
}

ul.custom-bullets li.music::before {
  content: "🎵 ";
}

ul.custom-bullets li.cool::before {
  content: "😎 ";
}

ul.custom-bullets li.cowboy::before {
  content: "🤠 ";
}

ul.custom-bullets li.devil::before {
  content: "😈 ";
}

ul.custom-bullets li.rocket::before {
  content: "🚀 ";
}

ul.custom-bullets li.piano::before {
  content: "🎹 ";
}

ul.custom-bullets li.guitar::before {
  content: "🎸 ";
}

ul.custom-bullets li.mic::before {
  content: "🎤 ";
}

ul.custom-bullets li.sun::before {
  content: "🌞 ";
}

ul.custom-bullets li.palette::before {
  content: "🎨 ";
}

ul.custom-bullets li.skunk::before {
  content: "🦨 ";
}

ul.custom-bullets li.skull::before {
  content: "☠️ ";
}



/* -------------------------- */
/* Additional spacing classes */
/* -------------------------- */

li.zero {
  margin-bottom: 0;
}

li.quarter {
  margin-bottom: 0.25em;
}

li.half {
  margin-bottom: 0.5em;
}

li.threequarters {
  margin-bottom: 0.75em;
}

li.half2 {
  /* for first bullet of a sublist within a "half" main list */
  margin-top: .5em;
  margin-bottom: .5em;
}

li.double {
  margin-bottom: 2em;
}