@font-face 
{
    font-family: 'NunitoSansRegular';
    src: url('/fonts/NunitoSans/NunitoSans-Regular.ttf');
}

@font-face 
{
    font-family: 'NunitoSansBold';
    src: url('/fonts/NunitoSans/NunitoSans-Bold.ttf');
}

body
{
    font-family: 'NunitoSansRegular';
    font-size: 18px;
    color: #eee;
    background: #292729;
    margin: 0px;
}

#container
{
    width: calc(100% - 15px);
    max-width:1000px;
    margin: 10px auto;
}

.warning
{
    padding: 20px;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    margin: 20px 0;
}

a
{
    color: #AED6F1;
    text-decoration: none;
}

.link
{
    display: block;
}

a:hover
{
    text-decoration: underline;
}

#logo
{
    display: block;
    width: 300px;
    max-width: 100%;
    margin: 50px auto;
}

h1
{
    border-bottom: 1px solid white;
    font-size: 26px;
    margin: 40px 0;
    padding-bottom: 10px;
    color: white;
}

h2
{
    border-bottom: 1px solid white;
    font-size: 24px;
    margin: 40px 0;
    padding-bottom: 10px;
    color: white;
}

h3
{
    font-size: 20px;
    font-family: 'NunitoSansBold';
    color: white;
}

h4
{
    margin: 0px;
    padding: 5px;
    color: white;
    border-bottom: 1px solid white;
    font-weight: normal;
}

h5
{
    font-family: 'NunitoSansBold';
    color: white;

}

.icon
{
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 7px;
}

i
{
    font-family: 'NunitoSansBold';
    font-style: normal;
    color: white;
}

.screenshot
{
    display: block;
    max-width: 600px;
    margin: 30px auto;
}

.screenshot.resize
{
    width: 100%;
}

pre
{
    margin: 0 0 20px 0;
    font-size: 14px;
}

p
{
    text-align: justify;
}

.langs 
{
    margin: 20px 0 30px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}

.langs a 
{
    width: 40px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    margin: 0 10px;
    display: block;
    border-radius: 3px;
}

.langs a:active
{
    transform: translateY(2px);
}

.langs a.fr
{
    background-image: url('/img/flag-fr.png');
}

.langs a.en
{
    background-image: url('/img/flag-en.png');
}