.landscape {
    height: calc(100vh - 79px);
    overflow: hidden;
    position: relative;
    width: 100%;
    background-color: rgb(122, 192, 249);
}

.layer-foreground {
    background-image: url("/img/landing/foreground.webp");
    z-index: 6;
    position: absolute;

    background-position: center center;
    background-size: cover;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    width: 100%;
    height: calc(100vh - 79px);
    transition: opacity 0.5s ease 0s;
}

.fg-layer-char {
    background-position: center center;
    background-size: cover;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.fg-layer-log {
    background-image: url("/img/landing/foreground-characters-log.gif");
    z-index: 7;
    position: absolute;
}

.fg-layer-wave {
    background-image: url("/img/landing/foreground-characters-byron.gif");
    z-index: 7;
    position: absolute;
}

.fg-layer-drinking {
    background-image: url("/img/landing/foreground-characters-drinking.gif");
    z-index: 7;
    position: absolute;
}

.fg-layer-blue {
    background-image: url("/img/landing/foreground-characters-blue.gif");
    position: absolute;
    z-index: 7;
}

.fg-layer-selfies {
    background-image: url("/img/landing/foreground-characters-selfies.gif");
    z-index: 7;
    position: absolute;
}

.fg-layer-wood {
    image-rendering: pixelated;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 15px;
    z-index: 7;
    background-image: url("/img/landing/separator-wood.png");
    background-position: initial;
    background-size: initial;
    background-repeat: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    box-shadow: rgb(230, 230, 230) 0px 6px 12px 0px;
    background-attachment: unset !important;
}

.background-layer {
    background-position: center center;
    background-size: cover;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    width: 100%;
    height: calc(100vh - 79px);
    position: absolute;
    z-index: 1;
    transition: opacity 0.5s ease 0s;
}

.bg-layer-logo {
    position: absolute;
    filter: drop-shadow(2px 4px 6px black);
    z-index: 6;
    top: calc(50% - 330px);
    left: calc(50% - 200px);
    width: 400px;
    height: auto;
    object-fit: scale-down;
    animation: 6s ease-in-out 0s infinite normal none running floatlogo;
}


.bg-layer-town {
    background-image: url("/img/landing/background-town.webp");
    z-index: 2;
}

.bg-layer-sky {
    background-image: url("/img/landing/background-sky.webp");
    z-index: 1;
}

.bg-layer-floating-island {
    z-index: 5;
    animation: 6s ease-in-out 0s infinite normal none running float;
    background-image: url("/img/landing/background-floating-island.gif");
}

.feature-card .feature-card-image-container {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: rgba(255, 183, 21, 0.09);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin-bottom: 10px;
}

.feature-card .feature-card-image-container img {
    width: 60px;
    height: auto;
    object-fit: contain;
    image-rendering: pixelated;
}

.feature-card h4 {
    white-space: nowrap;
    font-weight: bold;
    color: rgb(87, 135, 196);
    font-size: 17px;
}

.feature-card p {
    font-size: 16px;
    color: rgb(83, 83, 83);
}

.gallery-item {
    width: 300px;
    height: 300px;
    object-fit: cover;
    vertical-align: middle;
}