@font-face
    {
        font-family: 'Passion' ;
        src: url( "../fonts/Passion.ttf" ) ;
    }

@font-face
    {
        font-family: 'Aileron' ;
        src: url( "../fonts/Aileron.otf" ) ;
    }

@font-face
    {
        font-family: 'AileronBold' ;
        src: url( "../fonts/AileronBold.otf" ) ;
    }

@font-face
    {
        font-family: 'AileronBlack' ;
        src: url( "../fonts/AileronBlack.otf" ) ;
    }


body
    {
        background-image: url( "../images/background-splash.png" ) ;
        overflow: hidden ;
    }


#curtains
    {
        pointer-events: none ;
        width: 100% ;
        position: absolute ;
        top: -68px ;
        z-index: 2 ;
    }


#curtains img
    {
        width: 100% ;
    }


#logo
    {
        pointer-events: none ;
        z-index: 1 ;
        position: relative ;
        top: 97px ;
        left: 20px ;
        text-align: center ;
    }


#logo img
    {
        transform: scale( 1.25 ) ;
    }


#buttons
    {
        text-align: center ;
    }


#login , #register
    {
        margin-left: 7px ;
        margin-right: 7px ;
        width: 520px ;
        height: 60px ;
        font-family: 'AileronBlack' ;
        font-weight: 900 ;
        font-size: 28px ;
        color: #dc2d36 ;
        background-color: white ;
        border: 4px outset #dc2d36 ;
        border-radius: 5px ;
        position: relative ;
        top: 28px ;
        text-shadow: 2px 2px white , -2px 2px white , 2px -2px white , -2px -2px white , 0px 0px 30px rgba(0,0,0,0.4) ;
        z-index: 5 ;
    }


button:active
    {
        border: 3px inset #dc2d36 ;
    }


#nightfall
    {
        z-index: 10 ;
        width: 100% ;
        height: 100% ;
        background-color: rgba(0,0,0,0.82) ;
        position: absolute ;
        top: 1px ;
        left: 0px ;
        display: none ;
    }


#loginpanel
    {
        width: 600px ;
        height: 318px ;
        position: fixed ;
        top: 50% ;
        left: 50% ;
        margin-left: -300px ;
        margin-top: -149px ;
        background-color: white ;
        border: 6px solid #ddd ;
        border-radius: 25px ;
        box-shadow: 0px 0px 30px black ;
        text-align: center ;
        padding-top: 20px ;
        display: none ;
    }


#registerpanel
    {
        width: 600px ;
        height: 645px ;
        position: fixed ;
        top: 50% ;
        left: 50% ;
        margin-left: -300px ;
        margin-top: -338px ;
        background-color: white ;
        border: 6px solid #ddd ;
        border-radius: 25px ;
        box-shadow: 0px 0px 30px black ;
        text-align: center ;
        padding-top: 20px ;
        display: none ;
    }


label
    {
        font-family: 'Passion' ;
        font-size: 45px ;
        color: #dc2d36 ;
        text-shadow: 0px 1px 0px #eee, 0px 2px 0px #ddd, 0px 3px 0px #aaa;
        line-height: 56px ;
    }


input
    {
        border: 2px inset #666 ;
        border-radius: 2px ;
        padding-left: 5px ;
        font-family: Aileron ;
        width: 450px ;
        height: 30px ;
        margin-bottom: 18px ;
        text-align: center ;
        font-size: 18px ;
        background-color: #f8f8f8 ;
    }


#registerpanel button , input[type="button"]
    {
        font-family: 'Aileron' ;
        font-weight: 900 ;
        font-size: 20px ;
        color: white ;
        background-color: #dc2d36 ;
        border: none ;
        width: 175px ;
        height: 36px ;
        margin-right: 25px ;
        position: relative ;
        left: 13px ;
        margin-top: 30px ;
    }


#loginpanel button , input[type="button"]
    {
        font-family: 'Aileron' ;
        font-weight: 900 ;
        font-size: 20px ;
        color: white ;
        background-color: #dc2d36 ;
        border: none ;
        width: 175px ;
        height: 36px ;
        margin-right: 25px ;
        position: relative ;
        left: 13px ;
        margin-top: 30px ;
    }