/*
// main.css
// (c) 2014 - 2015 Insert Coin LLC. All rights reserved.
*/

body
{
    font-family : Domine;
    font-size   : 14pt;
    margin      : 0 5%;
}

h1
{
    font-family : Sahitya;
}

p
{
    line-height : 1.7em;
}

i
{
  display                       : inline-block;
  font-family                   : 'Material Icons';
  font-weight                   : normal;
  font-style                    : normal;
  font-size                     : 24px;
  line-height                   : 1;
  letter-spacing                : normal;
  text-transform                : none;
  white-space                   : nowrap;
  word-wrap                     : normal;
  direction                     : ltr;
  user-select                   : none;
  -webkit-font-feature-settings : 'liga';
  -webkit-font-smoothing        : antialiased;
}

.task
{
    display     : flex;
    align-items : center;
    margin      : 20px 0;
}

.task .points
{
    flex-grow        : 0;
    flex-shrink      : 0;
    width            : 44px;
    height           : 44px;
    margin-right     : 13px;
    border-radius    : 22px;
    background-color : black;
    color            : white;
    font-size        : 22px;
    text-align       : center;
    line-height      : 44px;
}

#content
{
    margin-bottom : 13%;
}

#navigation
{
    position         : fixed;
    display          : flex;
    align-items      : center;
    left             : 0;
    right            : 0;
    bottom           : 0;
    top              : 90%;
    background-color : #333;
    padding          : 10px;
    color            : #777;
    box-shadow       : 0px -4px 16px 4px #6f6161;
    transition       : transform 0.3s ease-in-out;
}

#navigation.hidden
{
    transform : translate( 0, 97% );
}

#navigation img
{
    max-width    : 15%;
    position     : relative;
    margin-right : 15px;
    transition   : transform 0.7s ease-in-out;
}

#navigation.hidden img
{
    transform : translate( 0, 30px );
}

#navigation .title
{
    margin-right : 13px;
    font-size    : 10pt;
    flex-grow    : 1;
}

#navigation .progress
{
    flex-basis       : 44px;
    flex-grow        : 500;
    height           : 100%;
    background-color : #555;
}

#navigation .progress .bar
{
    height           : 100%;
    width            : 0%;
    background-color : #aa9f99;
}

#navigation .actions
{
    flex-grow      : 0;
    display        : flex;
    flex-direction : row;
    align-items    : center;
    margin-left    : 10px;
}

#navigation .actions i
{
    font-size : 44px;
}

#navigation .actions i:hover
{
    cursor    : pointer;
    transform : scale(1.1);
}

#navigation .actions i.disabled
{
    opacity   : 0.2;
    transform : inherit;
    cursor    : inherit;
}

#navigation .actions .up_next
{
    font-size : 8pt;
    color     : #555;
}

@media screen and ( max-width : 800px ) 
{

#navigation .actions .up_next
{
    display : none;
}

}

@media screen and ( max-width : 500px )
{

#navigation .progress
{
    display : none;
}

}

/*----*/

canvas.overlay
{
    position : fixed;
    left     : 0;
    right    : 0;
    top      : 0;
    bottom   : 0;
    z-index  : -1;
}