/* 
    Created on : 10-Nov-2018, 11:28:58
    Author     : Atspulgs
*/
@charset "utf-8";
@import url("burger.css");
@font-face {
    font-family: "FightingSpirit";
    font-display: auto;
    font-style: normal;
    src: url("../fonts/fighting_spirit.ttf");
}
@font-face {
    font-family: "FightingSpirit";
    font-display: auto;
    font-weight: bold;
    font-style: normal;
    src: url("../fonts/fighting_spirit_bold.ttf");
}
:root {
    --navigation-link-color: #fff;
    --navigation-bg-color: rgba(0, 0, 0, 1);
    --navigation-link-hover-bg-color: #c00;
    --navigation-height: 60px;
    --burger-bg-color: #fff;
    --burger-bg-hover-color: #c00;
}
nav {
    background-color: var(--navigation-bg-color, #000);
    color: var(--navigation-link-color, #fff);
    position: sticky;
    top: 0px;
    z-index: 2;
}
nav a {
    text-decoration: none;
    color: inherit;
    cursor: inherit;
}
nav ul {
    overflow: hidden;
    max-width: 900px;
    max-height: var(--navigation-height, 60px);
    
    transition: max-height 0.4s;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}
nav ul li {
    display: inline-block;
    box-sizing: border-box;
    padding: 0px 10px;
    margin: 0px;
    min-height: var(--navigation-height, 60px);
    max-height: var(--navigation-height, 60px);
    line-height: var(--navigation-height, 60px);
    text-align: center;
    vertical-align: middle; 
}
nav ul li:first-child {
    min-width: 180px;
    position: relative;
}
nav ul li:not(:first-child) {
    min-width: 120px;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    
    transition-property: background-color;
    transition-delay: 0s;
    transition-duration: 0.15s;
    transition-timing-function: linear;
}
nav ul li:not(:first-child) a {
    width: 100%;
    height: 100%;
    display: inline-block;
}
nav ul li:first-child a {
    font-family: FightingSpirit;
    font-size: 30px;
    cursor: pointer;
    
    transition-property: color;
    transition-delay: 0s;
    transition-duration: 0.15s;
    transition-timing-function: linear;
}
nav ul li:first-child .burger {
    right: 15px;
    top: calc(50% - 12px);
}
nav ul li:not(:first-child):hover {
    background-color: var(--navigation-link-hover-bg-color, #c00);
}
nav ul li:first-child a:hover {
    color: var(--navigation-link-hover-bg-color, #c00);
}
.burger {
    display: none;
}
@media screen and (max-width: calc(180px + 120px * 3)) {
    .burger {
        display: inline-block;
    }
    nav ul li {
        width: 100%;
        text-align: left;
    }
    nav ul.showing {
        max-height: calc(var(--navigation-height, 60px) * 6);
    }
}