/* Colors */
:root {
	--page-bg: #fff;
	--text: #000;
	--accent: #FF00FF;
	--hover: #00ff00;
	--shadow: #001234;
	--shadow-header: #9eafcf;
	--backing: #fefafc;
  --border: 1px solid #00ff00;
}

html, body {margin: 0;}

.layout {
  width: 800px;
  display: grid;
  grid-gap: 40px;
  grid-template: "header" auto "main" auto "footer" auto / auto;
}

body {
	font-family: verdana, sans-serif;
	font-size: 12px; 
	background: var(--page-bg) url("https://frogmoonradio.neocities.org/bgstars.gif") fixed;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 40px;
  line-height: 1.2;
} 
header {
  grid-area: header;
  max-width: 800px;
	margin: auto;
	padding: 10px; 
	box-sizing: border-box;
	background: var(--backing); 
	border: var(--border);
}

	h1 {
	  font-family: courier new, monospace;
		font-size: 1.5em;
  font-weight: bold;
	}
	
	nav {
  margin-bottom: 3em;
}

nav .sidebar-title {
  margin-bottom: 0.5em;
}

nav ul {
  margin: 0 -5px;
  padding: 0;
  list-style: none;
  user-select: none;
}

nav ul li {
  margin-bottom: 0;
}

nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}

nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}

nav ul summary {
  cursor: pointer;
}

nav ul ul li > a {
  padding-left: 30px;
}

/* NAVIGATION IN HEADER */

header nav {
  margin-bottom: 0;
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

header nav ul li {
  position: relative;
}

header nav ul li:first-child > a {
  padding-left: 0;
}

header nav ul li:last-child > a {
  padding-right: 0;
}
	
main {
  grid-area: main;
	max-width: 800px;  
	margin: auto;
	padding-top: 2em;
	box-sizing: border-box;
}

hr {
	border: 1px dashed var(--text);
	margin: 4em auto 1em;
}

footer {
  
  grid-area: footer;
  color: #fff;
	text-align: center; 
	margin: 1em;}


/* -- Card Collection -- */

#filter-options {
	width: 100%; 
	text-align: center;
	margin: 1.5em auto 1em;
}

.collection {
	display: flex; 
	flex-direction: row; 
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 2.5em;
}

.card {
	width: 19%; 
	min-height: 65px;
	background: var(--backing); 
	padding: 5px 10px; 
	box-sizing: border-box;
	border: var(--border);
} /* If you would rather the cards always be the full width of the main element, change width to 100% */

@media only screen and (width < 1275px) {
	.card {
		width: 100%; 
		margin: 5px 0; 
		min-height: 0; 
		height: auto}
}

.card h2 {
  font-family: courier, serif;
	font-size: 16px; 
	}


/* -- Links & Focus -- */

a {
	color: var(--accent); 
	text-decoration-style: dotted;}
a:hover {
	color: var(--hover)}
	
*:focus-visible {
	outline: 2px solid var(--accent); 
	outline-offset: .15em; 
	border-radius: .2em
}

/* -- Lists -- */

.check {
	list-style: '✔ '; 
	}
.check, ol {
	padding-left: 1.5em;
}
li {
	margin: .4em 0
}
.check li, ol li {
	margin: .75em 0}
li::marker {
	color: var(--text)
}
	
	
/* -- Button Links -- */

.button {
	color: var(--accent);
	text-decoration: none;
	font-weight: bold;
	font-size: 1.1em; 
	border-radius: 3px;
	padding: .5em; 
	display: inline-block;
	border: 1px solid var(--accent);
}
.button:hover {
	color: var(--hover);
}


/* -- Filtering Effects (Essential) -- */
/* https://solaria.neocities.org/guides/cssfilter */

.collection:has(input:checked) .card {
    display: none;}
	
.collection:has(#all:checked) .card {
    display: inline-block;}

.collection:has(#local:checked) .local,
.collection:has(#neo:checked) .neo,
/*.collection:has(#girls:checked) .girls, */
/*.collection:has(#queer:checked) .queer, */
/*.collection:has(#indig:checked) .indig,*/
.collection:has(#frog:checked) .frog

 {display: inline-block;} /* You can combine multiple selectors like this IF you separate them with a comma */


/* -- Filter Input & Label Styling (Optional) -- */

input { 
	appearance: none;
	border: 1px inset var(--accent);
	border-radius: 3px;
	width: 1em;
	height: 1em;
	margin: 0 .3em;
	background: var(--backing);
	} 
input:checked {
	background: var(--accent);
	border: 1px inset var(--accent);
	box-shadow: 2px 2px 2px var(--shadow) inset}

label {
  background: var(--backing) url(grid1.gif);
	font-size: 1em; 
	border: 1px solid var(--accent); 
	border-radius: 5px;
	padding: .3em .5em .3em .3em; 
	margin: .3em;
	box-shadow: 1px 1px 2px var(--shadow);
	display: inline-block;
}
label:first-of-type {
	margin-left: 0}
label:hover, input:hover {
	cursor: pointer}
label:has(input:checked), label:hover {
	color: var(--hover);
	border: 1px solid var(--hover);
}


/* -- Card Header Styling -- */

.card h2 {margin-top: 7px}
.card h2::before {margin-right: .2em}
/*.note h2::before {content: '✔️ '; color: transparent; text-shadow: 0px 0px 0px var(--accent)}*/
/*.girls h2::before {content: url(hanagreen.gif)}*/
/*.queer h2::before {content: url()} */
.neo h2::before {content: url(pic/mouse.gif)}
/*.indig h2::before {content: url();}*/
.local h2::before {content: url(pic/arrow2.gif)}
.frog h2::before {content: url(pic/frog.gif)}
/* For images, set the content property to url('/FileNameHere.png') */