@font-face {
    font-family: 'chelsea market';
    font-style: normal;
    font-weight: 400;
    src: url(//static.parastorage.com/tag-bundler/api/v1/fonts-cache/googlefont/woff2/s/chelseamarket/v13/BCawqZsHqfr89WNP_IApC8tzKChsJg8MKVWl4lw.woff2) format('woff2');
    unicode-range: U +0100 -02AF, U +0304, U +0308, U +0329, U +1E00 -1E9F, U +1EF2 -1EFF, U +2020, U +20A0 -20AB, U +20AD -20C0, U +2113, U +2C60 -2C7F, U + A720-A7FF;
    font-display: swap;
}

* {
    image-rendering:pixelated;
}

html {
    background: linear-gradient(to left, white, transparent), url(/lomax/bg.jpg);
    background-size: cover;
    font-family: chelsea market, fantasy;
}

body {
    margin: 0px;
}

.headerTop {
    color: #FF4040;
    margin: 2em 50.5em 0px 31.5em;
    border-radius: 1em 0em 0em;
    position: relative;
    padding: 0.7em 0em 0.5em 0.7em;
    border-bottom: none;
    box-shadow: 2px 4px 9px #0009;
    background: rgb(255 151 151 / 30%);
}

.headerTop div:first-of-type {
    width: 100%;
    height: 100%;
    position:absolute;
    border-radius: 1em 0em 0em;
    border: 1px solid white;
    z-index: -1;
    margin: -0.7em 0em -1em -0.7em;
    /* background: #0000005d; */
    overflow:hidden;
}


.headerTop div:not(div:first-of-type) {
    position: absolute;
    left: 35em;
    bottom: 0px;
    width: 20.5em;
    height: 3.5em;
    background: #fff;
    filter: drop-shadow(6px 4px 7px #00000040);
    border-radius: 2em 2em 0px 0px;
    padding: 0.5em 0.8em 0em 1.4em;
}

.headerTop div:first-of-type div {
    filter:none;
    margin:0px;
    border:0px;
    border-top: 1px solid #ffb9b9;
    background: transparent;
}

.headerTop div::before {
    border-bottom: 3px solid white;
    width: 100%;
}

.headerTop p {
    margin: 0px;
    font-size: 1.4em;
    font-family: cursive;
    font-style: italic;
}
.headerTop div p {
    font-family: inherit;
    color: #fe7105;
    font-size: 2.4em;
}

.headerTop img{
    position: absolute;
    float: right;
    left: 22.2em;
    bottom: 0px;
}

#navbar {
    width: 100%;
    background: linear-gradient(to top, #00000040, transparent), #fff;
    padding: 0.15em 0px 0.5em;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
    margin: 0px;
    z-index: 1;
    position: relative;
}

#navbar li a {
    padding: 0px 2.3em;
    margin: 0px 0.3em;
    font-size: 0.7em;
    border: 1px solid orangered;
    background: linear-gradient(to top, #ff000070, transparent), orange;
    color: white;
    text-decoration: none;
    transition: filter 0.1s;
}

#navbar li a::before {
    background:#000;
    width:100%;
    height:100%;
}

#navbar li a:not(.active):hover{
  filter: brightness(0.8);
}

#navbar li a.active {
  background: linear-gradient(to top, #c15c0d, transparent), #d9a158;
  color: #fae397;
}