* {
margin: 0;
padding: 0;
}
#sound-svg {
color: #fff;
transform: scale(2);
position: absolute;
bottom: 4rem;
left: 8rem;
cursor: pointer;
z-index: 3;
}
#sound-svg:hover {
transition: all 0.5s ease-in-out;
transform: scale(2.4);
}
.container {
height: 100vh;
animation: sunrise 60s forwards;
}
.image-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.video-content {
display: flex;
position: absolute;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
z-index: 2;
transition: all ease-in-out;
transform: translate(25%, 25%);
animation: moveVideo 40s infinite;
animation-delay: 30s;
}
#video {
border-radius: 10px 27px 14px 25px;
width: 100px;
animation: scaleVideoMobile 100s forwards;
@media all and (min-width: 600px) {
width: 300px;
animation: scaleVideoDesktop 100s forwards;
}
}
@keyframes moveVideo {
0% {
transform: translate(25%, 25%);
}
12.5% {
transform: translate(30%, 0%);
}
25% {
transform: translate(25%, -25%);
}
37.5% {
transform: translate(0%, -30%);
}
50% {
transform: translate(-25%, -25%);
}
62.5% {
transform: translate(-30%, 0%);
}
75% {
transform: translate(-25%, 25%);
}
87.5% {
transform: translate(0%, 30%);
}
100% {
transform: translate(25%, 25%);
}
}
@keyframes scaleVideoMobile {
0% {
width: 100px;
}
100% {
width: 300px;
}
}
@keyframes scaleVideoDesktop {
0% {
width: 300px;
}
100% {
width: 600px;
}
}
@keyframes sunrise {
0% {
background-color: rgba(0, 0, 0, 0.6);
}
100% {
background-color: rgba(0, 0, 0, 0);
}
}