#header-nav {
	text-align:center;
	background-color: #333399;
  	padding-top: 10px;
	padding-bottom: 6px;
	border: none;
	position: relative;
  	justify-content: center;
  	display: flex;
  	flex-direction: row;
  	flex-wrap: wrap;
	}

	#header-nav:before,
	#header-nav:after {
	  display: none;
	}

	#header-nav a {
	  display: block;
	  margin: 2px;
	}

	#header-nav img {
	  display: block;
	  max-width: 200px;
	  margin-left: 12px;
	  margin-right: 12px;
	}

	#header-nav-2 a:hover img {
	  transform: scale(1.10);
	}

	.grade-level-navigation {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  justify-content: center;
	  padding-top:10px;
	  padding-bottom:20px;
	}

	.grade-level-navigation a {
	  display: block;
	  margin: 2px;
	}

	.grade-level-navigation img {
	  display: block;
	  max-width: 100px;
	  margin-left: 12px;
	  margin-right: 12px;
	}

	.grade-level-navigation-2 a:hover img {
	  transform: scale(1.10);
	}

	.full-nav {
		display: flex; 
		flex-direction: row; 
		flex-wrap: wrap; 
		justify-content: center;
		padding-top: 30px; 
		padding-bottom: 0px;
	}

	.full-nav img {
		height:auto;
		max-width: 160px;
	  	margin-left: 12px;
	  	margin-right: 12px;
	}

	* {
      box-sizing: border-box;
    }

    
    .game-ad-wrapper {
      display: flex;
      justify-content: space-between;
      max-width: 1600px;
      margin: 0 auto;
      padding: 2px;
	  padding-left:0;
      gap: 0px;
	  align-items: flex-start;
    }

    .game-tiles {
      display: flex;
	  flex-wrap: wrap;
	  gap: 10px;
	  flex: 1; 
	  justify-content: flex-start;
	  padding: 0;
	  margin:0; 
	  align-items: flex-start;
		}

    .game-tile {
      
	  	flex: 0 0 calc(24% - 30px);
  		text-align: center;
		min-width: 100px;
    }

    .game-tile img {
      width: 100%;
      max-width: 160px;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    .game-tile h6 {
      margin-top: 8px;
      font-size: 18px;
      color: #333399;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
	  max-width: 160px; 
  	  margin-left: auto;
  	  margin-right: auto;
    }

    .ad-column {
      width: 300px;
      flex-shrink: 0;
    }

    .ad-box {
      width: 100%;
      min-height: 250px;
      background: #eee;
      text-align: center;
      padding-top: 0px;
      font-weight: bold;
      color: #333;
    }

    .ad-caption {
      margin-top: 10px;
      font-size: 16px;
      text-align: center;
      color: black;
    }

    .ad-caption a {
      color: #f30;
      text-decoration: none;
      font-weight: bold;
    }

    /* Responsive Breakpoints */

    @media (max-width: 768px) {

		.full-nav {
			display: none; 
		}
		
		.game-ad-wrapper {
			flex-direction: column;
		  }

		  .ad-column {
			display: none;
		  }

		  .game-tiles {
			 justify-content: center; /* Better alignment when ad disappears */
		  }

		  .game-tile {
			flex: 0 0 calc(33.33% - 15px); /* Adjust here too */
		  }
		
		#header-nav img {
		  width: 170px;
		  height:auto;
		  margin-left: 2px;
		  margin-right: 2px;
		}
		
		.grade-level-navigation img {
			width: 50px;
		  	height:auto;
		  	margin-left: 2px;
		 	 margin-right: 2px;
		}
	}
		
	@media (max-width: 992px) {

      #header-nav {
        justify-content: center;
      }
		
		
	  .game-tile {
        flex: 0 0 calc(33.33% - 15px); /* Adjust here too */
      }
	
		#header-nav img {
		  width: 180px;
		  height:auto;
		  margin-left: 2px;
		  margin-right: 2px;
		}
		
		.grade-level-navigation img {
		  width: 85px;
		  height:auto;
		  margin-left: 2px;
		  margin-right: 2px;
		}
		
    }

	@media (max-width: 1360px) {

      #header-nav {
        justify-content: center;
      }

	  .game-tile {
        flex: 0 0 calc(33.33% - 15px); /* Adjust here too */
      }
	
		#header-nav img {
		  max-width: 180px;
		  margin-left: 6px;
		  margin-right: 6px;
		}
		
		.grade-level-navigation img {
		  max-width: 90px;
		  margin-left: 6px;
		  margin-right: 6px;
		}
		
    }

	@media (max-width: 1499px) {

      #header-nav {
        justify-content: center;
      }

	  .game-tile {
        flex: 0 0 calc(33.33% - 15px); /* Adjust here too */
      }
	
		#header-nav img {
		  max-width: 190px;
		  margin-left: 8px;
		  margin-right: 8px;
		}
		
		.grade-level-navigation img {
		  max-width: 100px;
		  margin-left: 8px;
		  margin-right: 8px;
		}
		
    }

	/*
	#menuButton {
      display: none;
      background-color: #333399;
      color: white;
      padding: 6px 20px;
      font-size: 24px;
      border: none;
      width: 100%;
      text-align: left;
    }

    .menu-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color:darkslateblue;
      z-index: 1000000000;
      overflow-y: auto;
      padding: 20px;
    }

    .menu-overlay.active {
      display: block;
    }

    .menu-overlay h2 {
      font-size: 20px;
      color: #333399;
      margin-top: 2px;
      margin-bottom: 2px;
    }

    .menu-overlay a {
      display: block;
      padding: 10px 0;
      font-weight: bold;
      color: #333;
      text-decoration: none;
    }

    .menu-overlay a:hover {
      text-decoration: underline;
    }

    .menu-overlay .close-btn {
      background-color:coral;
      color: white;
      border: none;
      font-size: 22px;
      padding: 10px 20px;
      cursor: pointer;
    }

	.menu-grid {
	  display: grid;
	  gap: 10px 16px;  /* Vertical then horizontal spacing 
	  grid-template-columns: 1fr 1fr;
	  /*gap: 16px;
	  padding-top: 20px;
	}

	.menu-grid h2 {
	  font-size: 18px;
	  font
	  margin: 0;
	}

	.menu-grid h2 a {
	  display: block;
	  padding: 6px 10px;   /* Reduce vertical padding 
	  margin-bottom: 6px;  /* Controls spacing between rows 
	  font-size: 24px;
	  background-color:deepskyblue;
	  border-radius: 6px;
	  text-align: center;
	  text-decoration: none;
	  color: #333399;
	  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	}
	.menu-grid h2 a:hover {
	  background-color: #e0e0ff;
	}

	.close-btn .icon, .close-btn .label {
	  color: white;
	}
	*/

