body, article {
    background-color: #e8e8e8;
    padding-top: 15px;
}

body.darkmode, body.darkmode article {
    background-color: #2e2e2e;
}

.topbar {
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    background-color: #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    z-index: 99;
}

body.darkmode, body.darkmode .topbar {
    background-color: #2e2e2e;
}

/*
body.darkmode .topbar{
    background: linear-gradient(
        to bottom,
        #2e2e2e 90%,
        transparent
    );
}
*/

.topbar .row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 15px 90px;
}

.row.alignLeft {
    justify-content: flex-end;
}

/* Style The Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 15px;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 15px;;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-radius: 15px;
    user-select: none;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {
    background-color: #3e8e41;
  }

.logoWrapper {
    width: fit-content;
}

.logo {
    width: 600px;
}

.logo_dm {
    display: none;
}

.famobi_logo {
    width: 90px;
    padding-top: 5px;
    padding-bottom: 10px;
}
.afei_logo {
    width: 300px;
}

body.darkmode #famobi_logo_greyBlock {
    fill: #fff;
}

body.darkmode #famobi_logo_font path {
    fill: #fff;
}

body.darkmode .logo_dm {
    display: block;
}

.logo_nm {
    display: block;
}

body.darkmode .logo_nm {
    display: none;
}

.buttonsWrapper {
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.buttonsWrapper > * {
    margin-left: 15px;
    padding: 5px;
}

.toggle span {
    font-size: 12px;
    font-weight: 500;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-transform: uppercase;
    width: 80px;
}

body.darkmode .toggle span {
    color: #e8e8e8;
}

.toggle span:before {
    content: "LIGHTMODE";
}

body.darkmode .toggle span:before {
    content: "DARKMODE";
}

.toggle input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}

.toggle label {
	cursor: pointer;
	text-indent: -9999px;
	width: 80px;
	height: 30px;
    background: #bada55;
	display: block;
	border-radius: 50px;
	position: relative;
}

.toggle label:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 40px;
	transition: 0.3s;
}

.toggle input:checked + label {
	background: grey;
}

.toggle input:checked + label:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}

.toggle label:active:after {
	width: 60px;
}

.inner {
    margin-top: 120px;
}

.allGamesContainer .gamesGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.allGamesContainer .gamesGroup .innerBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    height: 320px;
    width: 640px;
}

.allGamesContainer .gamesGroup:nth-child(even) .innerBox {
    justify-content: flex-end;
}

.allGamesContainer .gamesGroup:nth-child(even) {
    flex-direction: row-reverse;
}

.gamesList .allGamesContainer .gamesGroup .gameTile a {
    border-radius: 15px;
    /* overflow: hidden; */
    margin: 10px;
    box-shadow: -1px 1px 3px rgba(0,0,0,0.12), -1px 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.gamesList .allGamesContainer .gamesGroup .gameTile:hover a {
    box-shadow: -5px 14px 28px rgba(0,0,0,0.25), -5px 10px 10px rgba(0,0,0,0.22);
}

.gamesList .allGamesContainer .gamesGroup .gameTile:hover a:before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 20%;
    height: 100%;
    background: rgba(255,255,255,0.25);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
    border-radius: 15px;
}
.gamesList .allGamesContainer .gamesGroup .gameTile:hover a:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: rgba(255,255,255,0.25);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
    border-radius: 15px;
}

.gamesList .allGamesContainer .gamesGroup .gameTile a {
    display: block;
}


.gamesList .allGamesContainer .gamesGroup .gameTile a,
.gamesList .allGamesContainer .gamesGroup .gameTile img {
    position: relative;
    height: 140px;
    border-radius: 15px;
}

.gamesList .allGamesContainer .gamesGroup .gameTile.large,
.gamesList .allGamesContainer .gamesGroup .gameTile.large a,
.gamesList .allGamesContainer .gamesGroup .gameTile.large img {
    height: 300px;
    width: 300px;
}

.gamesList .allGamesContainer .gamesGroup .gameTile.large a {
    will-change: transform;
    transform-style: preserve-3d !important;
    transition: all 3s;
}

