*{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family:Segoe UI,Arial,sans-serif;
        }

        body{
            background:#0f0f0f;
            color:#fff;
        }

        header{
            position:fixed;
            top:0;
            width:100%;
            height:70px;
            background:#111;
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:0 20px;
        }

        .logo{
            font-size:28px;
            font-weight:700;
            color:#ffdf00;
        }

        .logo span{
            color:#009739;
        }

        .search{
            display:flex;
            width:50%;
        }

        .search input{
            flex:1;
            padding:14px;
            background:#181818;
            color:#fff;
            border:1px solid #333;
            border-radius:30px 0 0 30px;
        }

        .search button{
            width:60px;
            background:#222;
            color:#fff;
            border:none;
        }

        .sidebar{
            position:fixed;
            top:70px;
            left:0;
            width:240px;
            height:100%;
            background:#121212;
            padding:15px;
        }

        .sidebar a{
            display:flex;
            gap:12px;
            padding:14px;
            color:#fff;
            text-decoration:none;
            border-radius:10px;
        }

        .sidebar a:hover{
            background:#222;
        }

        main{
            margin-left:240px;
            padding:90px 20px;
        }

        .cats{
            display:flex;
            gap:10px;
            margin-bottom:20px;
            overflow:auto;
        }

        .cats button{
            padding:10px 18px;
            border:none;
            border-radius:20px;
            background:#272727;
            color:#fff;
            cursor:pointer;
        }

        .grid{
            display:grid;

            grid-template-columns:
                repeat(
                    auto-fill,
                    minmax(340px,1fr)
                );

            gap:25px;
        }

        .card{
            transition:.3s;
            cursor:pointer;
        }

        .card:hover{
            transform:translateY(-5px);
        }

        .thumb{
            height:210px;

            border-radius:16px;

            background:
            linear-gradient(
                135deg,
                #002776,
                #009739,
                #ffdf00
            );
        }

        .info h3{
            margin:10px 0;
        }

        .meta{
            color:#aaa;
        }

        /* RESPONSIVO */

@media (max-width: 768px){

    .sidebar{
        display:none;
    }

    main{
        margin-left:0;
        padding:90px 15px;
    }

    .search{
        width:70%;
    }

    .grid{
        grid-template-columns:1fr;
    }

}

@media (max-width: 480px){

    .logo{
        font-size:22px;
    }

    .search{
        width:60%;
    }

    .search input{
        padding:10px;
    }

    .thumb{
        height:180px;
    }

}

.video-player{

    width:100%;
    height:250px;

    border:none;

    border-radius:20px;
}