@use './colors' as *;
@use './responsive' as r;
@use './sizes';

#header {
    .text {
        background-color: $green;
        padding: 5px 0;
        
        .logo-link {
            display: flex;
            justify-content: center;
            width: 100%;

            @include r.normal {
                // max-height: 100px;
                justify-content: left;
            }

            img {
                max-width: 85%;

                // height: 100%;
                @include r.normal {
                    max-height: 100px;
                    margin: 0 10px -20px;
                }
            }
        }

    }

    .track {
        height: 50px;
        background-image: url('../images/track.png');
        background-repeat: repeat-x;
        background-size: contain;

        @include r.normal {
            height: 80px;
        }
    }

    .black-background {
        display: none;

        @include r.normal {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: sizes.$left-menu-width;
            height: 100%;
            background-color: $black;
            z-index: -1;
        }
    }
}