*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --surface-color:#1e293b;
    --primary-color:#6366f1,#4f46e5;
    --secondary-color:#2ecc71;
    --accent-color:#e74c3c;
    --background-color:#0f172a;
    --bg-card-color:rgba(30,41,59,0.8);
    --text-color:#ffffff;
    --tg-bg-color:#334155;
    --tg-border-color:rgba(71,85,105,0.8);
    --bg-xbox:#107c10;
    --bg-ps:#003087;
    --bg-nintendo:#e60012;
    --bg-pc:#4d4d4d;
}
/*General styles*/
body {
    font-family: arial;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    padding: 20px;
}
header{
    margin-bottom:20px;
    border-bottom: 1px solid #444;
}
.logo{
    position: relative;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
    img{
        width:50px;
        height:50px;
    }
    h1{
        font-size:24px;
        color:#fff;
    }
    h6{
        position:absolute;
        font-size:10px;
        color:#ccc;
        top:36px;
        left:60px;
        font-weight:400;
    }
}
.main-content{
    display:flex;
}
.section-content{
    margin:0 auto;
    max-width:1200px;
    width:100%;
    display:flex;
    gap:20px;
    border:1px solid var(--surface-color);
    padding:26px;
    border-radius:14px;
    background-color:var(--tg-bg-color);

}
.side-bar{
    width:220px;
    padding-right:20px;
    border-right: 1px solid #444;
    color:#ffff;
    font-size:14px;
    .tag-container{
        
        position:fixed;
        width: 200px;
        gap:10px;
        margin-top:15px;
       
        label{
            display:inline-block;
            cursor:pointer;
            input[type="checkbox"]{
                margin-right:5px;
            }
        }
    }
}
.grid{
    flex:1;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 320px));
    gap:14px;
    justify-content:center;

}
.card{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:0 0 15px;
    background-color:var(--bg-card-color);
    flex-wrap:wrap;
    justify-content:space-evenly;
    border-radius:14px;
    box-shadow:0 4px 8px rgba(0,0,0,0.2);
    .imgcard{
        border-radius: 14px 14px 0 0;
        
        background-size:cover;
        background-position:center;
        height:200px;
    }
    .card-content{
        padding:10px 15px;
        color:#fff;
        display:flex;
        flex-direction:column;
        gap:8px;
        .pretitle{
            font-size:14px;
            color:#fff6f6;
            display:flex;
            justify-content:space-between;
            align-items:center;
                .rate{
                    background-color: var(--background-color);
                    padding:2px 6px;
                    border-radius:8px;
                    font-size:12px;
                    font-weight: 800;
                    color:#ffd000;
                }

        }
        .game-title{
            height: 80px;
        }
        h2{
            color:#fff;
        }
        h3{
            font-size:16px;
            color:#e0e0e0;
        }
        p{
            font-size:14px;
            color:#ccc;
            height: 100px;
            overflow: auto;
        }
        .tags{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
            padding-bottom: 10px;
            padding-top:100;
            .tag{
                height: 20px;
                background-color:var(--tg-bg-color);
                border:solid 1px var(--tg-border-color);
                color:#fff;
                padding:2px 10px;
                border-radius:8px;
                font-size:10px;
            }
        }
        .platform{
            border-top:solid 1px #444;
            padding-top:10px;
            display:flex;
            gap:10px;
            span{
                font-size:14px;
                color:#ddd;
                padding:4px 8px;
                border-radius:8px;
            }
            img{
                width:24px;
                height:24px;
            }
        }
    }
    &.hidden{
        display:none;
    }
}
.card:hover{
   cursor: pointer;
   transform:scale(103%);
   transition: transform 2s;
}

/*Filter styles*/
.search-box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    color:whitesmoke;
    input[type="search"]{
        width: 300px;
        padding: 10px 15px;
        border-radius: 8px;
        border: none;
        font-size: 16px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    button[type="submit"]{
        background-color:var(--secondary-color);
        border:none;
        color:var(--primary-color);
        padding:10px 15px;
        border-radius:6px;
        margin-left:10px;
        font-size:16px;
        font-weight: 600;
    }
    button[type="submit"]:hover{
        background-color:var(--accent-color);
        color:#fff;
        cursor:pointer;
    }
    select{
        margin-left:10px;
        padding:10px 15px;
        border-radius:8px;
        border:none;
        font-size:16px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    
}

footer{
    margin-top:30px;
    border-top: 1px solid #444;
    padding-top:10px;
    text-align:center;
    color:#888;
    font-size:14px;
}

/*Responsive styles*/
    @media screen and (max-width: 600px) {
        select{
            margin-top:10px;
            margin-left:0 !important;
        }
        .main-content{
            flex-direction:column;
        }
        .side-bar{
            width:100%;
            border-right:none;
            border-bottom:1px solid #444;
            padding-bottom:20px;
            margin-bottom:20px;
            font-size:12px;
            text-align: center;
            .tag-container{
                position:static;
                width:100%;
                gap:8px;
                margin-top:0;
                justify-content:center;
            }
        }
        .grid{
            grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
        }
    }


    /*Page game*/
    .breadcrumbs{
        max-width: 1200px;
        margin:0 auto;
        margin-bottom:10px;
        
        a{
            color:#ffffff;
            text-decoration:none;
            margin-right:5px;
            font-size:14px;
        }
        a:hover{
            text-decoration:underline;
        }
    }
    .title{
        margin:0 auto;
        max-width:1200px;
        text-align:left;
        margin-bottom:20px;
        h2{
            font-size:28px;
            color:#fff;
        }
    }
    .left-column{
    width:60%;
    padding-right:20px;
    border-right: 1px solid #444;
        
        .trailer-game{
            width:100%;
            margin-bottom:20px;
            iframe{
                width:100%;
                height:400px;
                border-radius:8px;
            }
        }
        .gallery{
            display:flex;
            gap:10px;
            overflow-x:auto;
            img{
                width:150px;
                height:100px;
                object-fit:cover;
                border-radius:8px;
                cursor:pointer;
            }
        }
    }
    .right-sidebar{
    width:40%;
    padding-right:20px;
    border-right: 1px solid #444;
    color:#ffff; 
    font-size:14px;
       .portrait-game{
        width:100%;
        
        img{
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius:8px;
        }
       }
       .game-description{
        margin-top:15px;
        margin-bottom:15px;
        p{
            font-size:14px;
            color:#ccc;
        }
       }
       .tags{
            display:flex;
            gap:8px;
            align-items: center;
            flex-wrap:wrap;
            padding-bottom: 10px;
            padding-top:100;
            .tag{
                height: 20px;
                background-color:var(--tg-bg-color);
                border:solid 1px var(--tg-border-color);
                color:#fff;
                padding:2px 10px;
                border-radius:8px;
                font-size:10px;
            }
        }

        .platform{
            margin-top:15px;
            border-top:solid 1px #eeeeee;
            padding-top:10px;
            display:flex;
            gap:10px;
            span{
                font-size:14px;
                color:#ddd;
                padding:4px 8px;
                border-radius:8px;
            }
            img{
                width:24px;
                height:24px;
            }
        }
    }
    /*Responsive Page Game*/
    @media screen and (max-width: 860px) {
        .section-content{
            border-right:none;
            width:100%;
            display:flex;
            flex-direction: column;
            gap:20px;
 
        }
        .left-column{
            width:100%;
            border-right:none;
            padding-right: 0;
            padding-bottom:20px;
            border-bottom: 1px solid #444;
        }    
        .right-sidebar{
            border-right:none;
            width:100%;
            padding-right: 0;
            padding-bottom:20px;
            
        }
    }