@use "sass:color" as c;

@use "general";
@use "fonts";
@use "main-palette" as mp;

body {
    background-color: mp.$bg;
    /*background-image: url("/img/bgpat.png");
    background-repeat: repeat;*/

    a { color: mp.$link; }
    a:hover { color: c.adjust($color: mp.$link, $saturation: 4%, $lightness: 10%); }
}
.header-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    .header {
        display: block;
        .header-banner {
            background-image: url("/img/home_banner.jpg");
            width: 298px;
            height: 140px;
            border-right: 1px solid mp.$border;
            border-bottom: 1px solid mp.$border;
            border-radius: 0% 0% 20px 0%;
        }
        .header-banner:hover{ background-image: url("/img/home_banner_hover.jpg"); }
    }

    .navbar-wrapper {
        display: flex;
        align-items: flex-start;
        margin-top: 8px;

        ul {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            list-style: none;
            padding: 0;
            li {
                display: flex;
                margin: 2px;
                a {
                    padding: 0.2em 0.5em;
                    border: 1px solid mp.$border;

                    background: mp.$bg;
                    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 10%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%) 100%);

                    color: mp.$text;
                    font-family: fonts.$ll;
                    font-weight: normal;
                    font-size: 1em;
                    text-decoration: none;
                    /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
                }

                a:hover { background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -10%) 100%); }
            }
        }
    }
}