body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

#gametop{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
    background-color: #FFFFFF;
  padding: 10px;
  z-index: 100;		
}

.navbar {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  background-color: #FFFFFF;
  padding: 10px;
  z-index: 100;
}

.menu-container {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.menu-item {
  margin-left:10px;
  margin-right: 10px;
  border-radius: 20px;
  transition: background-color 0.3s ease;
}

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

.menu-item:hover {
  background-color: #ddd;
}

.menu-item.active {
  background-color: #8c67ab;
}

.menu-item.active a ,.menu-item.active span{
  color: #fff;
   font-weight: bold;
}

.menu-item:hover a {
  color: #000000;
}

.game-list {
	margin-left:20%;
	background-color: #FFFFFF;
}

.search-results{
	margin-top:5px;
	margin-bottom:15px;
}


		.search-box {
			display:inline-flex;
            position: absolute;
            top: 9%;
            left: 20%;
            <!-- transform: translate(-50%, -50%); -->
            background:#DCDCDC;
			width: 70%;
            height: 30px;
            border-radius: 30px;
            padding: 10px;
        }
		
		#search-input{
			background:#DCDCDC;
			width: 60%;
			border-radius: 30px;
		}
 

		
		#search-input:focus {
		  	 background: #00EEEE;
		}
        .search-box:hover>.search-btn {
            background: white;
            color: #26087b;
        }
 
        .search-btn {
			margin-left:10px;
            color: white;
            float: right;
		    width: 30px;
            height: 30px;
            border-radius: 50%;
			background:#CDC9C9;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.5s;
        }
 
        .search-text {
            border: none;
            background: none;
            outline: none;
            float: left;
            padding: 0;
            color: black;
            font-size: 16px;
            font-family: "Microsoft YaHei UI Light";
            transition: 0.5s;
            line-height: 35px;
            width: 0px;
 
        }
		
		#clear-button{
			margin-left:10px;
			color: white;
            float: right;
		    width: 30px;
            height: 30px;
            border-radius: 50%;
			background:#CDC9C9;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.5s;
		}

		#clear-button:hover{
			transform: rotate(180deg);
		}
		
		.gameList{
		   flex-grow: 1;
		}
		
		.copyright {
	      position: sticky; 
		  margin-top:20px;
		  bottom: 10px;
		  width: 100%;
		   /* background-color: black;  */
		  color: black;
	      display: flex; 
		  flex-direction:column;
          justify-content: center; 
          align-items: center; 
	  	  height: 60px; 
		}
		
		.copyright span a {
			color: #FF8C00;
		}


@media only screen and (min-width: 768px) {
	.head-logo{
		float:left;
		width:160px;
		height:40px;
		overflow:hidden;
		line-height:99;
		background:url(../img/logo.png) no-repeat;
		background-size:100% 100%
	}
  .navbar {
    width: 13%;
    /* height: 92%; */
	/* margin-top:5%; */
	left:20px;
    padding: 20px;
    overflow: hidden;
  }

  .menu-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu-item {
    margin-bottom: 10px;
  }
  
	

  .search-container {
		/* text-align: center; */
		/* margin-top: 100px; */
	}

	.search-input {
		padding: 10px;
		font-size: 16px;
	}

	.search-button {
		padding: 10px 20px;
		font-size: 16px;
		background-color: #e0e0e0;
		border: none;
		cursor: pointer;
	}


	
	
	.clear-button {
		padding: 10px 20px;
		font-size: 16px;
		background-color: #e0e0e0;
		border: none;
		cursor: pointer;
	}
	
	
}


@media only screen and (max-width: 767px) {
	
	
	
	#gametop{
		top:0;
		width:100%;
		height:11%;
	}
	
	.head-logo{
		float:left;
		margin-left:10px;
		width:46px;
		height:46px;
		overflow:hidden;
		line-height:50;
		background:url(../img/logo-2.png) no-repeat;
		background-size:100% 100%
	}
			
  .navbar {
    overflow: hidden;
  }

  .menu-container {
    white-space: nowrap;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .menu-item {
    display: inline-block;
    margin-right: 10px;
	height:40px;
    background-color: #f2f2f2;
  }

  .menu-item .active {
    background-color: #8c67ab;
  }
  

	.game-list {
		width: 100%;
		max-height: 1800px; 
		overflow-y: auto;
	}

   .game-icon {
		display: inline-block;
		width: 80px;
		height: 80px;
		margin: 5px;
		background-color: #e0e0e0;
		text-align: center;
		vertical-align: middle;
		line-height: 80px;
		font-size: 15px;
	}
	

  .search-container {
		text-align: center;
		/* margin-top: 100px; */
	}

	.search-input {
		padding: 10px;
		font-size: 16px;
	}

	.search-button {
		padding: 10px 20px;
		font-size: 16px;
		background-color: #e0e0e0;
		border: none;
		cursor: pointer;
	}


	
	
	.clear-button {
		padding: 10px 20px;
		font-size: 16px;
		background-color: #e0e0e0;
		border: none;
		cursor: pointer;
	}
}


#backToTop:hover {
  background-color: #8B8989;
}

#backToTop {
  position: fixed;
  bottom: 60px;
  right: 15px;
  background-color: #8B8682;
  color: white;
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1002;
  font-size: 18px;
  display: none;
}