body{

    background:#111;

    color:white;

    overflow-x:hidden;

}

.hero{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:linear-gradient(#4aa3ff,#75d5ff);

}

.hero h1{

    font-size:3rem;

    margin-bottom:30px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    justify-content:center;

    margin-top:40px;

}

.player{

    display:flex;

    gap:60px;

    align-items:center;

}

.projects{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}

.projects img{

    width:100%;

}

.floating{

    animation:float 3s ease infinite;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}