* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
margin: 0;
min-height: 100vh;
text-align: center;
}
#wrap {
overflow: hidden;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 0;
}
.image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0;
visibility: hidden;
transition: all .3s ease-in-out;
}
.image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
.container > ul > li:first-child .image {
opacity: 1;
visibility: visible;
}
.container {
width: 100%;
height: 100%;
z-index: 999;
padding: 0;
}
.container > ul {
list-style: none;
width: 100%;
margin: 20% auto;
padding: 0;
}
.container-item {
padding: 0;
}
.link {
position: relative;
font-family: 'Nova Cut', cursive;
font-size: calc(1.5rem + 3vw);
font-weight: 600;
text-align: center;
text-decoration: none;
color: #FFF;
transition: opacity .3s ease-in-out;
}
.container-item.active .link + .image {
opacity: 1;
visibility: visible;
}
.container.hover .link {
opacity: .4;
}
.container-item.active .link {
opacity: 1;
}