/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/
header {
    position: relative;
}
.logo img {width: var(--logo);    transition: all .2s ease-in-out;     display: block;}
header  .logo:hover img {filter: drop-shadow(0 1.1rem 2rem rgba(0, 0, 0, 0.1));}


header .notifications, header .scheme-toggle {
    position: relative;
    cursor: pointer;
}

header .notifications #newPosts .number {
    position: absolute;
    border-radius: 50%;
    font-size: var(--f7);
    color: var(--white);
    background: var(--c1);
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: -.8rem;
}

header .notifications:before {
        content: '';
        display: block;
        height: var(--headerIcon);
        min-width: var(--headerIcon);
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M411%20262.862V215c0-69.822-46.411-129.001-110-148.33V45c0-24.813-20.187-45-45-45s-45%2020.187-45%2045v21.67C147.41%2085.999%20101%20145.177%20101%20215v47.862c0%2061.332-23.378%20119.488-65.827%20163.756A14.999%2014.999%200%200046%20452h136.509c6.968%2034.192%2037.272%2060%2073.491%2060%2036.22%200%2066.522-25.808%2073.491-60H466a15%2015%200%200010.827-25.382C434.378%20382.35%20411%20324.193%20411%20262.862zM241%2045c0-8.271%206.729-15%2015-15s15%206.729%2015%2015v15.728c-4.937-.476-9.94-.728-15-.728s-10.063.252-15%20.728zm15%20437c-19.555%200-36.228-12.541-42.42-30h84.84c-6.192%2017.459-22.865%2030-42.42%2030zM78.33%20422C112.491%20376.208%20131%20320.792%20131%20262.862V215c0-68.925%2056.075-125%20125-125s125%2056.075%20125%20125v47.862c0%2057.93%2018.509%20113.346%2052.671%20159.138zM451%20215c0%208.284%206.716%2015%2015%2015s15-6.716%2015-15c0-60.1-23.404-116.603-65.901-159.1-5.857-5.857-15.355-5.858-21.213%200s-5.858%2015.355%200%2021.213C430.717%20113.944%20451%20162.913%20451%20215zM46%20230c8.284%200%2015-6.716%2015-15%200-52.086%2020.284-101.055%2057.114-137.886%205.858-5.858%205.858-15.355%200-21.213-5.857-5.858-15.355-5.858-21.213%200C54.404%2098.398%2031%20154.9%2031%20215c0%208.284%206.716%2015%2015%2015z%22%20data-original%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E);
}

header #postsList  {
    position: absolute;
    background: var(--white);
    padding: var(--paD);
    border-radius: var(--roUnd-);
    box-shadow: var(--shD);
    width: var(--overLayWidth);
    right: var(--overlayPos);
    margin-top: var(--overlayTop);
    display: none;
    z-index: 5000;
}

header #postsList .titLeH {
    font-size: var(--f3);
    margin-bottom: var(--mb);
    padding-bottom: var(--mb-);
    font-weight: bold;
    font-family: var(--fw-);
    font-style: italic;
    border-bottom: solid .1rem var(--gray);
}

header #postsList[aria-expanded="true"] {
    display: block; /* Show when aria-expanded is true */
}



header .scheme-toggle:before {
    content: '';
    display: block;
    height: var(--headerIcon);
    min-width: var(--headerIcon);
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M21.21%2014.52a.75.75%200%2000-.86-.08%206.25%206.25%200%2001-6.42-10.71.76.76%200%2000.33-.79.77.77%200%2000-.63-.59%209.75%209.75%200%20107.8%2013%20.76.76%200%2000-.22-.83zm-8.93%205.73a8.25%208.25%200%2001-.73-16.47%207.75%207.75%200%20005.73%2013%207.53%207.53%200%20001.89-.24%208.27%208.27%200%2001-6.89%203.71z%22%20data-original%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E);
}



/*--------------------------------------------------------------
Searchbar
--------------------------------------------------------------*/
.searchBar {
    z-index: 500;
}
.searchBar input[type=text], .form input[type="search"] {
    align-self: center;
    transition: all .1s ease;
    width: var(--search);
    background-color: transparent;
    border: .1rem solid var(--black);
    padding: .4rem .8rem;
    outline: 0;
    min-height: .8rem;
    border-radius: var(--roUnd);
    color: var(--black);
}

.searchBar input.open {
    width: calc(var(--search)* 2);
}


.form input[type="search"]:focus {
    border: solid .2rem var(--black);
    outline: none;
}

.searchBar ::-webkit-input-placeholder{
    color:var(--black);
}