.fon {
    position: absolute;
    top: 0;
    width: 100%;
    height: 30vh;
    background-size: cover;
    background-repeat: round;
    overflow: hidden;
}

.fon:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 15%; 
    background: linear-gradient(to top, #0c0d0e, transparent);
}

.guest.fon {
    top: 0;
    width: 100%;
    min-height: 100vh;
    background-size: contain;
    background-repeat: round;
}

.pt-fon {
    padding-top: 20vh;
}

.fon.home {
    background-image: url("/templates/assets/images/fon/home.webp");
}
.fon.village {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #0b0c11 100%), url("/templates/assets/images/fon/village.webp") top center / cover no-repeat;
}
.fon.shop {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #0b0c11 100%), url("/templates/assets/images/fon/shop.webp") top center / cover no-repeat;
}

.fon.helmets {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #0b0c11 100%), url("/templates/assets/images/fon/helmets.webp") top center / cover no-repeat;
}
.fon.shoulders {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #0b0c11 100%), url("/templates/assets/images/fon/shoulders.webp") top center / cover no-repeat;
}
.fon.armor {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #0b0c11 100%), url("/templates/assets/images/fon/armor.webp") top center / cover no-repeat;
}
.fon.gloves {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #0b0c11 100%), url("/templates/assets/images/fon/gloves.webp") top center / cover no-repeat;
}
.fon.shields {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #0b0c11 100%), url("/templates/assets/images/fon/shields.webp") top center / cover no-repeat;
}
.fon.weapon {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #0b0c11 100%), url("/templates/assets/images/fon/weapon.webp") top center / cover no-repeat;
}
.fon.pants {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #0b0c11 100%), url("/templates/assets/images/fon/pants.webp") top center / cover no-repeat;
}
.fon.boots {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #0b0c11 100%), url("/templates/assets/images/fon/boots.webp") top center / cover no-repeat;
}

.fon.blacksmith {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #0b0c11 100%), url("/templates/assets/images/fon/blacksmith.webp") top center / cover no-repeat;
}
.fon.druid {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #0b0c11 100%), url("/templates/assets/images/fon/druid.webp") top center / cover no-repeat;
}
.fon.merchant {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #0b0c11 100%), url("/templates/assets/images/fon/merchant.webp") top center / cover no-repeat;
}