@font-face {
    font-family: 'Saira Condensed';
    src:url('/assets/SairaCondensed-ExtraLight.woff2');
}

@font-face {
    font-family: 'Monda';
    src: url('Monda-Regular.woff2');
}

:root {
    --u-theme-color: #db2020;
    --u-background-color: #111;
    --u-text: white;
    --u-logo-color: white;
}

h1.logo
{
    font-family: 'Saira Condensed';
    color: var(--u-logo-color);
    font-size: 36pt;
    margin: 0;
    margin-top: 5px;
    text-shadow: var(--u-logo-color) 0px 0px 20px;
}

.logo-wrapper
{
    border: 2px solid #333;
    border-radius: 100%;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    background-color: #222;
}

.logo-wrapper>.inner
{
    vertical-align: middle;
    display: inline-block;
    width: 86px;
    height: 86px;
    border: 2px solid #444;
    border-radius: 100%;
    margin:5px;
    background-color: #111;
}

.top-menu h1
{
    font-family: 'Saira Condensed', sans-serif;
    margin: 0px;
    padding: 0px;
    user-select: none;
    vertical-align: middle;
}

.top-menu .menu
{
    display: flex;
    align-items: center;
    font-family: 'Monda', sans-serif;
}

.top-menu.top-links .menu
{
    flex-direction: row-reverse;
}

.top-menu .menu .menu-item
{
    margin: 0px 18px;
    white-space: nowrap;  
}

.top-menu .menu .menu-item.profile
{
    align-self: last stretch;
}

.top-menu a
{
    color: white;
    text-decoration: none;
}

.top-menu a:hover
{
    color: #222;
}

.top-menu .menu .menu-item.app-icon
{
}

.top-menu .menu .menu-item.app-icon a
{
    vertical-align: middle;
    display: flex;
    align-items:center;
    column-gap: 5px;
}

.top-menu .menu .menu-item.app-icon a:hover
{
    text-shadow: black 0px 0px 4px;
}

html, body {
    margin: 0;
    animation-name: bg;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    background-color: #111;
    color: white;
    font-family: 'Monda', sans-serif;
}


.top-menu
{
    height: 45px;
    background-color: var(--u-theme-color);
    color: var(--u-text);
}

.top-menu.top-links
{
    height: 1.8em;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0)), var(--u-theme-color);
    
}

.top-menu.top-links .menu
{    
}

section>.section-content
{
    padding-top: 36px;
    padding-bottom: 36px;
}

section.about>.section-content
{
    background-color: rgb(36, 54, 97);
}

section.about>.container.header
{
    padding-top: 36px;
}

section.download>.section-content
{
    background-color: rgb(23, 95, 50);
}

section>.container.header
{
    text-align: center;
    min-height: 80px;
    vertical-align: middle;
    padding-bottom: 20px;
}

section>.container h3
{
    font-weight: normal;
    font-size: 24pt;
}


.container
{
    width: auto;
    margin: 0px 36px;
}

@media screen and (width > 1199px)
{
    .container
    {
        width: 1200px;
        margin: 0px auto;
    }
}

@media screen and (width > 859px)
{
    .container
    {
        width : 860px;
        margin: 0px auto;
    }
}