html{
    height:100%;
}

body{
    height:100%;
    margin:0;
    padding:0;
    font-family:'Muli', Helvetica, Arial, sans-serif;
    background-color:rgba(135,206,250,0.8);
    background-image:url('assets/clouds.png'); 
    background-repeat:repeat-x;
}

#game-overlay{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:2;
}

#title-chlo-container{
    width:100%;
    position:relative;
}

/*#title-chlo{
    width:76px;
    height:80px;
    background:pink;
    font-size:30pt;
    color:white;
    text-align:right;
    padding-right:4px;
    line-height:120px;
    position:absolute;
    left:50%;
    margin-left:-40px;
    margin-top:-100px;
}*/

#title{
    font-size:80pt;
    text-align:center;
}

#subtitle{
    font-size:18pt;
    text-align:center;
    margin-top:-20px;
}

.button{
    cursor:pointer;
    text-align:center;
    font-size:25pt;
    width:130px;
    padding:10px;
    position:absolute;
    left:50%;
    margin-left:-65px;
    margin-top:50px;
    color:rgba(0,122,255,1);
}

    .button:hover{
        color:rgba(0,122,255,0.5);
        transition:0.3s;
    }

#mainscreen{
    position:relative;
    z-index:100;
    top: 50%;
    margin-top:-40px;
    transform: translateY(-50%);
}

#disclaimer{
    font-size:9pt;
    bottom:5px;
    left:5px;
    position:absolute;
    z-index:99;
}

#blanket{
    background:rgba(255,255,255,0.5);
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    z-index:98;
}

#die{
    font-size:60pt;
    position:absolute;
    z-index:99;
    width:100%;
    text-align:center;
    height:100px;
    line-height:100px;
    top:50%;
    margin-top:-50px;
    display:none;
}

    #die:before{
        content:"\2665";
        color:red;
    }

#character{
    font-size:18pt;
    position:absolute;
    z-index:99;
    width:100%;
    text-align:center;
    height:200px;
    line-height:100px;
    top:50%;
    margin-top:-100px;
    display:none;
}

    #character-icon{
        width:30px;
        height:30px;
        display:inline-block;
        position:relative;
        background:black;
        vertical-align:middle;
        margin-right:15px;
    }

    #character-desc{display:inline-block}

    #character-name{
        color:#FFF;
        position:absolute;
        top:-29px;
        right:2px;
    }

    #character-next-container{
        position:relative;
    }

    #character-next{
        color:rgb(0,122,255);
        width:130px;
        height:40px;
        line-height:40px;
        position:absolute;
        left:50%;
        margin-left:-65px;
        cursor:pointer;
        -webkit-user-select:none;
        -moz-user-select:none;
        user-select:none;
    }

    #character-next:hover{
        color:rgba(0,122,255,0.5);
        transition:0.3s;
    }

#story-container{
    font-size:18pt;
    z-index:99;
    position:absolute;
    display:none;
    width:100%;
    height:100%;
}

    #story-text{
        padding:30px;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        margin-top:-50px;
        text-align:center;
    }

    #story-next{
        color:rgb(0,122,255);
        cursor:pointer;
        width:100%;
        text-align:center;
        position:absolute;
        top:50%;
        margin-top:40px;
        -webkit-user-select:none;
        -moz-user-select:none;
        user-select:none;
    }

    #story-next:hover{
        color:rgba(0,122,255,0.5);
        transition:0.3s;
    }

#button-container{
    position:relative;
}

#game, #objective, #coins, #lives{display:none}

#game{
    position:absolute;
    top:0;
    left:0;
}

#objective{
    position:absolute;
    top:60px;
    left:10px;
}

#characters-depot{
    position:relative;
    display:none;
}

    .characters{
        position:absolute;
        top:85px;
        width:18px;
        padding-right:2px;
        height:20px;
        font-size:12pt;
        line-height:27px;
        text-align:right;
        cursor:pointer;
    }

#coins{
    position:absolute;
    top:113px;
    left:40px;
    height:20px;
    line-height:20px;
}

#lives{
    position:absolute;
    top:138px;
    left:40px;
    height:20px;
    line-height:20px;
}

.img-preload{
    display:none;
}

#health{
    position:absolute;
    top:60px;
    right:10px;
    display:none;
    z-index:98;
}

#health-bar-container{
    width:150px;
    height:15px;
    border:1px solid black;
    position:relative;
    border-radius:5px;
}

#health-bar{
    position:absolute;
    top:0;
    left:0;
    background:red;
    width:100%;
    height:100%;
}

#health-name {
    text-align:right;
}

#end{
    position:absolute;
    top:50%;
    height:100px;
    line-height:100px;
    font-size:20pt;
    margin-top:-50px;
    left:50%;
    margin-left:-250px;
    width:500px;
    text-align:center;
    display:none;
}