.gamesList .allGamesContainer .gamesGroup .gameTile.large img {
    position: absolute;
}

.gamesList .allGamesContainer .gamesGroup .gameTile.large img.background {
    object-fit: cover;
}

.gamesList .allGamesContainer .gamesGroup .gameTile.large img.logo {
    object-fit: contain;
    width: 70%;
    height: auto;
    left: 50%;
    top: -5%;
    transform: translateX(-50%) translateZ(20px);
}

.gamesList .allGamesContainer .gamesGroup .gameTile.large img.figure {
    object-fit: contain;
    width: 70%;
    height: auto;
    left: 50%;
    bottom: -5%;
    transform: translateX(-50%) translateZ(40px);
}

@media screen and (max-width: 1080px) {
    .topbar {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .logo {
        width: 70%;
        margin-right: 30%;
    }
    .logo.famobi_logo {
        width: 25%;
    }

    .logoWrapper { 
        width: fit-content;
    }

    .allGamesContainer .gamesGroup {
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 80px;;
    }
    .gamesList .allGamesContainer .gamesGroup .gameTile.large,
    .gamesList .allGamesContainer .gamesGroup .gameTile.large a,
    .gamesList .allGamesContainer .gamesGroup .gameTile.large img {
        width: 300px;
        height: 460px;
        object-fit: cover;
    }

    .gamesList .allGamesContainer .gamesGroup .gameTile.large {
        margin: 0 30px;
    }

    .gamesList .allGamesContainer .gamesGroup .gameTile.large img.logo {
        width: 100%;
        top: 5%;
    }
    .gamesList .allGamesContainer .gamesGroup .gameTile.large img.figure {
        width: 100%;
        bottom: 5%;
    }

    .allGamesContainer .gamesGroup .innerBox {
        height: auto;
        width: 480px;
    }
}

@media screen and (max-width: 894px) {

    .topbar .row {
        padding: 15px 30px;
    }

    .inner {
        margin-top: 90px;
    }

    .logoWrapper {
        width: fit-content;
    }

    .logo {
        width: 100%;
        margin-right: 0;
    }
    .logo.famobi_logo {
        width: 50%;
        /* max-width: 300px; */
    }

    /* .buttonsWrapper {
        width: 50%;
        justify-content: space-between;
        margin-top: 15px;
    } */

    .buttonsWrapper > * {
        margin-left: 0;
    }

    .gamesList .allGamesContainer .gamesGroup {
        flex-wrap: wrap;
        justify-content: center;
    }

    .gamesList .allGamesContainer .gamesGroup .gameTile.large,
    .gamesList .allGamesContainer .gamesGroup .gameTile.large a,
    .gamesList .allGamesContainer .gamesGroup .gameTile.large img {
        width: 300px;
        height: 300px;
        object-fit: cover;
    }

    .gamesList .allGamesContainer .gamesGroup .gameTile.large a,
    .gamesList .allGamesContainer .gamesGroup .gameTile.large img {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .gamesList .allGamesContainer .gamesGroup .gameTile.large {
        margin: 60px 0;
    }

    .gamesList .allGamesContainer .gamesGroup .gameTile.large img.logo {
        width: 70%;
        top: -5%;
    }
    .gamesList .allGamesContainer .gamesGroup .gameTile.large img.figure {
        width: 70%;
        bottom: -5%;
    }

    .allGamesContainer .gamesGroup .innerBox,
    .allGamesContainer .gamesGroup:nth-child(even) .innerBox {
        align-items: flex-start;
        justify-content: center;
        width: 100%;
    }
}

.dropdown-content{
    /* 新增：限制最大高度并启用滚动 */
    max-height: 400px; /* 根据需求调整最大高度（如400px） */
    overflow-y: auto;  /* 垂直方向内容超出时显示滚动条 */
    overflow-x: hidden; /* 禁止水平滚动 */

    /* 可选：优化滚动条样式（增强美观度） */
    scrollbar-width: thin; /* 细滚动条（Firefox） */
    scrollbar-color: #ccc #f1f1f1; /* 滚动条颜色（Firefox） */
}