/*:root{
    --app-screen: large;
}

            @media screen and (width:800px) {
                .cancelbtn, .signupbtn {
                    width: 50%;
                    font-size: 16px;
                }
                .signup-modal-form{
                    width: 100%;
                }
            }
            
            body{
                width: 100%;
                margin: 0;
            }
            header{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                padding: 0.5rem;
                background-color: white;   
                position: sticky !important;
                top: 0;
                z-index: 1;
                --app-screen: large;
            }
            #logo{}
            .m-nav{
                box-shadow: 0px 5px 5px #444;
                position: fixed;
                top: 0;
                background-color: white;
                width: 100%;
                z-index: 2;
                margin: 0;
            }
            #company-name{
                font-size: 32px;
                font-weight: bold;
                color: rgb(50, 50, 50);
                display: inline;
                margin-right: 16px;
            }

            .i-div{
                display: flex;
                top: 0;
                font-size: 2em;
                padding-bottom: 0px;
                padding-top: 0px;
            }
            input[type=search]{
                border: none;
                border-radius: 6px;
                box-shadow: 0 0 1rem #666;
                font-size: .5em;
                min-height: 1rem;
                padding: 0.5rem;
                outline: none;
            }
            .nav-search-button{
                margin: 4px;
                border: none;
                font-size: .6em;
                padding: 4px 8px;
                outline: none;
            }
            #nav-ul{
                position: absolute;
                top: 0;
                background: white;
                z-index: 1;
                width: 100%;
            }
            #nav-ul, li.upper-nav-list{
                display: flex;
                justify-content: space-between;
                margin: 0 0.5rem;
            }
            li.current-nav{
                background-color: darkgray;
            }
            .upper-nav-list{
                padding: 17px 4px;
                position: relative;
            }
            .upper-nav-list:hover{
                background-color: lightblue;
            }
            .sub-menu{z-index: 1;}
            a {
                text-decoration: none;
                color: rgb(50, 50, 50);
            }
            
            .sub-menu{
                display: flex;
                box-shadow: 0 0 0.6rem #666;
                position: absolute !important;
                width: fit-content;
                padding: 12px;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                align-content: space-around;
                list-style: none;
            }
            .upper-nav-list:hover .sub-menu{
                display: block;
                background-color: white;
                animation-name: drop;
                animation-duration: 1s;
                transform: translateY(16px);
            }
            @keyframes drop{
                from{height: 0; opacity: 0}
                to{height: auto; opacity: 1}
            }


            .sub-menu ul{
                list-style-type: none;
            }
            .sub-menu li:hover .sub-menu-link{
                color: white;
                text-decoration: none;
                background-color: blue;
            }
            .sub-menu-link{
                padding: 1rem;
            }
            .sub-menu-link:hover{
                text-decoration: none;
                color: white;
            }
            
            .signup-modal{
                display: none;
                position: fixed;
                z-index: 1;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: #474e5d76;
                padding-top: 20px;
            }
            .signup-close{
                position: absolute;
                right: 31%;
                top: 48px;
                font-size: 40px;
                font-weight: bold;
                color: #f1f1f1;
            }
            .signup-close:hover,
            .signup-close:focus {
                color: #f44336;
                cursor: pointer;
            }
            form.signup-modal-form{
                width: 36%;
                background-color: #bbb;
                margin: 48px auto 24px auto;
                border: 1px solid #888;
            }
            div.modal-content-container{
                margin: 12px;
                margin-top: 0px;
                padding: 12px auto;
                background-color: #aaa;
            }
            hr{
                border : 1px solid #999;
                margin: 12px 12px;
            }

            input[type=text], input[type=password] {
                position: relative;
                width: 100%;
                padding: 15px 0;
                margin: 5px 0 20px 0;
                display: block;
                border: none;
                background: #f1f1f1;
            }

            input[type=text]:focus, input[type=password]:focus {
                background-color: #ddd;
                outline: none;
            }
            div.clearfix{
                display: flex;
            }
            .cancelbtn {
                background-color: #f44;
                width: 45%;
            }
            .signup{
                width: 45%;
            }
            
            
            
            button{
                background-color: blue;
                padding: 8px 16px;
                margin: 16px;
                border: none;
                border-radius: 4px;
                font-size: 1.5em;
                color: white;
            }
            .block-button{
                display: block;
                margin: 16px auto;
            }
            .button-whatever{
                float: right;
            }
            .block-button:hover, .block-button:focus{
                background-color: #22c;
                transition-duration: .3s;
            }
            .button-whatever:hover{
                box-shadow: 0 0 5px #777;
                transition-duration: .4s;
            }*/

.header{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0.5rem;
    border-bottom: 1px solid #000;

    .header-brand {
        display: inline-flex;
        align-items: center;
        p {
            display: none;
            margin: 0;
        }
    }

    .search-form{
        display: flex;
        border-radius: 1rem;
        background-color: grey;
        border: 1px solid #000;
        overflow: hidden;

        & input[type=search] {
            outline: none;
            border: none;
            padding: 0.5rem;
            /*width: 50%;
            max-width: 18rem*/
        }
        & button {
            padding: 0.5rem;
            margin: 0;
            border: none;
            background-color: transparent;
            color: white;
            cursor: pointer;
        }
    }

    .navbar-toggler {
        display: inline-block;

        .navbar-icon-line {
            display: block;
            width: 1rem;
            background-color: black;
            height: 2px;
            margin: 0.25rem;
        }
    }

    .navigation-container {
        .navbar-options-container {
            height: 100%;
            

            ul {
                display: none;
                justify-content: space-between;
                list-style: none;
                margin: 0;
                padding: 0;
                height: 100%;
                align-items: center;
    
                & a {
                    text-decoration: none;
                }
            }
        }
    }
}



@media screen and (min-width: 768px) {
    .header{
        .header-brand {
            display: inline-flex;
            align-items: center;
            min-width: 90px;
            justify-content: space-evenly;

            & p {
                display: inline-block;
            }
        }

        .navigation-container {
            width: 50%;

            .navbar-toggler { display:none; }

            .navbar-options-container > ul {
                display: flex;
                justify-content: space-between;
                list-style: none;
                margin: 0;
                padding: 0 2rem 0 0;

                & a {
                    text-decoration: none;
                }
            }
        }
    }
}