body {
    background-color: rgb(20,20,20);
    margin: 0px;
}

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

h1 {
    color: goldenrod;
    font-size: clamp(3rem, 8vw, 4rem);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

h2 {
    color: goldenrod;
    font-size: clamp(2rem, 8vw, 3rem);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

h3 {
    color: goldenrod;
    font-size: clamp(0.5rem, 4vw, 1rem);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.menu-item {
    color: white;
    font-size: clamp(2rem, 8vw, 3rem);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

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

.displaytext{
    color: white;
    font-size: clamp(2rem, 8vw, 3rem);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

    display: block;
    text-decoration: none;
    padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
}

#menu-items {
    margin-left: clamp(4rem, 20vw, 48rem);
    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: 99vw;
    
    background-image: radial-gradient(
        rgba(122, 226, 11, 0.05) 69%,
        transparent 9%
    );
    background-position: 0% 0%;
    background-size: 12vmin 12vmin;

    position: absolute;
    left: 0px;    
    top: 0px;
    z-index: 1;

    transition: opacity 800ms ease,
        background-size 800ms ease;
}

#menu-items:hover ~ #menu-background-pattern {
    background-size: 11vmin 11vmin;
    opacity: 0.5;
}

#results {
    color: white;    
    font-size: clamp(1rem, 8vw, 2rem);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-decoration: none;    
    transition: opacity 400ms ease;    
}

#results p {
    color: white;
    font-size: clamp(0.75rem, 8vw, 1rem);
    display: block;
}

img {
    max-width: 30vw;
    max-height: 30vh;   
}

.result {
    margin: clamp(1rem, 5vw, 5rem);
    padding: clamp(1rem, 5vw, 5rem);
    background-color: rgb(40,40,40);    
    float:left;
    width:30vw;
    height:50vh;
    min-width: 400px;
    min-height: 450px;
    overflow: hidden;
}

.resultinner a{
    color: white;
}