*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
scroll-behavior:smooth;
}

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:20px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(0,0,0,.4);

    backdrop-filter:blur(10px);

    z-index:1000;

}

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

    padding-top:120px;

    text-align:center;

}

.container h1{

    color:mediumblue;

    font-size:45px;

    margin-bottom:30px;

}

.background{
position:fixed;
width:100%;
height:100%;
background:linear-gradient(45deg,#1b1f5f,#08122d,grey,navy);
background-size:400% 400%;
animation:gradient 12s infinite alternate;
z-index:-2;
}

@keyframes gradient{

0%{background-position:left;}
100%{background-position:right;}

}


.logo{

font-size:28px;
font-weight:bold;
color:darkblue;

}

nav a{

text-decoration:none;
color:white;
margin-left:25px;
transition:.4s;

}

nav a:hover{

color:blue;

}

.video-gallery{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:30px;

}



.video-card{

background:rgba(255,255,255,.1);

background-color: black;

padding:20px;

border-radius:20px;

backdrop-filter:blur(15px);

transition:.4s;

}



.video-card:hover{

transform:translateY(-10px);

box-shadow:0 0 25px #7ef9ff;

}



.video-card video{

width:100%;

height:250px;

object-fit:cover;

border-radius:15px;

border:3px solid white;

}



.video-card h3{

margin-top:15px;

color:white;

text-align: center;

}