.header {
    align-items: center;
    background-color: var(--header);
    box-shadow: 0px 0px #11110f;
    display: flex;
    height: 100px;
    position: fixed;
    width: 100%;
    top: 0;
    transition: box-shadow .5s ease, padding .5s ease;
    z-index: 500;
}



/* @media for header size */



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



@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 {
    transition: margin-right .5s ease;
}



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

.b img {
    height: 20px;
    margin: 10px;
    width: 20px;
}
.b img.back_hover, .b img.back_active {
    display: none;
}

/* when focus */
.b:focus-visible img.back_hover {
    display: block;
}
.b:focus-visible img.back {
    display: none;
}

/* when hover */
.b:hover img.back_hover {
    display: block;
}
.b:hover img.back {
    display: none;
}

/* when tap */
.b:active img.back_active {
    display: block;
}
.b:active img.back, .b:active img.back_hover {
    display: none;
}



.rfbstore-logo { /* RFB Store logo */
    display: none;
    height: 60px;
    transition: all .5s ease;
}



/* Interactions */

.hover_itm:focus-visible {
    background-color: #8e8e8e2b;
    outline: 3px solid #fff;
}
.hover_itm:hover {
    background-color: #8e8e8e2b;
}
.hover_itm:focus-visible:active {
    outline: 3px solid #8e8e8e;
}
.hover_itm:active {
    background-color: #8e8e8e;
}



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

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



/* @media area for header */
@media only screen and (min-width: 360px) {
    .header img.rfbstore-logo {
        height: 65px;
    }
}



@media only screen and (min-width: 376px) {
    .header a#back-history {
        margin-right: 18px;
    }
}



@media only screen and (max-height: 500px) {
    .header img.rfbstore-logo {
        height: 50px;
    }
}