.header {
    align-items: center;
    background-color: var(--settings-header);
    border-bottom: 6px solid #b1b2b5;
    box-shadow: 0px 5px #0000004a;
    display: flex;
    height: 100px;
    padding: 0 20px;
    position: fixed;
    width: 100%;
    top: 0;
    transition: backdrop-filter .5s ease, background-color .5s ease, box-shadow .5s ease, padding-left .5s ease, padding-right .5s ease;
    z-index: 500;
}



.header.forcontent {
    display: none; /* will show if a user selected a setting (for small screens) */
}

.header.forcontent.opened {
    display: flex;
}



/* @media for header size */



@media only screen and (max-width: 430px) {
    .header {
        padding: 0 10px;
    }
}



@media only screen and (max-height: 500px) {
    .header {
        height: 60px;
    }
}



@media only screen and (min-width: 660px) {
    .header.forcontent.opened {
        display: none;
    }
}



@media only screen and (min-width: 800px) {
    .header {
        padding-left: 50px;
        padding-right: 50px;
    }
}



@media only screen and (min-width: 2000px) {
    .header {
        padding-left: 10%;
        padding-right: 10%;
    }
}



/* assets */
a#back-history, .back-history {
    cursor: pointer;
    margin-right: 18px;
    transition: margin-right .5s ease, margin-left .5s ease;
}



.b {
    align-items: center;
    display: flex;
    justify-content: center;
}

.b img {
    height: 20px;
    margin: 10px;
    width: 20px;
}



/* Interactions */

.hover_itm:focus-visible {
    outline: 3px solid #000;
}
.hover_itm:hover {
    background-color: #f4f6f9;
}
.hover_itm:focus-visible:active {
    background-color: #d0d1d4;
}
.hover_itm:active {
    background-color: #d0d1d4;
}



@media only screen and (max-width: 753px) {
    .header a#back-history, .header .back-history {
        margin-left: 5px;
    }
}

@media only screen and (min-width: 753px) {
    .header {
        padding-left: 3.4%;
        padding-right: 3.4%;
    }
}