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
{
    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.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;
}

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

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

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

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

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

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

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

.lyric-ema-red
{
    color: #C6161C;
}

@media only screen and (max-width : 1000px){
    .ema-prologue.navigation.direct
    {
        flex-direction: column;
        align-items: 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.left:first-child
    {
        margin-bottom: 1em;
    }
}