User:Aardvark/EmaStyle.css

.page-subcontainer > .ema-prologue.navigation
{
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}

.ema-prologue.navigation.direct
{
    display: flex;
    justify-content: space-between;
}

.ema-prologue.nav-button
{
    background-color: #231816;
    border-radius: 4px;
}

.ema-prologue.nav-button p,
.ema-prologue.left p,
.ema-prologue.right p
{
    margin: 0;
    padding: 0.5em;
}

.ema-prologue.nav-button a,
.ema-prologue.nav-button a:visited
{
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
}

.ema-prologue.next,
.ema-prologue.previous
{
    width: 152.64px;
}

.ema-prologue.navigation.choice
{
    display: grid;
    grid-template-columns: 49% 49%;
    grid-gap: 2%;
}

.ema-prologue.navigation.choice.single
{
    grid-template-columns: auto;
}

.ema-prologue.navigation.choice + .ema-prologue.navigation.choice
{
    margin-top: 1em;
}

.ema-prologue.left,
.ema-prologue.right
{
    background: #dae4ea;
    border: 1px solid black;
    border-radius: 9px;
    padding: .5em;
}

.ema-prologue.left a, 
.ema-prologue.right a,
.ema-prologue.left a:visited, 
.ema-prologue.right a:visited
{
    color: #595758;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.ema-prologue.left a:hover,
.ema-prologue.right a:hover
{
    text-shadow: 0 0 4px #ee0e0f;
    text-decoration: none;
}

.ema-prologue.left .nav-button a:hover,
.ema-prologue.right .nav-button a:hover
{
    text-shadow: unset;
}

.lyric-left
{
    text-align: left;
}

.lyric-right
{
    text-align: right;
}

.lyric-italic
{
    font-style: italic;
}

.lyric-underline
{
    text-decoration: underline;
}

.lyric-strike
{
    text-decoration: line-through;
}

.lyric-title
{
    font-size: 150%;
}

.lyric-spoken
{
    color: #b5b5b5;
}

.lyric-life
{
    color: #4EA1C7;
    text-shadow: 0 0 1px #4EA1C7;
}

.lyric-life.glow
{
    text-shadow: 0 0 1px #1F31B8, 0 0 16px #1F31B8;
}

.lyric-death
{
    color: #855AA0;
    text-shadow: 0 0 1px #855AA0;
}

.lyric-death.only-shadow
{
    color: initial;
    text-shadow: 0 0 1px #855AA0, 0 0 8px #855AA0, 0 0 16px #855AA0, 0 0 8px #855AA0;
}

.lyric-curse
{
    color: #9A72B2;
    text-shadow: 0 0 1px #9A72B2;
}

.lyric-curse.only-shadow
{
    color: initial;
    text-shadow: 0 0 1px #9A72B2, 0 0 4px #9A72B2, 0 0 8px #9A72B2, 0 0 16px #9A72B2, 0px 0 6px #9A72B2;
}

.lyric-shadow
{
    color: #595758;
    text-shadow: 0 0 1px black;
}

.lyric-shadow.glow
{
    text-shadow: 0 0 1px black, 0 0 16px black;
}

.lyric-light
{
    color: #FEC15F;
    text-shadow: 0 0 1px #FC733E;
}

.lyric-light.glow-happy
{
    text-shadow: 0 0 1px #FC733E, 0 0 16px #ffd600;
}

.lyric-light.glow
{
    text-shadow: 0 0 1px #FC733E, 0 0 16px #FC733E;
}

.lyric-light.only-shadow
{
    color: initial;
    text-shadow: 0 0 4px #FC733E, 0 0 16px #FC733E;
}

.lyric-wish
{
    color: #ff2027;
    text-shadow: 0 0 1px #ff2027;
}

.lyric-revenge
{
    color: #BF1F24;
    text-shadow: 0 0 1px #BF1F24;
}

.lyric-revenge.glow
{
    text-shadow: 0 0 1px #BF1F24, 0 0 8px #ff0000, 0 0 16px #ff0000;
}

.lyric-dusk
{
    color: #1F31B8;
    text-shadow: 0 0 1px #1F31B8;
}

.lyric-water
{
    color: #0064AF;
    text-shadow: 0 0 1px #0064AF;
}

.lyric-sin
{
    color: #E00011;
    text-shadow: 0 0 1px #E00011;
}

.lyric-fate
{
    color: #A5195D;
    text-shadow: 0 0 1px #A5195D;
}

.lyric-suffering
{
    color: #9D0F1C;
    text-shadow: 0 0 1px #9D0F1C;
}

.lyric-whitewalls
{
    color: white;
    text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 8px black, 0 0 16px black;
}

.lyric-heart
{
    color: #E84B93;
    text-shadow: 0 0 1px #E84B93;
}

@media only screen and (max-width : 1000px){
    .ema-prologue.navigation.direct
    {
        align-content: space-between;
    }

    .page-subcontainer > .ema-prologue.navigation
    {
        width: 100%;
    }

    .ema-prologue.next,
    .ema-prologue.previous
    {
        width: 48px;
        text-align: center;
    }
 
    .ema-prologue.navigation.choice
    {
        display: block;
    }

    .ema-prologue.alternative.nav-button + .ema-prologue.alternative.nav-button
    {
        margin-top: 1em;
    }

    .ema-prologue.left:first-child
    {
        margin-bottom: 1em;
    }
}