@font-face {
  font-family: 'JetBrain';
  src: url(https://allmyfriendsarestories.neocities.org/fonts/JetBrains/JetBrainsMono-Regular.woff2);
}

/* quick customization */
	:root {
		--width: 900px; /* sets the maximum width of the middle section */
		--headingfont: "Georgia"; 
		--bodyfont: "JetBrain"; 
		--borderwidth: 7px;
		--borderstyle: dotted;
	}

		:root {
			--text: #FFFDED;
			--section: #334640; /* dark mode background color for the middle section */
			--border: #586862;
			--link: #bdc3c1;
			--bgimage: linear-gradient(var(--link),var(--border)); /* you could also use an image! formatting: url("example.png") */
		}
	
	
/* page layout */ 	
	* { 
		scrollbar-color: var(--link) var(--border);
		overscroll-behavior: none;
		box-sizing: border-box;
		max-width: 100%; /* so everything adjusts on smaller screens */
	}
	
	body { 
		margin: 0; padding: 0;
		color: var(--text);
		background: var(--border) var(--bgimage);
		background-attachment: fixed;
		font-family: var(--bodyfont), sans-serif;
	}
	
	.container { 
		max-width: var(--width);
		min-height: 100vh;
		margin: 0 auto;
		padding: 1rem calc(2.25rem + 1vw); 
		background: var(--section); 
		--mask: /* from https://css-generators.com/wavy-shapes/ */
			radial-gradient(25.81px at 36px 50%,#000 99%,#0000 101%) 0 calc(50% - 30px)/51% 60px repeat-y,
			radial-gradient(25.81px at -21px 50%,#0000 99%,#000 101%) 15px 50%/calc(51% - 15px) 60px repeat-y,
			radial-gradient(25.81px at calc(100% - 36px) 50%,#000 99%,#0000 101%) 100% calc(50% - 30px)/51% 60px repeat-y,
			radial-gradient(25.81px at calc(100% + 21px) 50%,#0000 99%,#000 101%) calc(100% - 15px) 50%/calc(51% - 15px) 60px repeat-y;
		-webkit-mask: var(--mask);
		mask: var(--mask);
	}


.main {
  position: relative;
  margin: 0px;
  padding: 10px;
  width: 80%;
  outline-width: 1px;
  outline-offset: 0;
}

   
    input {
      width: 100%;
      padding: 12px;
      font-size: 18px;
      margin-bottom: 20px;
    }

  .result {
  background: var(--border);
  overflow: auto;
  border: 1px dotted var(--link);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);

  transition: transform 0.15s ease;
}
/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
/*endsidenav*/

	nav { 
		margin: 1.5rem 0 1rem 0;
		padding: 0.5rem 0 1rem 0;
		border-top: var(--borderwidth) var(--borderstyle) var(--border);
		border-bottom: var(--borderwidth) var(--borderstyle) var(--border);
	}
	nav li { 
		margin: 0.25rem;
	}
	footer {
		padding: 1rem 0 1.5rem 0;
	}
	hr { 
		border: 0;
		border-top: var(--borderwidth) var(--borderstyle) var(--border);
	}
	.container > ul, footer p { 
		margin: 0;
		padding: 0;
		text-align: right;
	}
	.container > ul li { 
		list-style-type: none;
		display: inline-block;
		padding: 0 0.5rem;
	}


	
/* headings */
	h1, h2, h3, h4, nav p { 
		font-family: var(--headingfont), serif;
		line-height: 1;
		font-weight: bold;
		margin: 1rem 0;
	}
	h1 { 
		font-size: calc(2.25rem + 2.5vw);
		margin: 3rem 0 1.5rem 0;
		border-bottom: var(--borderwidth) var(--borderstyle) var(--border);
		padding-bottom: 1rem;
		font-family: var(--headingfont), serif;
	}
	h2, nav p { 
		font-size: calc(1.75rem + 1.25vw);
	}
	h3 { 
		font-size: calc(1.25rem + 1.125vw);
	}
	h4 { 
		font-size: calc(1rem + 1vw);
	}
	
/* link style */
	a:link { 
		color: var(--link);
		text-underline-offset: 2px;
		text-decoration-thickness: 2px;
		text-decoration-color: var(--border);
	}
	a:visited { 
		color: var(--text);
		text-decoration-color: var(--border);
	}
	a:hover, a:focus { 
		color: var(--link);
		text-decoration-style: wavy;
		text-decoration-thickness: 1px;
	}
	
/* other page elements */

ul {
  list-style-image: url('images/bullet.png');
  list-style-position: outside;
  margin-top:0px;
  margin-bottom:15px;
  margin-left:10px;
  padding-left:10px;
  padding-top:0px;
  line-height: 1.3;
            }
li {
  margin: 10px 0;
}

p {
  line-height: 1.4em;
  color: #fffbdd;
	p, ul, ol, details, table {
		margin: 1rem 0;
	}
	p, li, dd, dt, cite, code { 
		line-height: 1.4;
	}
	sup, sub { 
		line-height: 0.5;
	}
	s, del { 
		text-decoration-color: var(--link); 
		text-decoration-thickness: 2px;
	}
	ul ul, ol ul {
		margin: 0;
	}
	ul li::marker { 
		color: var(--border);
		font-size: 125%;
		line-height: 1;
	}
	ul ul li::marker, ol ul li::marker { 
		color: var(--text);
	}
	figure { 
		background: var(--border);
		border: 10px solid var(--border);
		border-radius: 8px;
		margin: 1rem auto;
		width: fit-content;
		display: table;
	}
	figure img { 
		border-radius: 5px;
	}
	figcaption { 
		text-align: center;
		display: table-caption;
		caption-side: bottom;
		background: var(--border);
		border: 10px solid var(--border);
		border-radius: 0 0 8px 8px;
		margin-top: -10px;
		padding: 0 10px 10px 10px;
	}
	figcaption a:link, figcaption a:visited {
		text-decoration-color: var(--section);
	}
	table { 
		max-width: 100%;
		margin: 1rem auto;
	}
	th, td { 
		border-radius: 8px;
		padding: 3px 5px;
	}
	th { 
		color: var(--section);
		background: var(--link);
		border: 2px solid var(--link);
	}
	td { 
		border: 2px solid var(--border);
	}
	code { 
		display: inline-block;
		border: 2px solid var(--border);
		border-radius: 8px;
		padding: 2px 5px;
	}
	pre code { 
		display: block;
		overflow-x: auto;
	}
	blockquote {
		border-left: var(--borderwidth) var(--borderstyle) var(--border);
		margin: 1rem 0 1rem 1rem;
		padding-left: 1rem;
	}
	details { 
		background: var(--border);
		border-radius: 8px;
		padding: 1rem 2rem 1rem 1rem;
	}
	details summary { 
		cursor: pointer;
	}
	details > *:not(summary) { 
		margin-left: 1.5rem;
	}
	details ul li::marker {
		color: var(--text);
	}
	details a:link, details a:visited {
		text-decoration-color: var(--section);
	}
	details code {
		border: 2px solid var(--section);
	}
	details table { 
		max-width: 100%;
		margin: 1rem auto;
	}
	details td { 
		border: 2px solid var(--section);
	}
	::selection {
		color: var(--section);
		background-color: var(--text);
	}