body {
margin: 10;
font-family: Arial;
background: rgb(16, 0, 0);
color: rgb(124, 123, 175);
}

/* HERO */
.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
animation: fadeIn 2s ease;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}

/* MENU */
.menu {
position: fixed;
right: -100%;
top: 0;
width: 200px;
height:100%;
background: #851010;
transition: 0.2s;
}

.menu.active {
right: 00;
}

.menu a {
display: block;
padding: 50px;
}

/* CARDS */
.cards {
display: flex;
gap: 10px;
padding: 10px;
}

.card {
background: #690505;
padding: 40px;
transition: 0.3s;
}

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

/* GALLERY */
.gallery {
display: flex;
overflow-x: scroll;
}

.gallery img {
width: 250px;
margin: 150px;
}.player {
position: fixed;
bottom: 0;
width: 100%;
background: #760a0ac2;
padding: 15px;
text-align: center;
}

#playBtn {
background: none;
border: none;
color: rgb(206, 3, 3);
font-size: 20px;
cursor: pointer;
margin: 10px;
transition: 0.2s;
}

#playBtn:hover {
transform: scale(1.2);
}

/* PROGRESS BAR */
.progress-container {
width: 100%;
height: 5px;
background: #7b4e4e;
cursor: pointer;
}

.progress {
height: 5px;
width: 0%;
background: rgb(134, 24, 24);
transition: width 0.1s linear;
.player {
animation: slideUp 0.5s ease;
}

@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
}
.controls button {
background: none;
border: none;
color: rgb(4, 1, 1);
font-size: 20px;
margin: 0 10px;
cursor: pointer;
transition: 0.2s;
}

.controls button:hover {
transform: scale(1.3);
color: rgb(187, 167, 167);
}