/*header*/
        body{ background-color: #000000; color: #ffffff; font-family: sans-serif; margin: 0;}
        .header {display: flex; align-items: center; width: 90%; margin: 20px auto;}
        .header-right {margin-left: auto; display: flex; gap: 10px; align-items: center;}
        h1{ margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -1px; }
        .fa-gamepad {color: #096cce; margin-left: 10px; font-size: 33px;}
        .header form{display: flex; gap: 10px; align-items: center;}
        .search-input {flex: 1; background-color: #1c1c1e; border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 20px; padding: 15px 25px; color: #ffffff;font-size:16px;text-align: left;outline: none; gap: 2px;}
        .search-input:hover {transform: scale(1.01); background-color: #2c2c2e;}
        .search-btn {background-color: #096cce;color: white;border: none; padding: 15px 25px;border-radius: 20px;font-weight: 600;font-size: 14px;}
        .search-btn:hover {background-color: #0656a7;}
        /*thene switch*/
        .checkbox {opacity: 0; position: absolute;}
        .label{position: relative;background-color: #333; display: flex; align-items: center; padding: 5px; border-radius: 50px; cursor: pointer; height: 26px; width: 50px; }
        .ball{ background-color: #fff; border-radius: 50px; position: absolute; top:2px; left: 2px; height: 30px; width: 30px; transition:transform 0.2s;}
        .checkbox:checked + .label .ball {transform: translateX(25px);}
        .fa-sun {color: #f1c40f; margin-right: 6px;}
        .fa-moon {color: #0656a7; margin-left: 6px;}
        /*body*/
        .games-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; width: 91%; margin: 0 auto;}
        .card {background-color: #1c1c1e; border-radius: 20px; padding: 15px; transition: 0.2s; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer;}
        .card:hover {transform: translateY(-5px); background-color: #2c2c2e;}
        .card img {width: 100%; height: 400px; object-fit: cover; border-radius: 15px; margin-bottom: 15px; background-color: #333;}
        .card h3 {margin: 0; font-size: 18px; font-weight: 600;}
        .card p {color: #8e8e93; font-size: 14px; margin-top: 5px;}
        .btn {display: block; background-color: #096cce; color: white; text-decoration: none;  text-align: center; padding: 10px; border-radius: 20px; margin-top: 15px; font-weight: 600; font-size: 14px;}
        .btn:hover {background-color:  #0656a7;}
        
        /*responsywność*/ 
        @media (max-width: 600px) {
        .header { flex-direction: column; gap: 12px; }
        form { width: 100%; display: flex; gap: 8px; } 
        form .search-input { flex: 1; }
        form .search-btn { flex-shrink: 0; }
        .card img { height: 400px; }
        }
        /*zmiana motywu*/
        body.light-mode {background-color: #f0f2f5; color: #000000;}
        body.light-mode .search-input {background-color: #f8f8f8; border: 1px solid rgba(0, 0, 0, 0.1); color: #000000;}
        body.light-mode .search-input:hover {background-color: #e0e0e0;}
        body.light-mode .label {background-color:#0656a7;}
        body.light-mode .card {background-color: #ffffff; border: 2px solid #e2e5e9;}
        body.light-mode .card:hover {background-color: #d4d4d4;}
        body.light-mode .h3 {color: #1a1a1b;}
        body.light-mode .p {color: #1d1d1f;}