[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=Corinthia:wght@400;700&family=Roboto:wght@300;500&family=Special+Elite&display=swap" rel="stylesheet">

<style>
*{
    box-sizing: content-box;
}

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

body{
    margin: 0px;
    font-family: 'Special Elite', cursive;
}

.intro{
    font-family: "Trebuchet MS", "Arial", "Helvetica", sans-serif;
    text-align: center;
    font-style: italic;
    padding: 80px;
}

.intro p{
    margin: 40px;
}

.intro p:hover{
    color: #800000;
    transition: all 2s;
}

.intro img:hover{
    filter: invert(100%);
    transition: all 2s;
}

.general{
    display: flex;
    justify-content: center;
    padding: 80px;
}

.general-card{
    width: 400px;
    height: 600px;
    background-color: transparent;
    border: 1px solid black;
    position: relative;
    align-items: center;
    box-shadow: 0px 0px 16px 10px #000000;
    transition: all 2s;
    border-radius: 10px;
}

.general-card img{
    width: 400px;
    height: 600px;
}

.card-title{
    position: absolute;
    text-align: center;
    top: 35%;
    left: 13%;
    font-size: 48px;
    color: #000;
    line-height: 80px;
    text-shadow: #800000 0px 0px 5px, #800000 0px 0px 10px, #800000 0px 0px 15px, #800000 0px 0px 20px, #FF2D95 0px 0px 30px, #FF2D95 0px 0px 40px, #FF2D95 0px 0px 50px, #FF2D95 0px 0px 75px;
}

.general-card:hover{
    background-color: #560000;
    transition: all 2s;
}

.general-card:hover img{
    display: none;
}

.general-card:hover .card-title{
    display: none;
}

.card-description{
    position: absolute;
    display: none;
    width: 400px;
    height: 600px;
    font-size: 24px;
    line-height: 62px;
    padding: 10px;
    color: #000;
}

.card-description h3{
    display: flex;
    justify-content: center;
    font-size: 32px;
    padding: 32px 0px 32px 0px;
}

.general-card:hover .card-description{
    display: block;
    justify-content: start;
}

.appearance{
    font-size: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 25px;
}

.appearance img:hover{
    filter: invert(100%);
    transition: all 2s;
}

.appearance p:hover{
    color: #800000;
    transition: all 2s;
}

.socials{
    padding: 80px 0px 80px 0px;
}

.static-relations{
    display: flex;
    justify-content: space-around;
    margin-top: 60px
    margin-bottom: 60px;
}

.relation-big{
    max-width: 45%;
    width: 400px;
    height: 600px;
    border: 1px solid black;
    background-color: transparent;
    position: relative;
}

.relation-big:hover{
    background-color: #560000;;
    transition: all 2s;
}

.relation-big:hover img{
    display: none;
}

.relation-big:hover h2{
    display: none;
}

.relation-big:hover .card-description{
    display: block;
}

.relation{
    margin: 15px;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.relation-description{
    margin: 15px;
    font-size: 15px;
}

.relation-description h2{
    color: #800000;
    font-size: 32px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.relation:hover p{
    color: #800000;
    transition: all 2s;
}

.footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Trebuchet MS", "Arial", "Helvetica", sans-serif;
    text-align: center;
    font-style: italic;
    padding: 80px;
}

.footer-cards{
    display: flex;
    justify-content: center;
}

.footer p{
    margin: 40px;
}

.footer-img:hover{
    filter: invert(100%);
    transition: all 2s;
}

.footer p:hover{
    color: #800000;
    transition: all 2s;
}

.invisible{
    display: none;
}

</style>

<div class="invisible">
<audio controls autoplay>
<source src="https://cdn.discordapp.com/attachments/420296721906663434/797075362982789120/Demonic_Whispers.mp3" type="audio/mpeg">

Your browser does not support the audio element.
</audio>
</div>

<section class="intro">
<img src="https://i.imgur.com/h1vjDqt.png">
<p>Like the rest of her kind, she has forever said her farewell to the light.<br>
Hunting the nights, living on the remnants of others' lives...<br>
But what do the other Childer of Caine truly know of darkness?</p>
<img src="https://i.imgur.com/dP2Tubo.png">
</section>

<section class="general">
<div class="general-card">
    <h2 class="card-title">General<br>Information</h2>
    <img src="https://i.imgur.com/LKLi91S.jpg" style="border-radius: 10px;">
    <div class="card-description">
        <h3>General Information</h3>
        <p>Legal Name: Camila Blackrose<br>
Given Name: <span style="color: transparent; text-shadow: 0 0 8px rgba(0,0,0,0.5);">Carmel Haddad<span style="color: black; text-shadow: 0 0 0px rgba(0,0,0,0);"><br>
Birth: October 31, 1613<br>
Race: Vampire (?)<br>
Bloodline: Demons<br>
Allegiance: Azaneali<br>
Sire: Dad</p>
    </div>
</div>
</section>

<section class="appearance">
<img src="https://i.imgur.com/LCixT9v.png" width="512px" height="512px">
<p>Camila usually will not wander around with her true appearance, she adapts like a chameleon, fitting herself and her behavior into the environment, she might appear as anything and anyone; Thus, there are only a few who really knows what truly lies beneath. When Camila does not put her disguise up however, she can be recognized as a young businesswoman in her early twenties. While she is indeed once used to appear somewhat like a Mesopotamian, though with extraordinarily pale skin that sort of disguised it, she now appears to be Asian... (?) Regardless of her ethnicity, her English is very fluent and it is hard to tell whether she is a native speaker or not.
Camila usually looks down on everything and anyone, believing this world is rotten to its core and doomed from the first place, she believes - she knows, that the only way to cure it is to bring the end. While she does possess a morbid world view, she refrains from actually showing it as it can question the integrity of her disguise. Most people do stay below her radar while the faithful and the scholar stand as a beacon in the darkness to her and her malicious conspiracies.
No matter where she goes, the mark of the doom accompanies her, filling the room with menace in such a mysterious way that both frighten and allure her surroundings. Subverting their minds and dominating them into submission like puppets on strings under her control.</p>
</section>

<section class="socials">

    <div class="static-relations">
        <div class="relation-big">
            <h2 class="card-title">Children of the<br>Outer Dark</h2>
            <img src="https://i.imgur.com/yPH0sGJ.jpg" width="400px" height="600px">
            <div class="card-description">
                <h3>Sleeping Children</h3>
                <p style="line-height: 28px;">Predators to all, older than reality as we know it, the ones who predate even the Fallen, yet got earth steamrolled on top of them just to find themselves buried under the soil and cast into an eternal prison in the darkness. So have happened to the Fallen, which proves to be a repeated history. These creatures hold the keys to the universe and will one day burst out of their shackles to lay their destruction and end the existence.</p>
            </div>
        </div>

        <div class="relation-big">
            <h2 class="card-title">Vampires</h2>
            <img src="https://i.imgur.com/z5Gfeja.jpg" width="400px" height="600px">
            <div class="card-description">
                <h3>Vampires</h3>
                <p style="line-height: 28px;">Cainites, the legacy of Caine... the ones with the given potential for "enter life", yet most fail to recognize that their unlives are merely temporary, and death comes to all by the end of the day. Those how cower from the truth usually end up manipulated by the Camarilla, and those who acknowledge it and try to prevent it side the Sabbat... yet nearly none of them is wise enough to comprehend that the end is inevitable... so why bother?</p>
            </div>
        </div>
    </div>

    <div class="static-relations">
        <div class="relation-big">
            <h2 class="card-title">Werewolves</h2>
            <img src="https://i.imgur.com/IBrCiQm.jpg" width="400px" height="600px">
            <div class="card-description">
                <h3>Werewolves</h3>
                <p style="line-height: 28px;">Half Spirits living in the flesh. Most will fight to death for their ideology to bring the Wyrm down, knowing that its minions are growing in size at an unstopabble pace. Yet not all of them are fooled by their Gaia, and those are willing to take the glimpse beyond and work with what they've got.</p>
            </div>
        </div>

        <div class="relation-big">
            <h2 class="card-title">Awakeneds</h2>
            <img src="https://i.imgur.com/jTmOaRQ.jpg" width="400px" height="600px">
            <div class="card-description">
                <h3>Awakeneds</h3>
                <p style="line-height: 28px;">Mere children with too much power in their hands. The majority are still foolish mortals, yet some have dared to take a glimpse beyond... combined with their incomprehensible power the results are deadly.</p>
            </div>
        </div>
    </div>

    <div class="relation">
        <img src="https://i.imgur.com/7GC9Yks.jpg" width="128px" height="128px" style="border-radius: 50%; box-shadow: 0px 0px 7px 7px #000000;">
        <div class="relation-description">
            <h2>The Blackrose Choir</h2>
            <p>My true brothers and sisters, perhaps the only people in the entire universe I would ever be able to put my trust in. As much as death is a holy and shall be savored, I sincerely can not say that I don't miss you, the ones who fell in Sinai to the Israeli army. One day I will bring the choir back to its blasphemous glory once again - I PROMISE.</p>
        </div>
    </div>

    <div class="relation">
        <img src="https://i.imgur.com/QYWoltC.png" width="128px" height="128px" style="border-radius: 50%; box-shadow: 0px 0px 7px 7px #000000;">
        <div class="relation-description">
            <h2>Damien Meark</h2>
            <p>The retired warrior of the place, a natural leader with an unshakeable personality. Used once to lead the Cainites around the place yet that is no longer the case. I look up to your deeds yet disappointed of the way you handle betrayal. Nonetheless, I still apreciate what you've done for me.</p>
        </div>
    </div>

    <div class="relation">
        <img src="https://i.imgur.com/Ue8cCow.jpg" width="128px" height="128px" style="border-radius: 50%; box-shadow: 0px 0px 7px 7px #000000;">
        <div class="relation-description">
            <h2>Victor Altman</h2>
            <p>Once a brainless wild animal who is unable to mutter a word properly, and now spitting words of wisedom. I formed my mind about you completely yet, though it seems like you're quite of the trusting type. I could use that fact against you, but the question is why would I?</p>
        </div>
    </div>

    <div class="relation">
        <img src="https://i.imgur.com/6xLeicq.jpg" width="128px" height="128px" style="border-radius: 50%; box-shadow: 0px 0px 7px 7px #000000;">
        <div class="relation-description">
            <h2>Ashley Barnes</h2>
            <p>Foolish mortal, yet for some reason I do find myself enjoying your presence. I treated you with great kindness, and now it is your turn to prove me that I was not wrong to extend my hand this far for you.</p>
        </div>
    </div>

</section>

<section class="footer">
    <div class="footer-cards">
        <img src="https://i.imgur.com/DpXilrq.png" class="footer-img">
        <img src="https://i.imgur.com/B3klckW.gif" class="footer-img">
    </div>
<p>This world has much greater powers than mere Kindred, those powers have names...
Names that are hidden in blood and shadows, away from the sight of the ignorant.
The Baali knows where they sleep, and someday will awaken them to lay their waste unto the world.</p>
<img src="https://i.imgur.com/YzWcWjh.png" class="footer-img">
</section>
[/html]