/*
	#header-nav-2 {
	text-align:center;
	background-color: #333399;
  	padding-top: 10px;
	padding-bottom: 6px;
	border: none;
	position: relative;
  	justify-content: center;
  	display: flex;
  	flex-direction: row;
  	flex-wrap: wrap;
	}

	#header-nav-2:before,
	#header-nav-2:after {
	  display: none;
	}

	#header-nav-2 a {
	  display: block;
	  margin: 2px;
	}

	#header-nav-2 img {
	  display: block;
	  max-width: 200px;
	  margin-left: 12px;
	  margin-right: 12px;
	  /*transition: transform 0.2s ease, filter 0.2s ease;
	}

	#header-nav-2 a:hover img {
	  transform: scale(1.15);
	}
	*/

	/*
	.grade-level-navigation-2 {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  justify-content:center;
	  padding-top:10px;
	  padding-bottom:20px;
	  
	}

	.grade-level-navigation-2 a {
	  display: block;
	  margin: 2px;
	}

	.grade-level-navigation-2 img {
	  display: block;
	  max-width: 100px;
	  margin-left: 12px;
	  margin-right: 12px;
	  /*transition: transform 0.2s ease, filter 0.2s ease;
	}

	
	.grade-level-navigation-2 a:hover img {
	  transform: scale(1.15);
	}
	*/