body {
  margin: 0;
  font-family: Arial, sans-serif;
  padding-top: 60px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
    background-color: #212121  ;

}


:root {
    --accent-color: #15474d; 
    --dark-primary: #988989;
    --sidebar-width-collapsed: 60px;
    --sidebar-width-expanded: 200px;
    --header-height: 70px;
}


/* Header */
.header-container {margin-right: 2vw;display: flex;justify-content: space-between;align-items: center;color: white;padding: 10px 20px;height: 60px;background-color: rgba(33, 34, 51, 1);position: fixed;top: 0;width: 100%;box-sizing: border-box;z-index: 1000;}
.logoimg {margin-left: 3vh;height: 5vh;}

/* Nav bar */
.nav-links {display: flex;gap: 20px;flex-grow: 1;margin-left: 30px}
.nav-links .nav-button {color: #988989;text-decoration: none;padding: 5px 10px;border-radius: 4px;transition: background-color 0.3s;}
.nav-links .nav-button:hover {background-color: #555;}
.menu-toggle {display: none;}



main {  flex: 1;}

/* Footer */
footer {background: rgba(33, 34, 51, 1);color: #e4e4e5;padding: 40px 20px 20px;text-align: center;}
.footer-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 30px;max-width: 1100px;margin: auto;}
.footer-col h3 {margin-bottom: 15px;font-size: 18px;color: rgb(248, 243, 243);}
.footer-col a {display: block;color: rgb(241, 238, 238);text-decoration: none;margin: 6px 0;font-size: 15px;transition: 0.3s;}
.footer-col a:hover {color: #00ff99;}
.footer-col p {text-align: left;}
.social-icons {display: flex;justify-content: center;gap: 15px;margin-top: 15px;}
.social-icons a {font-size: 22px;color: rgb(211, 200, 200);transition: 0.3s;}
.social-icons a:hover {color: #00ff99;}
.footer-bottom {margin-top: 25px;border-top: 1px solid #333;padding-top: 15px;font-size: 14px;color: rgb(252, 249, 249);}


/* Loggin button */
.login-Button{padding: 12px 25px;background: #4a47e8;color: #fff;border: none;cursor: pointer;border-radius: 6px;font-size: 16px;}
.login-modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);justify-content: center;align-items: center;}
.login-modal-content {background: rgba(0,0,0,1);padding: 25px 35px;width: 350px;border-radius: 10px;animation: fadeIn 0.3s;}
.login-tabs {display: flex;justify-content: space-between;margin-bottom: 20px;}
.login-tabs button {width: 50%;padding: 10px;border: none;cursor: pointer;background: #eaeaea;font-size: 15px;}
.login-tabs button.active {background: #4a47e8;color: white;}
.login-input {width: 100%;padding: 10px;margin: 10px 0;border-radius: 6px;border: 1px solid #ccc;}
.login-submit-btn {width: 100%;padding: 10px;background: #4a47e8;color: white;border: none;border-radius: 6px;cursor: pointer;}
.login-close {float: right;cursor: pointer;font-size: 20px;margin-left: 10px;}
#login-responseMsg {margin-top: 10px;font-size: 14px;}


/* Content */
#blog-div {max-width: 900px;margin: auto;background: #2a2a2a;border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 20px;padding: 50px;box-shadow: 0 0 25px rgba(0, 255, 255, 0.08);}
h1 {color: #00ffff;text-align: center;font-size: 2.5rem;margin-bottom: 10px;}
h2 {color: #00ffff;margin-bottom: 20px;text-align: center;}
h3 {color: #00ffff;margin-bottom: 10px;}
p,li {color: #ddd;font-size: 1.1rem;line-height: 1.8;text-align: justify;}
.answer {color: #bbb;line-height: 1.7;}
#contentSection {margin: 10%;}



/* Left sidebar */
.left-sidebar {position: fixed;top: var(--header-height);left: 0;width: var(--sidebar-width-collapsed); height: calc(100vh - var(--header-height)); background-color: #212121 ;box-shadow: 2px 0 10px #333333;z-index: 900;padding-top: 10px;transition: width 0.3s ease-in-out;overflow-x: hidden; }
.left-sidebar:hover {width: var(--sidebar-width-expanded); }
.sidebar-link {display: flex;align-items: center;text-decoration: none;color: var(--dark-primary);padding: 15px 20px;margin-bottom: 5px;font-size: 1.1em;white-space: nowrap; transition: background-color 0.2s, color 0.2s;}
.sidebar-link:hover {background-color: #F0F0F0;color: var(--accent-color);}
.sidebar-link.active {background-color: var(--accent-color);color: var(--dark-primary); font-weight: 700;border-radius: 0 50px 50px 0; }
.sidebar-link i {width: 25px; text-align: center;font-size: 1.3em;transition: color 0.2s;}
.link-text {margin-left: 15px; transition: opacity 0.3s ease-in-out;}
.left-sidebar:hover .link-text {opacity: 1;}
.main-content-area {margin-left: var(--sidebar-width-collapsed); pad.header-container,.login-modal{top:0;width:100%;position:fixed}h1,h3{color:#0ff;margin-bottom:10px}body{margin:0;font-family:Arial,sans-serif;padding-top:60px;min-height:100vh;display:flex;flex-direction:column;background-color:#212121}:root{--accent-color:#15474d;--dark-primary:#988989;--sidebar-width-collapsed:60px;--sidebar-width-expanded:200px;--header-height:70px}.header-container{margin-right:2vw;display:flex;justify-content:space-between;align-items:center;color:#fff;padding:10px 20px;height:60px;background-color:#212233;box-sizing:border-box;z-index:1000}.logoimg{margin-left:3vh;height:5vh}.nav-links{display:flex;gap:20px;flex-grow:1;margin-left:30px}.nav-links .nav-button{color:#988989;text-decoration:none;padding:5px 10px;border-radius:4px;transition:background-color .3s}.nav-links .nav-button:hover{background-color:#555}.menu-toggle{display:none}main{flex:1}footer{background:#212233;color:#e4e4e5;padding:40px 20px 20px;text-align:center}.footer-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;max-width:1100px;margin:auto}.login-tabs,h2{margin-bottom:20px}.footer-col h3{margin-bottom:15px;font-size:18px;color:#f8f3f3}.footer-col a{display:block;color:#f1eeee;text-decoration:none;margin:6px 0;font-size:15px;transition:.3s}.footer-col a:hover,.social-icons a:hover{color:#0f9}.footer-col p{text-align:left}.sidebar-link i,h1,h2{text-align:center}.social-icons{display:flex;justify-content:center;gap:15px;margin-top:15px}.social-icons a{font-size:22px;color:#d3c8c8;transition:.3s}.footer-bottom{margin-top:25px;border-top:1px solid #333;padding-top:15px;font-size:14px;color:#fcf9f9}.login-Button{padding:12px 25px;background:#4a47e8;color:#fff;border:none;cursor:pointer;border-radius:6px;font-size:16px}.login-modal{display:none;left:0;height:100%;background:rgba(0,0,0,.5);justify-content:center;align-items:center}.login-modal-content{background:#000;padding:25px 35px;width:350px;border-radius:10px;animation:.3s fadeIn}.login-submit-btn,.login-tabs button.active{background:#4a47e8;color:#fff}.login-tabs{display:flex;justify-content:space-between}.login-tabs button{width:50%;padding:10px;border:none;cursor:pointer;background:#eaeaea;font-size:15px}.login-input{width:100%;padding:10px;margin:10px 0;border-radius:6px;border:1px solid #ccc}.login-submit-btn{width:100%;padding:10px;border:none;border-radius:6px;cursor:pointer}.login-close{float:right;cursor:pointer;font-size:20px;margin-left:10px}#login-responseMsg{margin-top:10px;font-size:14px}#blog-div{max-width:900px;margin:auto;background:#2a2a2a;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:50px;box-shadow:0 0 25px rgba(0,255,255,.08)}h1{font-size:2.5rem}h2{color:#0ff}li,p{color:#ddd;font-size:1.1rem;line-height:1.8;text-align:justify}.answer{color:#bbb;line-height:1.7}#contentSection{margin:10%}.left-sidebar{position:fixed;top:var(--header-height);left:0;width:var(--sidebar-width-collapsed);height:calc(100vh - var(--header-height));background-color:#212121;box-shadow:2px 0 10px #333;z-index:900;padding-top:10px;transition:width .3s ease-in-out;overflow-x:hidden}.left-sidebar:hover{width:var(--sidebar-width-expanded)}.sidebar-link{display:flex;align-items:center;text-decoration:none;color:var(--dark-primary);padding:15px 20px;margin-bottom:5px;font-size:1.1em;white-space:nowrap;transition:background-color .2s,color .2s}.sidebar-link:hover{background-color:#f0f0f0;color:var(--accent-color)}.sidebar-link.active{background-color:var(--accent-color);color:var(--dark-primary);font-weight:700;border-radius:0 50px 50px 0}.sidebar-link i{width:25px;font-size:1.3em;transition:color .2s}.link-text{margin-left:15px;opacity:0;transition:opacity .3s ease-in-out}.left-sidebar:hover .link-text{opacity:1}.main-content-area{margin-left:var(--sidebar-width-collapsed);padding:0 20px 20px;transition:margin-left .3s ease-in-out}.left-sidebar:hover+.main-content-area{margin-left:var(--sidebar-width-expanded)}.game-holder-div{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px;padding:3% 20%}.game-holder{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 6px 15px rgba(0,0,0,.15)}.game-holder img{width:100%;height:100%;object-fit:cover;display:block}.game-holder-small{height:140px}.game-holder-medium{height:200px}.game-holder-large{height:320px}@media (max-width:480px){.login-btn{width:100%;font-size:18px;padding:14px}.mainContent{margin-top:80px}}@media (max-width:768px){.menu-toggle{display:block;background:0 0;border:none;color:#fff;font-size:1.5em;cursor:pointer}#leftSidebar,.nav-links{display:none}.header-container{justify-content:space-between}.user-actions{gap:10px}#leftSidebar.active{display:block}}ding: 20px;padding-top: 0;transition: margin-left 0.3s ease-in-out;}
.left-sidebar:hover + .main-content-area {margin-left: var(--sidebar-width-expanded);}


/* Game Grids */
   .game-holder-div {display: grid;grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));gap: 18px;padding-left:20%;padding-right:20%;padding-top: 3%;padding-bottom: 3%;}
    .game-holder {border-radius: 18px;overflow: hidden;background: #fff;box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);}
    .game-holder img {width: 100%;height: 100%;object-fit: cover;display: block;}
    .game-holder-small {height: 140px;}
    .game-holder-medium {height: 200px;}
    .game-holder-large {height: 320px;}




@media (max-width: 1024px) {
    .game-holder-div {
        padding-left: 10%;
        padding-right: 10%;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    #blog-div {
        padding: 35px;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
}

@media (max-width: 768px) {

    /* Hide desktop nav */
    .nav-links {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    /* Sidebar for mobile */
    .left-sidebar {
        display: none;
        width: var(--sidebar-width-expanded);
        position: fixed;
        z-index: 999;
    }

    .left-sidebar.active {
        display: block;
    }

    /* Content adjusts */
    .main-content-area {
        margin-left: 0 !important;
        padding: 15px;
    }

    #blog-div {
        padding: 25px;
    }

    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }
}
@media (max-width: 480px) {

    .game-holder-div {
        padding-left: 5%;
        padding-right: 5%;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .login-modal-content {
        width: 90%;
    }

    footer {
        text-align: center;
    }
}


@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
  }

  .nav-links {
    display: none;
  }

  .header-container {
    justify-content: space-between;
  }

  .user-actions {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .login-btn {
    width: 100%;
    font-size: 18px;
    padding: 14px;
  }

  .mainContent {
    margin-top: 80px;
  }
}
@media (max-width: 768px) {
#leftSidebar{
    display: none;
}
#leftSidebar.active {
    display: block
}
}

.game-holder:hover img {
  transform: scale(1.08);
}
.page-center {display: flex;flex-direction: column;justify-content: center;align-items: center;min-height: 80vh;text-align: center;}