body{
    background:black;
    color:white;
    font-family:Arial;
    text-align:center;
    overflow:hidden;
    transition:1s;
}

h1{
    color:red;
    font-size:3rem;
    margin-top:20px;
}

button{
    padding:15px 25px;
    margin:20px;
    border:none;
    border-radius:10px;
    background:red;
    color:white;
    cursor:pointer;
    font-size:1rem;
}

#output{
    margin-top:20px;
    font-size:1.2rem;
}

#characterImage{
    width:300px;
    margin-top:20px;
    transition:1s;
}

/* =========================
   EFFECT TEXT
========================= */

#effectText{
    font-size:3rem;
    color:white;
    margin-top:20px;
    font-weight:bold;
    text-shadow:0 0 20px white;
}

/* =========================
   AURA
========================= */

#aura{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    opacity:0;
    transition:1s;
}

/* =========================
   DOMAIN EXPANSION
========================= */

.domain{
    animation:domainFlash 1s infinite;
}

@keyframes domainFlash{

    0%{
        background:black;
    }

    50%{
        background:purple;
    }

    100%{
        background:black;
    }
}

/* =========================
   BLACK FLASH
========================= */

.blackFlash{
    animation:blackFlashAnim 0.3s infinite;
}

@keyframes blackFlashAnim{

    0%{
        background:black;
    }

    50%{
        background:red;
    }

    100%{
        background:black;
    }
}