/* ======================== */
/* 
    Ignore the following styles. They are not important to achieve the effect.
    I'm only using them for looks (overall page background/font styles/centering content).
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
:root {
    --gradient: linear-gradient(90deg, #ee6352, purple, #ee6352, white,  #ee6352);
  
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #151515;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    height: 100vh;
    background-size: 300%;
    background-image: var(--gradient);
    animation: bg-animation 30s infinite;
}

    @keyframes bg-animation {
    0% {background-position: left}
    50% {background-position: right}
    100% {background-position: left}
}

/* ======================== */

.showcase {
    width: 100%;
    height: 99vh;
    position: absolute;
    top: 0px;
}

/* 
    To make the video full screen and scalable, we give it full width and height of the parent. Then we add position of absolute in conjunction with object fit over cover.
    This will help the video maintain it's aspect ratio when resizing the window.
*/

.showcase video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}


/* 
    To achieve this effect we will give the text element full width and height. Then we add a background to cover the video that is in the back.
    Then we use the mix blend mode to blend the text to the video on the back. Since the text is white, this is the only thing that will be blended
    and not the overall background. Keep in mind that this is a simple way to achieve this, so only certain color combinations will work. If you use a white background color,
    set the text color to black and then the mix blend mode to screen.
*/
.title {
    width: 100%;
    height: 100%;
    background-color: #000;
    font-size: 15vW;
    color: #fff;
    mix-blend-mode: multiply;
    position: absolute;
    text-align: center;
    line-height: 300%;
}

.title_card {
    width: 100%;
    height: 100%;
    background-color: transparent;
    font-size: 5vW;
    font-weight: 100;
    color: white;
    position: relative;
    top: 60vh;
    text-align: center;
    text-shadow: 0px 0px 20px black;
    line-height: 100%;
}

.contact {
    width: 100%;
    height: 100%;
    background-color: transparent;
    font-size: 3vW;
    font-weight: 100;
    color: white;
    position: relative;
    top: 62vh;
    text-align: center;
    text-shadow: 0px 0px 20px black;
    line-height: 100%;
}