/*Enter*/
@import url('custom_scroll.css');
@import url('colors.css');
@import url('normalize.css');
@import url('aside.css');
@import url('nav.css');
@import url('content.css');

/*common*/
path.logo
{
    fill: hsl(var(--blue));
    transition: all 0.3s;
}

@media screen and (min-width: 1000px)
{
    .white path.logo
    {
        fill: hsl(var(--white));
    }
}

/*header*/
header
{
    margin:          38px 0 0 35px;
    display:         inline-flex;
    align-items:     flex-star;
    align-content:   flex-start;
    justify-content: space-between;
    position:        fixed;
    left:            0;
    top:             0;
    z-index:         101;
}

@media screen and (max-width: 999px)
{
    header
    {
        padding:    10px 20px;
        margin:     0;
        background: hsl(var(--gray));
        width:      100%;
        box-shadow: 0 0 20px hsla(var(--black), 0.2);
    }
}

header a.logo
{
    max-width:       215px;
    min-width:       215px;
    height:          45px;
    max-height:      45px;
    display:         inline-flex;
    align-items:     flex-start;
    align-content:   flex-start;
    justify-content: flex-start;
    flex-wrap:       wrap;
    overflow:        hidden;
    animation:       logo 10s infinite;
}

@media screen and (max-width: 999px)
{
    header a.logo
    {
        max-width:  calc(215px / 2);
        min-width:  calc(215px / 2);
        height:     calc(45px / 2);
        max-height: calc(45px / 2);
    }
}

header.inside a.logo
{
    max-width:  calc(215px / 2);
    min-width:  calc(215px / 2);
    height:     calc(45px / 2);
    max-height: calc(45px / 2);
}

header .logo svg
{
    width: 100%;
}

header a.logo:hover
{
    background:    url('../images/glitch.svg') no-repeat center center/100% auto !important;
    align-items:   center !important;
    align-content: center !important;
}

header a.mobile_menu
{
    margin:          1px 0 0;
    min-width:       20px;
    max-width:       20px;
    height:          20px;
    display:         none;
    align-items:     center;
    align-content:   center;
    justify-content: center;
    overflow:        hidden;
}

@media screen and (max-width: 999px)
{
    header a.mobile_menu
    {
        display: inline-flex;
    }
}

header a.mobile_menu.opened
{
    transform: rotate(-45deg);
}

header a.mobile_menu path
{
    min-width:  20px;
    min-height: 20px;
    display:    block;
}

header a.mobile_menu svg
{
    transform:  scale(1.8);
    transition: all 0.3s;
}

header a.mobile_menu:hover svg
{
    transform: scale(1);
}

header a.mobile_menu.opened svg
{
    transform: scale(1);
}

footer
{
    font-size:       10pt;
    padding:         0 40px 20px;
    display:         flex;
    align-items:     center;
    align-content:   center;
    justify-content: space-between;
    width:           100%;
    position:        fixed;
    left:            0;
    bottom:          0;
    z-index:         101;
}

@media screen and (max-width: 999px)
{
    footer
    {
        background: hsl(var(--gray));
        padding:    10px 20px;
        min-height: 20px;
        box-shadow: 0 0 20px hsla(var(--black), 0.2);
        z-index:    99;
    }
}

@media screen and (max-width: 480px)
{
    footer
    {
        justify-content: flex-start;
        flex-direction:  column;
    }
}

@media screen and (max-width: 480px)
{
    footer span
    {
        font-size: 9pt;
        width:     100%;
    }
}

@media screen and (min-width: 1000px)
{
    footer.white,
    footer.white a,
    footer.white a:hover
    {
        color: hsl(var(--white));
    }
}