/* this css is for the main page,*/

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&display=swap');
		body {
			background-color: #191724; /* set the bg color */
			font-family: 'Atkinson Hyperlegible Mono', sans-serif;
 		 	font-optical-sizing: auto;
  			font-style: normal;
			
		}
		body::-webkit-scrollbar {
			width: 0px;
		}

		hr { /* line break */
			color: #26233a; 
		}

		footer { /* a <hr> class that makes it darker and thicker, used ONLY for the footer */
			height: 5px;
			color: #26233a;
			text-align: center;
		}

		p { /* default text */
			color: #e0def4;
			font-family: 'Atkinson Hyperlegible Mono', sans-serif;
			font-size: 18px;
			text-shadow: 0 0 15px #e0def4;
		}
		b { /* bold text */
			color: #e0def4;
			font-family: 'Atkinson Hyperlegible Mono', sans-serif;
			font-weight: bold;
			font-size: 22px;
		}
		h1 { /* headers */
			color: #e0def4;
			font-family: 'Atkinson Hyperlegible Mono', sans-serif;
			font-size: 42px;
			text-shadow: 0 0 20px #000000;

		}
		h2 { /* headers */
			color: #e0def4;
			font-family: 'Atkinson Hyperlegible Mono', sans-serif;
			font-size: 34px;
			text-shadow: 0 0 20px #e0def4;

		}
		h3 { /* headers */
			color: #e0def4;
			font-family: 'Atkinson Hyperlegible Mono', sans-serif;
			font-size: 26px;
			text-shadow: 0 0 15px #e0def4;

		}
		.comment { /* text id that makes the text tiny and grey*/
			color: #6e6a86;
			font-family: 'Atkinson Hyperlegible Mono', sans-serif;
			font-size: 12px;
		}
		a { /* links */
			color: #9ccfd8;
			font-family: 'Atkinson Hyperlegible Mono', sans-serif;
			font-size: 18px;
		}
		i { /* italic text */
			color: #e0def4;
			font-family: 'Atkinson Hyperlegible Mono', sans-serif;
			font-size: 18px;
			text-shadow: 0 0 13px #e0def4;
		}
		h2 { /* subheaders */
			color: #e0def4;
			font-family: 'Atkinson Hyperlegible Mono', sans-serif;
			font-size: 30px;
		}

		.container { /* a container :)*/
    		max-width: 1200px;
    		margin: 0 auto;
			margin-bottom: 5px;
    		padding: 0 20px;
    		overflow: hidden;
		}

		#logo { /* for the gizmo wrench */
    		float: left;
    		font-size: 1.5em;
		}

		.game-container {
			max-width: 1200px;
    		margin: 0 auto;
    		padding: 0 20px;
    		overflow: hidden;
			display: grid;
			grid-template-columns: auto 470px auto;
			grid-template-rows: auto 45px auto;
			gap: 1em;
			grid-template-areas: 
			"box-1 box-2 box-3"
			"box-1 box-2 box-5"
			"box-1 box-4 box-4";
		}

		nav { /* the top navbar */
    		float: right;
			z-index: 2;
		}

		.nav-links { /* links for the navbar */
    		list-style-type: none;
    		margin: 0;
    		padding: 0;
			
		}
	
		.nav-links li { /* for the navlinks */
    		display: inline-block;
    		margin-left: 20px;
		}

		.nav-links li a { /* for the navlinks */
    		color: #e0def4;
    		text-decoration: none; /* not fancy */
    		padding: 10px 10px;
    		display: inline-block;
    		transition: background-color 0.3s;
			border-radius: 3px;
		}

		.nav-links li a:hover { /* on hover, change bg to a nice color */
    		background-color: #393552;
			border: none;
			border-radius: 3px;
		}

		.content { /* main page */
    		padding: 0px 0px;
    		text-align: center;
		}
		
		.title-content {
			padding: 50px 0px;
			text-align: center;
			background-image: url(frolic-banner-placeholder.jpg);
			background-size: cover;
		}

		.footer { /* bottom of page */
    		padding: 50px 0;
    		text-align: center;
		}

		/* dropdown menu stuff */
		.dropdown-menu {
			color:#e0def4;
			width: 320px;
			height: 400px;
			background-color: #232035;
			padding: 10px;
			border-radius: 5px;
			overflow: hidden;
		}

		.dropdown-menu-container {
			border-left-style: solid;
			padding-left: 5px;
			border-radius: 3px;
			overflow: hidden;
			overflow-y: scroll;
			max-height: 300px;
			min-width: 320px;
		}
		.dropdown-menu-container li {
    		margin-top: 7px;
			border: none;
			border-radius: 3px;
			padding-left: 10px;
			text-shadow: 0 0 15px #e0def4;
		}
		.dropdown-menu-container li a {
			color:#e0def4;	
			background-color: #2a273f;
			text-decoration: none;
    		padding: 10px 15px;
			display: inline-block;
    		transition: background-color 0.3s;
			border: none;
			border-radius: 3px;
		}
		.dropdown-menu-container li a:hover {
			background-color: #393552;
			border: none;
			border-radius: 3px;
		}

		.folders {
			margin-left: 10px;
		}

		.folder-items {
			border-left-style: solid;
			margin-left: 10px;
			transform: scaleY(0);
			height: 0px;
			margin-bottom: 5px;
			margin-top: -5px;
			border-radius: 3px;
			margin-left: 0px;
		}
		.folder-items li {
			display: block;
		}
		.folder-items li label {
			margin-left: 0px;
		}

		.dropdown-menu-container label {
			color:#e0def4;	
			background-color: #2a273f;
    		padding: 10px 15px;
    		display: inline-block;
    		transition: background-color 0.3s;
			border-radius: 3px;
			font-size: 18px;
			text-shadow: 0 0 15px #e0def4;
		}
		.dropdown-menu-container label:hover {
			background-color: #393552;
			border: none;
			border-radius: 3px;
		}
		
		input[type="checkbox"].folder-toggle {
			opacity: 0;
			position: absolute;
			cursor: pointer;
			
		}
		/* to make a specific folder open */
		/* the first id must be link to the button */
		/* second id must be link to the div */
		input[type="checkbox"]#Pico8.folder-toggle:checked ~ #Pico8-Items {
			transform: scaleY(1);
			margin-top: 5px;
			margin-bottom: 5px;
			height: auto;
		}
		              /* 1st id:input id       2nd id: div id */
		input[type="checkbox"]#test.folder-toggle:checked ~ #test-items {
			transform: scaleY(1);
			margin-top: 5px;
			margin-bottom: 5px;
			height: auto;
		}

		.dropdown-menu h3 {
			text-align: center;
		}

		.dropdown-menu-container::-webkit-scrollbar { /* hides the scroll bar*/
			width: 7px;
		}
		/*.dropdown-menu-container::-webkit-scrollbar-thumb {
			background-color: #393552;
			border-radius: 5px;
		} /* uncomment this if you want to show the scroll bar thumb.. which is the long grey oval thing if you didnt know what that was */

		.game-info {
			color:#e0def4;
			width: 400;
			height: 400;
		}
		
		.game-image {
			background-image: url(frolic-game-placeholder.png);
			background-size: contain;
			background-repeat: no-repeat;
			margin-left: 10px;
			border-radius: 5px;
			object-fit: contain;
			display: flex;
			align-content: center;
		}
		#tboi {
			background-image: url(images/the-binding-of-isaac.jpg);
		}
		#meatboy {
			background-image: url(images/super-meat-boy.jpg);
		}
		#run3 {
			background-image: url(images/run-3.jpg);
		}
		#donsol {
			background-image: url(images/donsol.png);
		}
		#b9f {
			background-image: url(images/bf9.jpg);
		}
		#celeste {
			background-image: url(images/celeste.png);
		}
		#j1b {
			background-image: url(images/just-one-boss.png);
		}
		#porklike {
			background-image: url(images/porklike.jpg);
		}
		.game-title {
			color:#e0def4;
			inset: 0;
			margin: auto;
			text-align: center;
		}
		.game-play {
			list-style-type: none;
    		margin: 0;
    		padding: 0;
			text-shadow: 0 0 15px #e0def4;
			align-items: center;
		}
		.game-play li {
			display: block;
		}
		
		.game-play-link {
			display: block;
			overflow: auto;
			font-size: 35px;
			height: -webkit-fill-available;
			text-align: center;
		}

		.game-play-link:hover {
			background-color: #393552;
			border: none;
			border-radius: 3px;
		}

		.game-play li a {
			color: #e0def4;
			background-color: #2a273f;
    		text-decoration: none; /* not fancy */
    		transition: background-color 0.3s;
			border-radius: 3px;
		}
		/* end of the dropdown menu code */

		.main-links li { /* links that are styled like nav links, but on the main page*/
    		display: inline-block;
    		margin-left: 0px;
			border: none;
			border-radius: 3px;
		}
		
		.main-links { /* see above */
			list-style-type: none;
    		margin: 0;
    		padding: 0;
		}
 
		.main-links li a { /* more main link customization */
			color:#e0def4;	
			background-color: #2a273f;
			text-decoration: none;
    		padding: 10px 15px;
    		display: inline-block;
    		transition: background-color 0.3s;
			border: none;
			border-radius: 3px;
		}

		.main-links li a:hover { /* on hover change to color*/
			background-color: #393552;
			border: none;
			border-radius: 3px;
			transform: scale(1.2)
		}
		.main-links li a:active { /* on hover change to color*/
			background-color: #393552;
			border: none;
			border-radius: 3px;
			transform: scale(0.8)
		}


		.wrapper { /*I honestly don't know what these do, */
  			margin: 0px;
  			padding: 0px;
  			height: 100%;
 			display: flex;
  			display: -moz-box;
  			display: -ms-flexbox;
  			display: -webkit-box;
  			display: -webkit-flex;
  			align-items: center;
  			justify-content: center;
		}

canvas { /*again, don't know.*/
  border: 0px;
  width: 512px;
  height: 512px;
  background: black;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}