Reyna Amethyst CP

[html]
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Special+Elite&family=Tangerine:wght@400;700&display=swap" rel="stylesheet">

<style>
body{
    font-family: 'Cinzel', serif;
}

img{
    max-width: 100%;
    height: auto;
}

video{
    position: relative;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
}

.wrapper{
    width: 100%;
}

.intro{
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro-card{
    position: absolute;
    width: 25%;
    background-color: #000;
    overflow: none;
}

.intro-card-img{
    position: relative;
    z-index: 1;
}

.intro-card-img2{
    filter: invert(100%);
    position: absolute;
    top: 50;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 50%;
}

.intro-card:hover .intro-card-img{
    transition: 2s all;
    opacity: 0;
}

.intro-card-description{
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
}

.intro-card-description h2{
    font-size: 36px;
}

.main{
    margin: 30px;
}

.main h1{
    font-size: 48px;
    color: white;
    text-align: center;
}

</style>

<section class="intro">
    <video autoplay muted loop id="myVideo">
        <source src="https://cdn.discordapp.com/attachments/420296721906663434/926627072997228554/Particles.mp4" type="video/mp4">
    </video>

    <div class="intro-card">
        <img src="https://1.bp.blogspot.com/-KLU24gX97bI/Xcsb8k_thbI/AAAAAAAAE_I/v2R3LFpfuw8r3rZF_JT6ERBVWTw25LkhQCLcBGAsYHQ/s1600/fef624999eb02c648647ec4bbbf2c313.jpg" class="intro-card-img">
        <div class="intro-card-description">
        </div>
        <img src="https://i.imgur.com/2GoHvs9.png" class="intro-card-img2">
    </div>

</section>

<section class="main">
    <h1>Reyna Amethyst</h1>
</section>
[/html]