.intro { video { position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; width: 100%; height: auto; z-index: -100; } label { position: relative; z-index: 2; cursor: pointer; font-size: 20px; &:before { content: ''; position: absolute; width: 2px; height: 30px; background: #fff; bottom: 2px; left: 50%; border-radius: 1px; transform: rotate(45deg) scaleY(0); transition: transform 0.3s; } &.muted { &:before { transform: rotate(45deg) scaleY(1); } } } .description { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; h1 { color: #f5f677; font-weight: bolder; font-size: 4vw; margin-bottom: 0; font-family: 'FontfabricNexaBlack'; } p { white-space: pre-line; font-size: 1.5vw; margin-top: 0; font-weight: 900; margin-bottom: 50px; } a { color: #f5f677; border: 1px solid #f5f677; padding: 7px 30px; border-radius: 30px; font-size: 12px; letter-spacing: 3px; font-family: 'FontfabricNexaBlack'; transition: all ease 0.3s; &:hover { color: black; background-color: #f5f677; } } @media(max-width: 767px) { h1 { font-size: 7vw; } p { font-size: 3vw; } } } .footer { position: fixed; bottom: 50px; left: 0; right: 0; z-index: 9; display: flex; justify-content: space-between; max-width: 80%; margin: auto; img { width: 20px; height: 20px; } } .socials a { font-size: 22px; &:hover { color: #f5f677; transition: all ease 0.3s; } } @media (max-width: 768px) { video { top: 50%; transform: translateY(-50%); } } #overlay { position: absolute; top: 0; left: 0; display: flex; z-index: 1; width: 100%; height: 100%; background: rgba(0,0,0,0.8); align-items: center; justify-content: center; visibility: visible; font-size: 60px; opacity: 1; transition: all 0.3s; span { display: inline-block; margin: 3px; animation: dot 0.5s infinite alternate; transform: translateY(-10px); &:nth-child(2) { animation-delay: 0.1s; } &:nth-child(3) { animation-delay: 0.2s; } } &.hidden { opacity: 0; visibility: hidden; } } }