styles.css

body {
    background: rgb(190, 52, 85);
    background: linear-gradient(285deg, rgb(52, 82, 111) 0%, rgb(20, 20, 20) 80%);
    margin: 0px;
}

#menu {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
}

em {
    padding: 20px;
}

.menu-item {
    color: white;
    font-size: clamp(3rem, 4vw, 4rem);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    display: block;
    text-decoration: none;
    padding: clamp(0.25rem, 1vw, 2rem) 0rem;
    transition: opacity 400ms ease;
}

#menu-items {
    margin-left: clamp(4rem, 20vw, 48rem);
    position: absolute;
    z-index: 2;
}

#menu-items:hover > .menu-item {
    opacity: 0.3;
}

#menu-items:hover > .menu-item:hover {
    opacity: 1;
}

#menu-background-pattern {
    height: 100vh;
    width: 100vw;

    background-image: radial-gradient(
        rgba(255, 255, 255, 0.1) 1%,
        transparent 3%
    );
    background-position: 0% 0%;
    background-size: 12vmin 12vmin;
}

#menu-background-image {
    height: 100%;
    width: 100%;

    background-image: url("./greenhouse-bg.jpg");
    
    position: absolute;

    background-position: center 40%;
    background-size: 110vmax;
    opacity: 0.15;
}